tvolkmann/travopti
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve advanced search visuals

Browse Source
This commit is contained in:
Patrick Gebhardt 2020-06-25 15:34:13 +02:00
parent 8c95857207
commit f6dd580894
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/components/search-input/search-input.component.html
View File

@ -24,7 +24,7 @@
</mat-step> </mat-step>
<!-- Multi presets --> <!-- Multi presets -->
<mat-step> <mat-step>
<ng-template matStepLabel>Which climate makes you feel comfortable?</ng-template> <ng-template matStepLabel>Which climate do you prefer?</ng-template>
<div *ngFor="let key of multiPresetsKeys" class="sub-group"> <div *ngFor="let key of multiPresetsKeys" class="sub-group">
<span class="label">{{key|translate}}:</span><br> <span class="label">{{key|translate}}:</span><br>
<mat-radio-group [ngModel]="multiPresetSelection[key]" [value]="undefined"> <mat-radio-group [ngModel]="multiPresetSelection[key]" [value]="undefined">
@ -47,7 +47,7 @@
</mat-step> </mat-step>
<!-- Tag selection --> <!-- Tag selection -->
<mat-step> <mat-step>
<ng-template matStepLabel>What needs to be fulfilled?</ng-template> <ng-template matStepLabel>What are you interested in?</ng-template>
<app-multi-tag-select [(model)]="selectedTags" [availableTags]="tags"></app-multi-tag-select> <app-multi-tag-select [(model)]="selectedTags" [availableTags]="tags"></app-multi-tag-select>
</mat-step> </mat-step>
@ -89,8 +89,10 @@
</section> </section>
<!-- Climate Params --> <!-- Climate Params -->
<section class="group"> <section class="group">
<span class="title small-bottom-margin">Climate</span> <div class="horizontal">
<span class="desc">Choose your sweetspot</span> <span class="title">Climate</span>
<span class="desc">| sweetspot selection</span>
</div>
<app-toggle-slider [(model)]="temperatureMeanMax" [label]="'Temperature'" [max]="45" <app-toggle-slider [(model)]="temperatureMeanMax" [label]="'Temperature'" [max]="45"
[min]="0"></app-toggle-slider> [min]="0"></app-toggle-slider>
<app-toggle-slider [(model)]="precipitation" [label]="'Precipitation'" [max]="500" <app-toggle-slider [(model)]="precipitation" [label]="'Precipitation'" [max]="500"
@ -98,8 +100,10 @@
</section> </section>
<!-- Financial --> <!-- Financial -->
<section class="group"> <section class="group">
<span class="title small-bottom-margin">Fincancial</span> <div class="horizontal">
<span class="desc">Choose your sweetspot</span> <span class="title">Financial</span>
<span class="desc">| sweetspot selection</span>
</div>
<app-toggle-slider [(model)]="accommodation" [label]="'Accommodation'" [max]="60" [min]="0"></app-toggle-slider> <app-toggle-slider [(model)]="accommodation" [label]="'Accommodation'" [max]="60" [min]="0"></app-toggle-slider>
</section> </section>
</mat-tab> </mat-tab>

15
frontend/src/app/components/search-input/search-input.component.scss
View File

@ -32,10 +32,17 @@
flex-direction: column; flex-direction: column;
margin: 1rem 0; margin: 1rem 0;
> .title { .title {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: bold; font-weight: bold;
margin-bottom: 0.5rem; }
.desc {
font-size: smaller;
margin-left: 0.25rem;
text-align: center;
text-transform: uppercase;
color: gray;
} }
> .content { > .content {
@ -83,10 +90,6 @@
} }
} }
.desc {
font-size: smaller;
}
.small-bottom-margin { .small-bottom-margin {
margin-bottom: 0.4rem !important; margin-bottom: 0.4rem !important;
} }