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 -->
<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,9 +83,9 @@
<mat-icon>clear</mat-icon>
</button>
</mat-form-field>
<div class="horizontal space center">
<span>Search in description </span>
<div class="horizontal space center-desc">
<mat-slide-toggle [(ngModel)]="fullText"></mat-slide-toggle>
<span>Search in description </span>
</div>
</div>
</section>

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

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