UX: Improve layout of poll builder modal

discourse · Aug 7, 2019 · 78500fb · 78500fb · discoursereviewbot · Aug 7, 2019
1 parent 24877a7
commit 78500fb
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs b/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs
@@ -19,13 +19,13 @@
 
     {{#if showMinMax}}
       <div class="input-group poll-number">
-        {{input-tip validation=minMaxValueValidation}}
         <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.min'}}</label>
         {{input type='number'
                 value=pollMin
                 valueAttribute="value"
                 class="poll-options-min"}}
       </div>
+      {{input-tip validation=minMaxValueValidation}}
 
 
       <div class="input-group poll-number">
@@ -44,17 +44,17 @@
                   valueAttribute="value"
                   min="1"
                   class="poll-options-step"}}
-          {{input-tip validation=minStepValueValidation}}
         </div>
+        {{input-tip validation=minStepValueValidation}}
       {{/if}}
     {{/if}}
 
     {{#unless isNumber}}
       <div class="input-group poll-textarea">
         <label>{{i18n 'poll.ui_builder.poll_options.label'}}</label>
         {{textarea value=pollOptions autocomplete="discourse"}}
-        {{input-tip validation=minNumOfOptionsValidation}}
       </div>
+      {{input-tip validation=minNumOfOptionsValidation}}
     {{/unless}}
 
     <div class="input-group poll-checkbox">

diff --git a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
@@ -1,3 +1,5 @@
+$poll-margin: 10px;
+
 .poll-ui-builder-form {
   margin: 0;
 
@@ -8,31 +10,29 @@
 
   .tip {
     display: block;
+    margin-bottom: $poll-margin * 1.5;
+    margin-top: $poll-margin / 2;
+    font-size: $font-down-1;
   }
 
-  .input-group-label {
+  .poll-select {
-    display: inline-block;
+    margin-bottom: $poll-margin;
-    min-width: 55px;
+    display: flex;
+    align-items: center;
   }
 
-  .poll-select {
+  .input-group-label {
-    line-height: 3em;
+    min-width: 85px;
   }
 
   .poll-number {
-    margin: 8px 0;
+    margin: $poll-margin 0;
-
+    display: flex;
-    .tip {
+    align-items: center;
-      margin-bottom: 6px;
-    }
 
     input {
       width: 70px;
     }
-
-    input + .tip {
-      margin-top: 4px;
-    }
   }
 
   .poll-textarea textarea {
@@ -42,10 +42,10 @@
   }
 
   .poll-select + .poll-textarea {
-    margin-top: 12px;
+    margin-top: $poll-margin;
   }
 
   .poll-checkbox {
-    margin-top: 4px;
+    margin-top: $poll-margin / 2;
   }
 }