UI improvements

Max width for config view and content card in motion detail view.
Improved motion edit view in mobile mode.
This commit is contained in:
Emanuel Schütze 2019-01-25 11:37:12 +01:00
parent 793066935e
commit 311b8abbea
5 changed files with 26 additions and 14 deletions

View File

@ -5,6 +5,7 @@
</div> </div>
</os-head-bar> </os-head-bar>
<div class="spacer-top-20"></div>
<mat-accordion> <mat-accordion>
<ng-container *ngFor="let group of this.configs"> <ng-container *ngFor="let group of this.configs">
<mat-expansion-panel displayMode="flat"> <mat-expansion-panel displayMode="flat">
@ -14,14 +15,10 @@
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div *ngFor="let subgroup of group.subgroups"> <div *ngFor="let subgroup of group.subgroups">
<mat-card> <h3 class="accent">{{ subgroup.name | translate }}</h3>
<mat-card-title>{{ subgroup.name | translate }}</mat-card-title>
<mat-card-content>
<div *ngFor="let item of subgroup.items"> <div *ngFor="let item of subgroup.items">
<os-config-field [item]="item.config"></os-config-field> <os-config-field [item]="item.config"></os-config-field>
</div> </div>
</mat-card-content>
</mat-card>
</div> </div>
<div *ngFor="let item of group.items"> <div *ngFor="let item of group.items">
<os-config-field [item]="item.config"></os-config-field> <os-config-field [item]="item.config"></os-config-field>

View File

@ -1,3 +1,8 @@
mat-card { mat-expansion-panel {
margin-bottom: 10px; max-width: 770px;
margin: auto;
}
h3.accent {
margin-top: 30px;
margin-bottom: 20px;
} }

View File

@ -125,12 +125,12 @@
<!-- Meta info --> <!-- Meta info -->
<div class="hspacing"><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div> <div class="hspacing"><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
<mat-divider class="spacer-top-10 spacer-bottom-20"></mat-divider> <mat-divider *ngIf="!editMotion" class="spacer-top-10 spacer-bottom-20"></mat-divider>
<!-- Content --> <!-- Content -->
<div class="hspacing"><ng-container *ngTemplateOutlet="contentTemplate"></ng-container></div> <div class="hspacing" [ngClass]="editMotion ? 'os-form-card-mobile' : 'os-card-mobile'"><ng-container *ngTemplateOutlet="contentTemplate"></ng-container></div>
<mat-divider class="spacer-top-10 spacer-bottom-20"></mat-divider> <mat-divider *ngIf="!editMotion" class="spacer-top-10 spacer-bottom-20"></mat-divider>
<!-- Comments --> <!-- Comments -->
<os-motion-comments *ngIf="!editMotion" [motion]="motion"></os-motion-comments> <os-motion-comments *ngIf="!editMotion" [motion]="motion"></os-motion-comments>

View File

@ -120,7 +120,8 @@ span {
margin: 0px 40px 10px 10px; margin: 0px 40px 10px 10px;
} }
.os-card { .os-card {
width: 900px; max-width: 900px;
min-width: 400px;
margin-left: 0 !important; margin-left: 0 !important;
margin-top: 0 !important; margin-top: 0 !important;
} }

View File

@ -57,6 +57,9 @@ h3 {
font-weight: 500; font-weight: 500;
margin-bottom: 0; margin-bottom: 0;
} }
h3.accent {
color: $os-accent;
}
h4 { h4 {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
@ -156,6 +159,12 @@ mat-card {
} }
} }
.os-form-card-mobile {
.mat-form-field, .mat-select {
width: 100%;
}
}
// Shared table definitions // Shared table definitions
%os-table { %os-table {
width: 100%; width: 100%;