From 7aaad26b68d7bfdf30b86d462754ef8955e01065 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emanuel=20Sch=C3=BCtze?= <emanuel@intevation.de>
Date: Mon, 7 Oct 2019 15:10:59 +0200
Subject: [PATCH] Improved mobile views (Agenda list, motion block list/detail)

---
 .../icon-container.component.scss             |  1 +
 .../list-view-table.component.ts              |  2 +-
 .../sort-filter-bar.component.scss            |  4 +-
 .../category-list.component.html              |  3 +-
 .../motion-block-detail.component.html        | 53 +++++++++++++++----
 .../motion-block-detail.component.scss        |  1 +
 .../motion-block-detail.component.ts          | 16 ++++--
 .../motion-block-list.component.html          | 10 ++--
 .../motion-block-list.component.ts            |  3 +-
 .../motion-list/motion-list.component.scss    | 17 ------
 .../motions/styles/motion-list-styles.scss    | 15 ++++++
 client/src/styles.scss                        |  8 ++-
 12 files changed, 92 insertions(+), 41 deletions(-)

diff --git a/client/src/app/shared/components/icon-container/icon-container.component.scss b/client/src/app/shared/components/icon-container/icon-container.component.scss
index 98bdb2892..f41cb5c47 100644
--- a/client/src/app/shared/components/icon-container/icon-container.component.scss
+++ b/client/src/app/shared/components/icon-container/icon-container.component.scss
@@ -39,6 +39,7 @@ os-icon-container {
         margin: auto 5px;
         text-overflow: ellipsis;
         overflow: hidden;
+        width: 100%;
     }
 
     .break-lines {
diff --git a/client/src/app/shared/components/list-view-table/list-view-table.component.ts b/client/src/app/shared/components/list-view-table/list-view-table.component.ts
index 378eaf7f1..8a71f18dd 100644
--- a/client/src/app/shared/components/list-view-table/list-view-table.component.ts
+++ b/client/src/app/shared/components/list-view-table/list-view-table.component.ts
@@ -295,7 +295,7 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
             {
                 prop: 'speaker',
                 label: '',
-                width: this.columnMinWidth
+                width: '45px'
             },
             {
                 prop: 'menu',
diff --git a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss
index 819734060..9df0bf107 100644
--- a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss
+++ b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.scss
@@ -28,8 +28,8 @@ span.right-with-margin {
 
 .filter-count {
     font-style: italic;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-left: 24px;
+    margin-right: 5px;
 }
 
 .current-filters {
diff --git a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html
index 82864c6cd..31a947072 100644
--- a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html
+++ b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html
@@ -14,6 +14,7 @@
 
 <os-list-view-table
     [repo]="repo"
+    [vScrollFixed]="64"
     [allowProjector]="false"
     [showListOfSpeakers]="false"
     [columns]="tableColumnDefinition"
@@ -34,7 +35,7 @@
 
     <!-- Amount -->
     <div *pblNgridCellDef="'amount'; row as category" class="cell-slot fill">
-        <span class="os-amount-chip">{{ category.motions.length }}</span>
+        <span class="os-amount-chip" matTooltip="{{ 'Motions' | translate }}">{{ category.motions.length }}</span>
     </div>
 </os-list-view-table>
 
diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html
index 7f193ff28..906d13d70 100644
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html
@@ -39,17 +39,52 @@
     (dataSourceChange)="onDataSourceChange($event)"
 >
     <!-- Title column -->
-    <div *pblNgridCellDef="'title'; row as motion; rowContext as rowContext" class="cell-slot fill motion-block-title">
+    <div *pblNgridCellDef="'title'; row as motion; rowContext as rowContext" class="cell-slot fill">
         <a class="detail-link" [routerLink]="motion.getDetailStateURL()" *ngIf="!isMultiSelect"></a>
-        <span>{{ motion.getTitle() }}</span>
-    </div>
+        <div class="column-title innerTable">
+            <div class="title-line ellipsis-overflow">
+                <!-- Is Favorite -->
+                <span *ngIf="motion.star" class="favorite-star">
+                    <mat-icon inline>star</mat-icon>
+                </span>
 
-    <!-- State column -->
-    <div *pblNgridCellDef="'state'; row as motion" class="cell-slot fill">
-        <div class="chip-container">
-            <mat-basic-chip disableRipple [ngClass]="motion.stateCssColor">
-                {{ getStateLabel(motion) }}
-            </mat-basic-chip>
+                <!-- Has File -->
+                <span class="attached-files" *ngIf="motion.hasAttachments()">
+                    <mat-icon>attach_file</mat-icon>
+                </span>
+
+                <!-- The title -->
+                <span>
+                    <span *ngIf="motion.identifier">
+                        {{ motion.identifier }}
+                        <span>&middot;</span>
+                    </span>
+                    {{ motion.title }}
+                </span>
+            </div>
+
+            <!-- Submitters -->
+            <div class="submitters-line ellipsis-overflow">
+                <span *ngIf="motion.submitters.length">
+                    <span translate>by</span>
+                    {{ motion.submitters }}
+                </span>
+
+                <span *ngIf="showSequential">
+                    <span *ngIf="motion.submitters.length">
+                        &middot;
+                    </span>
+                    <span translate>Sequential number</span>
+                    {{ motion.id }}
+                </span>
+            </div>
+
+            <!-- Workflow state -->
+            <div class="ellipsis-overflow white">
+                <mat-basic-chip *ngIf="motion.state" [ngClass]="motion.stateCssColor" [disabled]="true">
+                    {{ getStateLabel(motion) }}
+                </mat-basic-chip>
+            </div>
         </div>
     </div>
 
diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.scss b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.scss
index 988f2348a..baf07b192 100644
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.scss
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.scss
@@ -1,4 +1,5 @@
 @import '~assets/styles/tables.scss';
+@import '~app/site/motions/styles/motion-list-styles.scss';
 
 .edit-form {
     overflow: hidden;
diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts
index f7fe97182..a581bb0d9 100644
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts
@@ -12,6 +12,7 @@ import { StorageService } from 'app/core/core-services/storage.service';
 import { ItemRepositoryService } from 'app/core/repositories/agenda/item-repository.service';
 import { MotionBlockRepositoryService } from 'app/core/repositories/motions/motion-block-repository.service';
 import { MotionRepositoryService } from 'app/core/repositories/motions/motion-repository.service';
+import { ConfigService } from 'app/core/ui-services/config.service';
 import { PromptService } from 'app/core/ui-services/prompt.service';
 import { ViewportService } from 'app/core/ui-services/viewport.service';
 import { ColumnRestriction } from 'app/shared/components/list-view-table/list-view-table.component';
@@ -55,11 +56,6 @@ export class MotionBlockDetailComponent extends BaseListViewComponent<ViewMotion
             prop: 'title',
             width: 'auto'
         },
-        {
-            prop: 'state',
-            width: '30%',
-            minWidth: 60
-        },
         {
             prop: 'recommendation',
             label: this.translate.instant('Recommendation'),
@@ -82,6 +78,11 @@ export class MotionBlockDetailComponent extends BaseListViewComponent<ViewMotion
         }
     ];
 
+    /**
+     * Value of the config variable `motions_show_sequential_numbers`
+     */
+    public showSequential: boolean;
+
     /**
      * The form to edit blocks
      */
@@ -111,6 +112,7 @@ export class MotionBlockDetailComponent extends BaseListViewComponent<ViewMotion
         titleService: Title,
         protected translate: TranslateService,
         matSnackBar: MatSnackBar,
+        private configService: ConfigService,
         private route: ActivatedRoute,
         private router: Router,
         protected repo: MotionBlockRepositoryService,
@@ -142,6 +144,10 @@ export class MotionBlockDetailComponent extends BaseListViewComponent<ViewMotion
                 }
             })
         );
+        // load config variables
+        this.configService
+            .get<boolean>('motions_show_sequential_numbers')
+            .subscribe(show => (this.showSequential = show));
     }
 
     /**
diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html
index 6b5a90f0c..82e1ae63f 100644
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html
@@ -6,6 +6,7 @@
 <os-list-view-table
     class="block-list"
     [repo]="repo"
+    [vScrollFixed]="64"
     [showFilterBar]="true"
     [columns]="tableColumnDefinition"
     [sortService]="sortService"
@@ -23,9 +24,12 @@
             [routerLink]="block.id"
             *ngIf="!isMultiSelect"
         ></a>
-        <div>
-            <mat-icon matTooltip="Internal" *ngIf="block.internal">lock</mat-icon>
-            {{ title }}
+        <div class="innerTable">
+            <os-icon-container [noWrap]="true" [icon]="block.internal ? 'lock' : null" size="large" [matTooltip]="Internal">
+                <div class="ellipsis-overflow">
+                    {{ title }}
+                </div>
+            </os-icon-container>
         </div>
     </div>
 
diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts
index 9902245a7..ef5c91c64 100644
--- a/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts
+++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts
@@ -71,7 +71,8 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
         },
         {
             prop: 'amount',
-            label: this.translate.instant('Motions')
+            label: this.translate.instant('Motions'),
+            width: '40px'
         }
     ];
 
diff --git a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.scss b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.scss
index 5db3e0533..ebc79eac4 100644
--- a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.scss
+++ b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.scss
@@ -26,23 +26,6 @@ $text-margin-top: 10px;
 
 .column-title {
     margin-top: $text-margin-top;
-
-    .title-line {
-        .attached-files {
-            .mat-icon {
-                display: inline-flex;
-                vertical-align: middle;
-                $icon-size: 16px;
-                font-size: $icon-size;
-                height: $icon-size;
-                width: $icon-size;
-            }
-        }
-
-        .favorite-star {
-            padding-right: 3px;
-        }
-    }
 }
 
 .column-state {
diff --git a/client/src/app/site/motions/styles/motion-list-styles.scss b/client/src/app/site/motions/styles/motion-list-styles.scss
index 9dd2681de..8acea58fc 100644
--- a/client/src/app/site/motions/styles/motion-list-styles.scss
+++ b/client/src/app/site/motions/styles/motion-list-styles.scss
@@ -1,6 +1,21 @@
 .title-line {
     font-weight: 500;
     font-size: 16px;
+
+    .attached-files {
+        .mat-icon {
+            display: inline-flex;
+            vertical-align: middle;
+            $icon-size: 16px;
+            font-size: $icon-size;
+            height: $icon-size;
+            width: $icon-size;
+        }
+    }
+
+    .favorite-star {
+        padding-right: 3px;
+    }
 }
 
 .submitters-line {
diff --git a/client/src/styles.scss b/client/src/styles.scss
index fc7186f72..3bc5a5f69 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -655,6 +655,10 @@ button.mat-menu-item.selected {
     }
 }
 
+.cdk-column-menu {
+    padding: 0 16px 0 0 !important;
+}
+
 /** media queries */
 @include desktop {
     .content-container {
@@ -824,8 +828,8 @@ button.mat-menu-item.selected {
 
 .ellipsis-overflow {
     @extend .one-line;
-    padding-right: 3px;
-    margin-right: 3px;
+    padding-right: 0px;
+    margin-right: 0px;
 }
 
 .nowrap {