From 311b8abbead057a640cf3403aef19020e70dd96b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emanuel=20Sch=C3=BCtze?= <emanuel@intevation.de>
Date: Fri, 25 Jan 2019 11:37:12 +0100
Subject: [PATCH] UI improvements

Max width for config view and content card in motion detail view.
Improved motion edit view in mobile mode.
---
 .../config-list/config-list.component.html          | 13 +++++--------
 .../config-list/config-list.component.scss          |  9 +++++++--
 .../motion-detail/motion-detail.component.html      |  6 +++---
 .../motion-detail/motion-detail.component.scss      |  3 ++-
 client/src/styles.scss                              |  9 +++++++++
 5 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/client/src/app/site/config/components/config-list/config-list.component.html b/client/src/app/site/config/components/config-list/config-list.component.html
index 6f9745ff1..cead7cbe7 100644
--- a/client/src/app/site/config/components/config-list/config-list.component.html
+++ b/client/src/app/site/config/components/config-list/config-list.component.html
@@ -5,6 +5,7 @@
     </div>
 </os-head-bar>
 
+<div class="spacer-top-20"></div>
 <mat-accordion>
     <ng-container *ngFor="let group of this.configs">
         <mat-expansion-panel displayMode="flat">
@@ -14,14 +15,10 @@
                 </mat-panel-title>
             </mat-expansion-panel-header>
             <div *ngFor="let subgroup of group.subgroups">
-                <mat-card>
-                    <mat-card-title>{{ subgroup.name | translate }}</mat-card-title>
-                    <mat-card-content>
-                        <div *ngFor="let item of subgroup.items">
-                            <os-config-field [item]="item.config"></os-config-field>
-                        </div>
-                    </mat-card-content>
-                </mat-card>
+                <h3 class="accent">{{ subgroup.name | translate }}</h3>
+                <div *ngFor="let item of subgroup.items">
+                    <os-config-field [item]="item.config"></os-config-field>
+                </div>
             </div>
             <div *ngFor="let item of group.items">
                 <os-config-field [item]="item.config"></os-config-field>
diff --git a/client/src/app/site/config/components/config-list/config-list.component.scss b/client/src/app/site/config/components/config-list/config-list.component.scss
index 6571d4d16..adf71ecc7 100644
--- a/client/src/app/site/config/components/config-list/config-list.component.scss
+++ b/client/src/app/site/config/components/config-list/config-list.component.scss
@@ -1,3 +1,8 @@
-mat-card {
-    margin-bottom: 10px;
+mat-expansion-panel {
+    max-width: 770px;
+    margin: auto;
+}
+h3.accent {
+    margin-top: 30px;
+    margin-bottom: 20px;
 }
diff --git a/client/src/app/site/motions/components/motion-detail/motion-detail.component.html b/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
index b0ea0274c..20c21f1b2 100644
--- a/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
@@ -125,12 +125,12 @@
     <!-- Meta info -->
     <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 -->
-    <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 -->
     <os-motion-comments *ngIf="!editMotion" [motion]="motion"></os-motion-comments>
diff --git a/client/src/app/site/motions/components/motion-detail/motion-detail.component.scss b/client/src/app/site/motions/components/motion-detail/motion-detail.component.scss
index adcf174f3..5957dd1be 100644
--- a/client/src/app/site/motions/components/motion-detail/motion-detail.component.scss
+++ b/client/src/app/site/motions/components/motion-detail/motion-detail.component.scss
@@ -120,7 +120,8 @@ span {
             margin: 0px 40px 10px 10px;
         }
         .os-card {
-            width: 900px;
+            max-width: 900px;
+            min-width: 400px;
             margin-left: 0 !important;
             margin-top: 0 !important;
         }
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 937d4243c..5105ff3b2 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -57,6 +57,9 @@ h3 {
     font-weight: 500;
     margin-bottom: 0;
 }
+h3.accent {
+    color: $os-accent;
+}
 h4 {
     font-weight: 400;
     font-size: 12px;
@@ -156,6 +159,12 @@ mat-card {
     }
 }
 
+.os-form-card-mobile {
+    .mat-form-field, .mat-select {
+        width: 100%;
+    }
+}
+
 // Shared table definitions
 %os-table {
     width: 100%;