ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UI improvements

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/app/site/config/components/config-list/config-list.component.html
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>

9
client/src/app/site/config/components/config-list/config-list.component.scss
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;
} }

6
client/src/app/site/motions/components/motion-detail/motion-detail.component.html
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>

3
client/src/app/site/motions/components/motion-detail/motion-detail.component.scss
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;
} }

9
client/src/styles.scss
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%;