From a61a655715000dc3e7a4b6e9a271283b5ae819ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emanuel=20Sch=C3=BCtze?= <emanuel@intevation.de>
Date: Thu, 25 Apr 2019 21:40:51 +0200
Subject: [PATCH] More slide style improvements

---
 .../assignment-slide.component.html           | 18 ++++++++--------
 .../poll/poll-slide.component.html            | 18 +++++++++-------
 .../poll/poll-slide.component.scss            | 21 ++++++++++++++-----
 .../motion/motion-slide.component.scss        |  2 +-
 client/src/assets/styles/projector.scss       |  9 ++++++--
 5 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/client/src/app/slides/assignments/assignment/assignment-slide.component.html b/client/src/app/slides/assignments/assignment/assignment-slide.component.html
index 5c66fea3f..512458a7a 100644
--- a/client/src/app/slides/assignments/assignment/assignment-slide.component.html
+++ b/client/src/app/slides/assignments/assignment/assignment-slide.component.html
@@ -1,16 +1,16 @@
 <div *ngIf="data">
-    <div>
-        <h1> {{ data.data.title }} </h1>
+    <div class="slidetitle">
+        <h1>{{ data.data.title }}</h1>
+        <h2 translate>Election</h2>
     </div>
-    <mat-divider></mat-divider>
+
     <div *ngIf="data.data && data.data.description" [innerHTML]="data.data.description"></div>
 
-    <mat-divider></mat-divider>
     <h3 translate>Candidates</h3>
-    <div *ngIf="data.data.assignment_related_users && data.data.assignment_related_users.length">
-        <div *ngFor="let candidate of data.data.assignment_related_users">
+    <ul *ngIf="data.data.assignment_related_users && data.data.assignment_related_users.length">
+        <li *ngFor="let candidate of data.data.assignment_related_users">
             {{ candidate.user }}
-            <mat-icon>{{ candidate.elected ? 'star' : 'star_border' }}</mat-icon>
-        </div>
-    </div>
+            <mat-icon *ngIf="candidate.elected">star</mat-icon>
+        </li>
+    </ul>
 </div>
diff --git a/client/src/app/slides/assignments/poll/poll-slide.component.html b/client/src/app/slides/assignments/poll/poll-slide.component.html
index 1d54257d7..420703db6 100644
--- a/client/src/app/slides/assignments/poll/poll-slide.component.html
+++ b/client/src/app/slides/assignments/poll/poll-slide.component.html
@@ -1,26 +1,30 @@
 <div *ngIf="data">
-    <h1>{{ data.data.title }}</h1>
+    <div class="slidetitle">
+        <h1>{{ data.data.title }}</h1>
+        <h2 translate>Election result</h2>
+    </div>
+
     <div class="spacer-top-10"></div>
     <div *ngIf="!data.data.poll.published"><span translate>Waiting for results</span><span>...</span></div>
     <div *ngIf="data.data.poll.published">
-        <div *ngIf="data.data.poll.has_votes">
+        <div *ngIf="data.data.poll.has_votes" class="result-table">
             <div class="row">
-                <div class="option-name">
+                <div class="option-name heading">
                     <h3 translate>Candidates</h3>
                 </div>
-                <div class="option-percents">
+                <div class="option-percents heading">
                     <h3 translate>Votes</h3>
                 </div>
             </div>
             <div *ngFor="let option of data.data.poll.options">
                 <div class="row">
                     <div class="option-name">
+                        <span class="bold">{{ option.user }}</span>
                         <mat-icon *ngIf="option.is_elected">star</mat-icon>
-                        <span [ngClass]="option.is_elected ? 'bold': ''">{{ option.user }}</span>
                     </div>
                     <div class="option-percents">
-                        <div *ngFor="let vote of option.votes">
-                            <span *ngIf="vote.value !== 'Votes'"> {{ vote.value | translate }}: </span>
+                        <div *ngFor="let vote of option.votes" class="bold">
+                            <span *ngIf="vote.value !== 'Votes'">{{ vote.value | translate }}:</span>
                             <span>
                                 {{ labelValue(vote.weight) | translate }}
                             </span>
diff --git a/client/src/app/slides/assignments/poll/poll-slide.component.scss b/client/src/app/slides/assignments/poll/poll-slide.component.scss
index 04eb64c42..c22687f65 100644
--- a/client/src/app/slides/assignments/poll/poll-slide.component.scss
+++ b/client/src/app/slides/assignments/poll/poll-slide.component.scss
@@ -1,20 +1,31 @@
 .row {
+    border-top: 1px solid #ddd;
     display: table;
     width: 100%;
+
+    .heading {
+        text-transform: uppercase;
+
+        h3 {
+            font-weight: normal;
+        }
+    }
+
     .option-name {
         display: table-cell;
         padding: 5px;
-        border: 1px solid grey;
         vertical-align: middle;
         width: 70%;
-        .bold {
-            font-weight: bold;
-        }
     }
+
     .option-percents {
         display: table-cell;
         padding: 5px;
-        border: 1px solid grey;
         width: 30%;
     }
+
+    .grey {
+        background-color: #ddd !important;
+        color: rgba(0, 0, 0, 0.87) !important;
+    }
 }
diff --git a/client/src/app/slides/motions/motion/motion-slide.component.scss b/client/src/app/slides/motions/motion/motion-slide.component.scss
index 04cc02393..f286ff081 100644
--- a/client/src/app/slides/motions/motion/motion-slide.component.scss
+++ b/client/src/app/slides/motions/motion/motion-slide.component.scss
@@ -7,7 +7,7 @@
 #sidebox {
     width: 260px;
     right: 0;
-    margin-top: 95px;
+    margin-top: 94px;
     background: #d3d3d3;
     border-radius: 7px 0 0 7px;
     padding: 3px 7px 10px 10px;
diff --git a/client/src/assets/styles/projector.scss b/client/src/assets/styles/projector.scss
index eb0ac392f..b93c98187 100644
--- a/client/src/assets/styles/projector.scss
+++ b/client/src/assets/styles/projector.scss
@@ -22,18 +22,19 @@
     }
 
     .slidetitle {
-        border-bottom: 5px solid #d3d3d3;
+        border-bottom: 4px solid #d3d3d3;
         margin-bottom: 40px;
 
         h1 {
             margin-bottom: 0;
             padding-bottom: 0;
+            margin-top: 20px;
         }
 
         h2 {
             color: #9a9898;
             margin-top: 10px;
-            margin-bottom: 5px;
+            margin-bottom: 2px;
             font-size: 28px;
             font-weight: normal;
             display: block;
@@ -48,4 +49,8 @@
     hr {
         margin: 10px 0;
     }
+
+    .bold {
+        font-weight: 500;
+    }
 }