FIX: poll design on mobile

plugins/poll/assets/javascripts/discourse/templates/poll.hbs

@@ -1,4 +1,19 @@
 <div>
+  <div class="poll-container">
+    {{#if showingResults}}
+      {{#if isNumber}}
+        {{poll-results-number poll=poll}}
+      {{else}}
+        {{poll-results-standard poll=poll}}
+      {{/if}}
+    {{else}}
+      <ul>
+        {{#each option in poll.options}}
+          {{poll-option option=option color=poll.color background=poll.background toggle="toggleOption"}}
+        {{/each}}
+      </ul>
+    {{/if}}
+  </div>
   <div class="poll-info">
     <p>
       <span class="info-number">{{poll.voters}}</span>
@@ -15,21 +30,6 @@
       {{/if}}
     {{/if}}
   </div>
-  <div class="poll-container">
-    {{#if showingResults}}
-      {{#if isNumber}}
-        {{poll-results-number poll=poll}}
-      {{else}}
-        {{poll-results-standard poll=poll}}
-      {{/if}}
-    {{else}}
-      <ul>
-        {{#each option in poll.options}}
-          {{poll-option option=option color=poll.color background=poll.background toggle="toggleOption"}}
-        {{/each}}
-      </ul>
-    {{/if}}
-  </div>
 </div>
 
 <div class="poll-buttons">

plugins/poll/assets/javascripts/poll_dialect.js

@@ -107,7 +107,11 @@
       var result = ["div", attributes],
           poll = ["div"];
 
-      // 1 - POLL INFO
+      // 1 - POLL CONTAINER
+      var container = ["div", { "class": "poll-container" }].concat(contents);
+      poll.push(container);
+
+      // 2 - POLL INFO
       var info = ["div", { "class": "poll-info" }];
 
       // # of voters
@@ -148,10 +152,6 @@
 
       poll.push(info);
 
-      // 2 - POLL CONTAINER
-      var container = ["div", { "class": "poll-container" }].concat(contents);
-      poll.push(container);
-
       // 3 - BUTTONS
       var buttons = ["div", { "class": "poll-buttons" }];
 

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

@@ -7,10 +7,6 @@ $option-shadow: dark-light-diff($option-background, $primary, 10%, -10%);
 
 div.poll {
 
-  display: table;
-  border: 1px solid $border-color;
-  width: 500px;
-
   ul, ol {
     margin: 0;
     padding: 0;
@@ -65,31 +61,21 @@ div.poll {
 
   .poll-info {
     color: $text-color;
-    width: 150px;
-    display: table-cell;
     text-align: center;
     vertical-align: middle;
-    border-right: 1px solid $border-color;
-
-    p {
-      margin: 40px 20px;
-    }
 
     .info-number {
       font-size: 3.5em;
     }
 
     .info-text {
-      display: block;
       font-size: 1.7em;
     }
   }
 
   .poll-container {
-    display: table-cell;
     vertical-align: middle;
     padding: 10px;
-    width: 330px;
 
     span {
       font-size: 2em;
@@ -97,16 +83,11 @@ div.poll {
   }
 
   .poll-buttons {
-    border-top: 1px solid $border-color;
     padding: 10px;
 
     button {
       float: none;
     }
-
-    .toggle-status {
-      float: right;
-    }
   }
 
   .results {

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

@@ -0,0 +1,34 @@
+div.poll {
+  display: table;
+  border: 1px solid $border-color;
+  width: 500px;
+  max-width: 500px;
+
+  .poll-info {
+    width: 150px;
+    display: table-cell;
+    border-left: 1px solid $border-color;
+
+    p {
+      margin: 40px 20px;
+    }
+
+    .info-text {
+      display: block;
+    }
+  }
+
+  .poll-container {
+    display: table-cell;
+    width: 330px;
+    max-width: 330px;
+  }
+
+  .poll-buttons {
+    border-top: 1px solid $border-color;
+
+    .toggle-status {
+      float: right;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+div.poll {
+  .poll-buttons {
+    button {
+      margin: 3px 0;
+    }
+  }
+}

plugins/poll/plugin.rb

@@ -4,7 +4,10 @@
 # authors: Vikhyat Korrapati (vikhyat), Régis Hanol (zogstrip)
 # url: https://github.com/discourse/discourse/tree/master/plugins/poll
 
-register_asset "stylesheets/poll.scss"
+register_asset "stylesheets/common/poll.scss"
+register_asset "stylesheets/desktop/poll.scss", :desktop
+register_asset "stylesheets/mobile/poll.scss", :mobile
+
 register_asset "javascripts/poll_dialect.js", :server_side
 
 PLUGIN_NAME ||= "discourse_poll".freeze