From a342d2f1508af0bf11f70f780d672dc8e9a09aa0 Mon Sep 17 00:00:00 2001
From: Joe <33972521+hnb-ku@users.noreply.github.com>
Date: Tue, 5 Feb 2019 17:47:22 +0800
Subject: [PATCH] UX: reduces white-space in polls (#6956)

* reduces white-space in polls and uses font-size variables
---
 .../poll/assets/stylesheets/common/poll.scss  | 30 +++++++++----------
 .../poll/assets/stylesheets/desktop/poll.scss |  4 +--
 .../poll/assets/stylesheets/mobile/poll.scss  | 11 ++++---
 3 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/plugins/poll/assets/stylesheets/common/poll.scss b/plugins/poll/assets/stylesheets/common/poll.scss
index 8510fe6c56b..63f671d9eeb 100644
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/plugins/poll/assets/stylesheets/common/poll.scss
@@ -16,20 +16,17 @@ div.poll {
   li {
     cursor: pointer;
     font-size: $font-up-1;
-    &:not(:last-of-type) {
-      margin-bottom: 0.5em;
-    }
   }
 
   li[data-poll-option-id] {
     color: $primary;
-    padding: 0.5em 0.7em 0.7em 0.5em;
+    padding: 0.5em 0;
   }
 
   img {
-    max-width: 100% !important; /* needed to override internal styles */
+    // needed to override internal styles in image-sizing hack
+    max-width: 100% !important;
     height: auto;
-    margin-top: 0.25em;
   }
 
   .poll-info {
@@ -38,34 +35,34 @@ div.poll {
     padding: 1em 0;
 
     .info-label {
-      font-size: 1.7em;
+      font-size: $font-up-4;
       line-height: $line-height-medium;
     }
 
     .info-text {
-      margin: 5px 0;
+      margin: 0.25em 0;
       display: block;
     }
   }
 
   .poll-container {
     vertical-align: middle;
-    padding: 0.8em;
+    padding: 0.5em 1em;
 
     .poll-results-number-rating {
-      font-size: 2em;
+      font-size: $font-up-5;
     }
   }
 
   .poll-buttons {
     .info-text {
-      margin: 0 5px;
+      margin: 0.25em 0;
       color: $primary-medium;
     }
   }
 
-  .poll-voters-list {
-    margin-top: 0.25em;
+  .poll-voters:not(:empty) {
+    margin-bottom: 0.25em;
     li {
       display: inline;
     }
@@ -79,17 +76,18 @@ div.poll {
   .results {
     > li {
       cursor: default;
-      padding: 0.5em 0.7em 0.7em 0.5em;
+      padding: 0.25em 0;
+      &:last-child {
+        padding-bottom: 0;
+      }
     }
     .option {
-      padding-bottom: 0.25em;
       p {
         margin: 0;
       }
     }
 
     .percentage {
-      font-size: $font-up-1;
       float: right;
       color: $primary-medium;
       margin-left: 0.25em;
diff --git a/plugins/poll/assets/stylesheets/desktop/poll.scss b/plugins/poll/assets/stylesheets/desktop/poll.scss
index 0c1b15273cb..6926e4a7025 100644
--- a/plugins/poll/assets/stylesheets/desktop/poll.scss
+++ b/plugins/poll/assets/stylesheets/desktop/poll.scss
@@ -15,7 +15,7 @@ div.poll {
     }
 
     p {
-      margin: 1.5em;
+      margin: 0.5em 0;
     }
 
     .info-label {
@@ -30,7 +30,7 @@ div.poll {
 
   .poll-buttons {
     border-top: 1px solid $primary-low;
-    padding: 1em 1.25em;
+    padding: 1em;
 
     .info-text {
       line-height: 2em;
diff --git a/plugins/poll/assets/stylesheets/mobile/poll.scss b/plugins/poll/assets/stylesheets/mobile/poll.scss
index a7efc3f4837..fd0178e0208 100644
--- a/plugins/poll/assets/stylesheets/mobile/poll.scss
+++ b/plugins/poll/assets/stylesheets/mobile/poll.scss
@@ -1,20 +1,19 @@
 div.poll {
   .poll-buttons {
-    padding: 0.5em 1.25em 1em 1.25em;
+    padding: 0.5em 1em 1em 1em;
 
     button {
-      margin: 0.25em;
+      margin-right: 0.5em;
     }
   }
 
   .poll-info {
-    padding: 0.5em 1.25em 0 1.25em;
+    padding: 0 1em;
     display: flex;
     flex-wrap: wrap;
     border-top: 1px solid $primary-low;
     .info-text {
       display: inline;
-      margin: 0 0.5em 0.25em 0;
     }
     .info-number {
       font-size: $font-up-6;
@@ -23,8 +22,8 @@ div.poll {
       margin: 0;
       width: 100%;
     }
-    .info-label:before {
-      content: "\00a0"; //nbsp
+    .info-label {
+      margin-left: 0.25em;
     }
   }
 }