From 23298a03b3a4882600a666be3588e1ed6b39e435 Mon Sep 17 00:00:00 2001
From: Maximilian Krambach <maximilian.krambach@intevation.de>
Date: Mon, 21 Jan 2019 19:04:43 +0100
Subject: [PATCH] Shortening motion titles

---
 .../motion-list/motion-list.component.html    | 38 ++++++++++---------
 .../motion-list/motion-list.component.scss    | 26 +++++++++++--
 2 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/client/src/app/site/motions/components/motion-list/motion-list.component.html b/client/src/app/site/motions/components/motion-list/motion-list.component.html
index c3ba9a145..047c98f6a 100644
--- a/client/src/app/site/motions/components/motion-list/motion-list.component.html
+++ b/client/src/app/site/motions/components/motion-list/motion-list.component.html
@@ -50,24 +50,28 @@
         <ng-container matColumnDef="title">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
             <mat-cell *matCellDef="let motion">
-                <div class="innerTable">
-                    <span class="motion-list-title">{{ motion.title }}
-                        <span>
-                            <mat-icon inline>{{ motion.star ? 'star' : 'star_border' }}</mat-icon>
+                <div class="innerTable max-width">
+                    <!-- title line -->
+                    <div class="motion-list">
+                        <!-- attachment icon -->
+                        <span class="attached-files" *ngIf="motion.hasAttachments()">
+                            <mat-icon>attach_file</mat-icon>
                         </span>
-                    </span>
-
-                    <!-- attachments -->
-                    <span class="attached-files" *ngIf="motion.hasAttachments()">
-                        <!-- <mat-basic-chip class="bluegrey"> <mat-icon>attach_file</mat-icon> </mat-basic-chip> -->
-                        <mat-icon>attach_file</mat-icon>
-                    </span>
-
-                    <br />
-                    <span class="motion-list-from" *ngIf="motion.submitters.length">
-                        <span translate>by</span> {{ motion.submitters }}
-                    </span>
-                    <br *ngIf="motion.submitters.length" />
+                        <!-- title -->
+                        <span class="motion-list-title" matTooltip="{{ motion.title }}">
+                            {{ motion.title }}
+                        </span>
+                        <!-- favorite icon -->
+                        <span *ngIf="motion.star" class="favorite-star">
+                            <mat-icon inline>star</mat-icon>
+                        </span>
+                    </div>
+                    <!-- submitters line -->
+                    <div class="motion-list">
+                        <span class="motion-list-from" *ngIf="motion.submitters.length">
+                            <span translate>by</span> {{ motion.submitters }}
+                        </span>
+                    </div>
                     <!-- state -->
                     <mat-basic-chip
                         *ngIf="motion.state"
diff --git a/client/src/app/site/motions/components/motion-list/motion-list.component.scss b/client/src/app/site/motions/components/motion-list/motion-list.component.scss
index 7af8d4732..1579288dd 100644
--- a/client/src/app/site/motions/components/motion-list/motion-list.component.scss
+++ b/client/src/app/site/motions/components/motion-list/motion-list.component.scss
@@ -19,11 +19,27 @@
     .mat-column-title {
         width: 100%;
         flex: 1 0 200px;
+        display: block;
         padding-left: 10px;
 
-        .motion-list-title {
-            font-weight: 500;
-            font-size: 16px;
+        .motion-list {
+            display: flex;
+            padding-right: 20px;
+
+            .motion-list-title,
+            .motion-list-from {
+                flex: 2;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            .motion-list-title {
+                font-weight: 500;
+                font-size: 16px;
+            }
+            .favorite-star {
+                width: 26px;
+            }
         }
 
         .motion-list-from {
@@ -58,3 +74,7 @@
         justify-content: flex-end !important;
     }
 }
+
+.max-width {
+    width: 100%;
+}