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

Merge branch 'tv/ui-improvements' into 'develop'

Browse Source 
ui improvements

See merge request tjohn/cc-data!35
This commit is contained in:
Timo Volkmann 2020-06-25 22:48:30 +02:00
commit 91e84f5cf1
2 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,16 +25,18 @@
<!-- 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 *ngFor="let key of multiPresetsKeys" class="sub-group"> <div class="flexer">
<span class="label">{{key|translate}}:</span><br> <div *ngFor="let key of multiPresetsKeys" class="sub-group">
<mat-radio-group [ngModel]="multiPresetSelection[key]" [value]="undefined"> <span class="label">{{key|translate}}:</span><br>
<mat-radio-button <mat-radio-group [ngModel]="multiPresetSelection[key]" [value]="undefined">
#btn <mat-radio-button
(click)="btn.checked = onMultiPresetSelect(preset)" #btn
*ngFor="let preset of multiPresets.get(key)" (click)="btn.checked = onMultiPresetSelect(preset)"
[value]="preset.preset_id" *ngFor="let preset of multiPresets.get(key)"
>{{preset.tag_label|translate}}</mat-radio-button> [value]="preset.preset_id"
</mat-radio-group> >{{preset.tag_label|translate}}</mat-radio-button>
</mat-radio-group>
</div>
</div> </div>
</mat-step> </mat-step>
<!-- Single presets --> <!-- Single presets -->
@ -81,9 +83,9 @@
<mat-icon>clear</mat-icon> <mat-icon>clear</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<div class="horizontal space center"> <div class="horizontal space center-desc">
<span>Search in description </span>
<mat-slide-toggle [(ngModel)]="fullText"></mat-slide-toggle> <mat-slide-toggle [(ngModel)]="fullText"></mat-slide-toggle>
<span>Search in description </span>
</div> </div>
</div> </div>
</section> </section>

36
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;
} }
} }
@ -46,8 +46,9 @@
color: gray; color: gray;
} }
> .content { >.content {
margin: 0 2.5rem; // margin: 0 2.5rem;
margin-top: 0.5rem;
.text-input { .text-input {
min-width: 14rem; min-width: 14rem;
@ -65,7 +66,7 @@
align-items: center; align-items: center;
&.space { &.space {
> * { >* {
margin: 0.5rem; margin: 0.5rem;
} }
} }
@ -74,6 +75,10 @@
justify-content: space-around; justify-content: space-around;
} }
&.center-desc {
justify-content: center;
}
} }
@ -86,15 +91,30 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-between;
align-items: center; align-items: center;
margin-left: -0.5rem;
margin-right: -0.5rem;
> * { >* {
width: 45%; flex-grow: 1;
min-width: 15rem; margin: 0 0.5rem;
} }
} }
.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;
}
}