From 8161f62ce0fa2f355857e73b1ab1168ceaeae9c1 Mon Sep 17 00:00:00 2001
From: Timo Volkmann <timo.tvm@gmail.com>
Date: Thu, 25 Jun 2020 21:34:01 +0200
Subject: [PATCH] further improvements for search ui

---
 .../search-input/search-input.component.html  | 24 ++++++++++---------
 .../search-input/search-input.component.scss  | 23 +++++++++++++++---
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/components/search-input/search-input.component.html b/frontend/src/app/components/search-input/search-input.component.html
index 95cbf73..fbc250f 100644
--- a/frontend/src/app/components/search-input/search-input.component.html
+++ b/frontend/src/app/components/search-input/search-input.component.html
@@ -25,16 +25,18 @@
         <!--  Multi presets  -->
         <mat-step>
           <ng-template matStepLabel>Which climate do you prefer?</ng-template>
-          <div *ngFor="let key of multiPresetsKeys" class="sub-group">
-            <span class="label">{{key|translate}}:</span><br>
-            <mat-radio-group [ngModel]="multiPresetSelection[key]" [value]="undefined">
-              <mat-radio-button
-                #btn
-                (click)="btn.checked = onMultiPresetSelect(preset)"
-                *ngFor="let preset of multiPresets.get(key)"
-                [value]="preset.preset_id"
-              >{{preset.tag_label|translate}}</mat-radio-button>
-            </mat-radio-group>
+          <div class="flexer">
+            <div *ngFor="let key of multiPresetsKeys" class="sub-group">
+              <span class="label">{{key|translate}}:</span><br>
+              <mat-radio-group [ngModel]="multiPresetSelection[key]" [value]="undefined">
+                <mat-radio-button
+                  #btn
+                  (click)="btn.checked = onMultiPresetSelect(preset)"
+                  *ngFor="let preset of multiPresets.get(key)"
+                  [value]="preset.preset_id"
+                >{{preset.tag_label|translate}}</mat-radio-button>
+              </mat-radio-group>
+            </div>
           </div>
         </mat-step>
         <!--    Single presets    -->
@@ -81,7 +83,7 @@
               <mat-icon>clear</mat-icon>
             </button>
           </mat-form-field>
-          <div class="horizontal space">
+          <div class="horizontal space center-desc">
             <mat-slide-toggle [(ngModel)]="fullText"></mat-slide-toggle>
             <span>Search in description </span>
           </div>
diff --git a/frontend/src/app/components/search-input/search-input.component.scss b/frontend/src/app/components/search-input/search-input.component.scss
index 6da7a49..edd7d74 100644
--- a/frontend/src/app/components/search-input/search-input.component.scss
+++ b/frontend/src/app/components/search-input/search-input.component.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
 
-  > .search-btn {
+  >.search-btn {
     margin-top: 1rem;
   }
 }
@@ -66,7 +66,7 @@
   align-items: center;
 
   &.space {
-    > * {
+    >* {
       margin: 0.5rem;
     }
   }
@@ -75,6 +75,10 @@
     justify-content: space-around;
   }
 
+  &.center-desc {
+    justify-content: center;
+  }
+
 }
 
 
@@ -92,7 +96,7 @@
   margin-left: -0.5rem;
   margin-right: -0.5rem;
 
-  > * {
+  >* {
     flex-grow: 1;
     margin: 0 0.5rem;
   }
@@ -101,3 +105,16 @@
 .small-bottom-margin {
   margin-bottom: 0.4rem !important;
 }
+
+.flexer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-right: -1rem;
+
+  > .sub-group {
+    flex-grow: 1;
+    margin-right: 1rem;
+  }
+}