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>
<!-- Multi presets -->
<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">
<span class="label">{{key|translate}}:</span><br>
<mat-radio-group [ngModel]="multiPresetSelection[key]" [value]="undefined">
@ -47,7 +47,7 @@
</mat-step>
<!-- Tag selection -->
<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>
</mat-step>
@ -89,8 +89,10 @@
</section>
<!-- Climate Params -->
<section class="group">
<span class="title small-bottom-margin">Climate</span>
<span class="desc">Choose your sweetspot</span>
<div class="horizontal">
<span class="title">Climate</span>
<span class="desc">| sweetspot selection</span>
</div>
<app-toggle-slider [(model)]="temperatureMeanMax" [label]="'Temperature'" [max]="45"
[min]="0"></app-toggle-slider>
<app-toggle-slider [(model)]="precipitation" [label]="'Precipitation'" [max]="500"
@ -98,8 +100,10 @@
</section>
<!-- Financial -->
<section class="group">
<span class="title small-bottom-margin">Fincancial</span>
<span class="desc">Choose your sweetspot</span>
<div class="horizontal">
<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>
</section>
</mat-tab>

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

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