UX: More compact polls on mobile

plugins/poll/assets/stylesheets/common/poll.scss

@@ -1,5 +1,5 @@
 div.poll {
-  margin: 10px 0;
+  margin: 1em 0;
   border: 1px solid $primary-low;
 
   @include unselectable;
@@ -15,8 +15,10 @@ div.poll {
 
   li {
     cursor: pointer;
-    font-size: 15px;
-    margin-bottom: 10px;
+    font-size: $font-up-1;
+    &:not(:last-of-type) {
+      margin-bottom: 0.5em;
+    }
   }
 
   li[data-poll-option-id] {
@@ -27,19 +29,17 @@ div.poll {
   img {
     max-width: 100% !important; /* needed to override internal styles */
     height: auto;
+    margin-top: 0.25em;
   }
 
   .poll-info {
     color: $primary-medium;
-    text-align: center;
     vertical-align: middle;
-
-    .info-number {
-      font-size: 3.5em;
-    }
+    padding: 1em 0;
 
     .info-label {
       font-size: 1.7em;
+      line-height: $line-height-medium;
     }
 
     .info-text {
@@ -50,7 +50,7 @@ div.poll {
 
   .poll-container {
     vertical-align: middle;
-    padding: 10px;
+    padding: 0.8em;
 
     .poll-results-number-rating {
       font-size: 2em;
@@ -68,11 +68,10 @@ div.poll {
   }
 
   .poll-voters-list {
+    margin-top: 0.25em;
     li {
       display: inline;
     }
-
-    margin-top: 4px;
   }
 
   .poll-voters-toggle-expand {
@@ -81,18 +80,21 @@ div.poll {
   }
 
   .results {
+    li {
+      padding: 0.5em 0.7em 0.7em 0.5em;
+    }
     .option {
-      padding-bottom: 5px;
+      padding-bottom: 0.25em;
       p {
         margin: 0;
       }
     }
 
     .percentage {
-      font-size: 20px;
+      font-size: $font-up-1;
       float: right;
       color: $primary-medium;
-      margin-left: 5px;
+      margin-left: 0.25em;
     }
 
     .bar-back {
@@ -100,7 +102,7 @@ div.poll {
     }
 
     .bar {
-      height: 10px;
+      height: 0.75em;
       background: $primary-medium;
     }
 
@@ -112,8 +114,8 @@ div.poll {
   &[data-poll-type="number"] {
     li[data-poll-option-id] {
       display: inline-block;
-      width: 45px;
-      margin-right: 5px;
+      width: 3.25em;
+      margin-right: 0.25em;
     }
   }
 }

plugins/poll/assets/stylesheets/desktop/poll.scss

@@ -1,6 +1,5 @@
 div.poll {
   display: table;
-  min-width: 500px;
   width: 100%;
   box-sizing: border-box;
 
@@ -8,10 +7,15 @@ div.poll {
     min-width: 150px;
     width: 100%;
     display: table-cell;
+    text-align: center;
     border-left: 1px solid $primary-low;
 
+    .info-number {
+      font-size: 3.5em;
+    }
+
     p {
-      margin: 40px 20px;
+      margin: 1.5em;
     }
 
     .info-label {
@@ -21,13 +25,12 @@ div.poll {
 
   .poll-container {
     display: table-cell;
-    min-width: 330px;
     width: 100%;
   }
 
   .poll-buttons {
     border-top: 1px solid $primary-low;
-    padding: 10px;
+    padding: 1em 1.25em;
 
     .toggle-status {
       float: right;
@@ -38,7 +41,7 @@ div.poll {
 .d-editor-preview {
   .poll-buttons {
     a:not(:first-child) {
-      margin-left: 5px;
+      margin-left: 0.25em;
     }
   }
 
@@ -46,9 +49,9 @@ div.poll {
     li[data-poll-option-id]:before {
       font-family: FontAwesome;
       content: "\f10c";
-      margin-right: 3px;
+      margin-right: 0.25em;
       position: relative;
-      top: 1px;
+      vertical-align: baseline;
     }
 
     &[data-poll-type="multiple"] {

plugins/poll/assets/stylesheets/mobile/poll.scss

@@ -1,13 +1,28 @@
 div.poll {
   .poll-buttons {
-    padding: 0 5px 5px 5px;
+    padding: 0.5em 1.25em 1em 1.25em;
 
     button {
-      margin: 4px 2px;
+      margin: 0.25em;
     }
   }
 
   .poll-info {
+    padding: 0.5em 1.25em 0 1.25em;
+    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;
+    }
+    p {
+      margin: 0;
+      width: 100%;
+    }
     .info-label:before {
       content: "\00a0"; //nbsp
     }