From 4101b85e5d3e4b23255e7e435aa4e2ea93bd9735 Mon Sep 17 00:00:00 2001
From: Daniel Rainer <daniel.m.rainer@student.uibk.ac.at>
Date: Fri, 19 Feb 2021 12:05:22 +0100
Subject: [PATCH] Improve search UI for different screen widths
---
.../webapp/app/mock-search/mock-search.component.html | 6 +++---
.../webapp/app/search-input/search-input.component.html | 9 ++++-----
2 files changed, 7 insertions(+), 8 deletions(-)
diff --git a/src/main/webapp/app/mock-search/mock-search.component.html b/src/main/webapp/app/mock-search/mock-search.component.html
index 0fdf087eb..4232aa1e7 100644
--- a/src/main/webapp/app/mock-search/mock-search.component.html
+++ b/src/main/webapp/app/mock-search/mock-search.component.html
@@ -5,13 +5,13 @@
(scrolled)="onScroll()">
<jhi-search-input
- class="col-md-6 col-lg-4 col-xl-3"
+ class="col-12 col-md-6 col-lg-4 col-xl-3"
(searchInputEvent)="updateSearchInput($event)">
</jhi-search-input>
- <div class="col-md-6 col-lg-8 col-xl-9">
+ <div class="col-12 col-md-6 col-lg-8 col-xl-9">
<div class="row">
<jhi-exercise-card *ngFor="let result of results"
- class="card-container col-md-12 col-lg-6 col-xl-4"
+ class="card-container col-12 col-lg-6 col-xl-4"
[exercise]="result"
(exerciseSelectionEvent)="selectExercise($event)">
</jhi-exercise-card>
diff --git a/src/main/webapp/app/search-input/search-input.component.html b/src/main/webapp/app/search-input/search-input.component.html
index 439f05dc0..ec025e30c 100644
--- a/src/main/webapp/app/search-input/search-input.component.html
+++ b/src/main/webapp/app/search-input/search-input.component.html
@@ -1,10 +1,9 @@
<div class="card-container">
- <div style="float: left; width: 100%; position: relative;">
- <h2 class="display-4" style="float: left;" jhiTranslate="search.title">Welcome!</h2>
+ <h2 class="display-4" style="float: left; width: 100%;" jhiTranslate="search.title">Welcome!</h2>
+ <div style="width: 100%; margin-bottom: 20px;">
<button type="button"
- class="btn btn-outline-secondary" style="float: right; margin-top: auto; position: absolute;
- top: 1.2rem; right: 0;"
- (click)="showSearchUsage = !showSearchUsage"
+ class="btn btn-outline-secondary"
+ (click)="showSearchUsage = !showSearchUsage"
>{{ (showSearchUsage ? 'search.hideUsage' : 'search.showUsage') | translate}}</button>
</div>
--
GitLab