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

further improvements for search ui

Browse Source
This commit is contained in:
Timo Volkmann 2020-06-25 21:34:01 +02:00
parent f2c7aec2d3
commit 8161f62ce0
2 changed files with 33 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,6 +25,7 @@
<!-- Multi presets --> <!-- Multi presets -->
<mat-step> <mat-step>
<ng-template matStepLabel>Which climate do you prefer?</ng-template> <ng-template matStepLabel>Which climate do you prefer?</ng-template>
<div class="flexer">
<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">
@ -36,6 +37,7 @@
>{{preset.tag_label|translate}}</mat-radio-button> >{{preset.tag_label|translate}}</mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div> </div>
</div>
</mat-step> </mat-step>
<!-- Single presets --> <!-- Single presets -->
<mat-step> <mat-step>
@ -81,7 +83,7 @@
<mat-icon>clear</mat-icon> <mat-icon>clear</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<div class="horizontal space"> <div class="horizontal space center-desc">
<mat-slide-toggle [(ngModel)]="fullText"></mat-slide-toggle> <mat-slide-toggle [(ngModel)]="fullText"></mat-slide-toggle>
<span>Search in description </span> <span>Search in description </span>
</div> </div>

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

@ -2,7 +2,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> .search-btn { >.search-btn {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@ -66,7 +66,7 @@
align-items: center; align-items: center;
&.space { &.space {
> * { >* {
margin: 0.5rem; margin: 0.5rem;
} }
} }
@ -75,6 +75,10 @@
justify-content: space-around; justify-content: space-around;
} }
&.center-desc {
justify-content: center;
}
} }
@ -92,7 +96,7 @@
margin-left: -0.5rem; margin-left: -0.5rem;
margin-right: -0.5rem; margin-right: -0.5rem;
> * { >* {
flex-grow: 1; flex-grow: 1;
margin: 0 0.5rem; margin: 0 0.5rem;
} }
@ -101,3 +105,16 @@
.small-bottom-margin { .small-bottom-margin {
margin-bottom: 0.4rem !important; 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;
}
}