visual tweaks to survey interface

SumOfUs · Oct 19, 2016 · de95a6e · de95a6e
1 parent 5546d20
commit de95a6e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/app/assets/stylesheets/member-facing/form.scss b/app/assets/stylesheets/member-facing/form.scss
@@ -101,8 +101,8 @@ label.checkbox-label {
   padding-left: 15px;
   text-indent: -15px;
   input[type='checkbox'] {
-    width: 13px;
-    height: 13px;
+    width: 14px;
+    height: 14px;
     padding: 0;
     margin:0;
     vertical-align: bottom;
@@ -117,6 +117,6 @@ label.checkbox-label {
     border-bottom: 2px solid red;
   }
   label {
-    margin: 12px 0 12px 10px;
+    margin: 22px 0 12px 10px;
   }
 }
diff --git a/app/assets/stylesheets/member-facing/survey.scss b/app/assets/stylesheets/member-facing/survey.scss
@@ -1,19 +1,23 @@
 // Member-facing survey styles
 .survey {
+  $font-size-breakpoint: 600px;
   @include centered-to-full(500px, 2%);
   min-height: calc(100vh - 300px);
   overflow: hidden;
   margin-top: 100px;
   &__intro {
     padding-top: 60px;
+    @media(min-width: $font-size-breakpoint) {
+      font-size: 18px;
+    }
   }
   &__skip-button {
     float: left;
   }
   &__form {
     margin: 80px 0;
     overflow: hidden;
-    @media(min-width: 600px) {
+    @media(min-width: $font-size-breakpoint) {
       font-size: 18px;
     }
   }
@@ -27,6 +31,14 @@
       margin-right: 2%;
     }
   }
+  &__instruction, &__question {
+    font-size: 20px;
+    @media(min-width: $font-size-breakpoint) {
+      font-size: 24px;
+    }
+    font-weight: lighter;
+    line-height: 1.4em;
+  }
   .form--big input, 
   .form--big select, 
   .form--big textarea, 
@@ -42,6 +54,12 @@
   }
   .form--big label.checkbox-label {
     font-size: inherit;
+    margin: 0 0 0 12px;
+    position: relative;
+    top: -10px;
+    input[type="checkbox"] {
+      top: -2px;
+    }
   }
   .form--big .has-error .selectize-control.single .selectize-input {
     border-color: $orange;

diff --git a/app/liquid/views/partials/_survey_form.liquid b/app/liquid/views/partials/_survey_form.liquid
@@ -4,18 +4,18 @@
     <div class="form__group action-form__field-container">
       {% case field.data_type %}
       {% when 'text' or 'postal' %}
-        <label for="{{ field.name }}">{{ field.label }}</label>
+        <label for="{{ field.name }}" class="survey__question">{{ field.label }}</label>
         <input type="text" name="{{field.name}}" class="form-control form__content" maxlength="249" value="{{ field.default_value }}" />
       {% when 'hidden' %}
         <input type="hidden" name="{{field.name}}" class="form-control form__content" id="" value="{{ field.default_value }}" />
       {% when 'paragraph' %}
-        <label for="{{ field.name }}">{{ field.label }}</label>
+        <label for="{{ field.name }}" class="survey__question">{{ field.label }}</label>
         <textarea name="{{ field.name }}" class="form-control form__content" id="" maxlength="9999">{{ field.default_value }}</textarea>
       {% when 'email' %}
-        <label for="{{ field.name }}">{{ field.label }}</label>
+        <label for="{{ field.name }}" class="survey__question">{{ field.label }}</label>
         <input type="email" name="{{field.name}}" class="form-control mailcheck form__content" id="" value="{{ field.default_value }}" />
       {% when 'phone' %}
-        <label for="{{ field.name }}">{{ field.label }}</label>
+        <label for="{{ field.name }}" class="survey__question">{{ field.label }}</label>
         <input type="tel" name="{{field.name}}" class="form-control form__content" id="" value="{{ field.default_value }}" />
       {% when 'checkbox' %}
         {% if field.default_value == blank %}
@@ -28,7 +28,7 @@
           <input type="checkbox" name="{{field.name}}" class="form__content" value="1" {{ checked }}/> {{ field.label }}
         </label>
       {% when 'country' %}
-        <label for="{{ field.name }}">{{ field.label }}</label>
+        <label for="{{ field.name }}" class="survey__question">{{ field.label }}</label>
         <select name="{{field.name}}" class="action-form__country-selector form__content">
           <option></option>
           {% if field.default_value == blank %}
@@ -39,7 +39,7 @@
         </select>
       {% when 'choice' %}
         <div class="radio-container">
-          <div>{{ field.label }}</div>
+          <div class="survey__question">{{ field.label }}</div>
           {% for choice in field.choices %}
             <label for="{{ choice.id }}">
               <input id="{{ choice.id }}" name="{{ field.name }}" type="radio" value="{{ choice.value }}">
@@ -48,17 +48,17 @@
           {% endfor %}
         </div>
       {% when 'instruction' %}
-        <div class="form__instruction">
+        <div class="survey__instruction">
           {{ field.label }}
         </div>
       {% endcase %}
     </div>
   {% endfor %}
+  <button type="submit" class="button action-form__submit-button survey__button survey__next-button">{{ cta }}</button>
   {% if form.skippable %}
     {% unless last %}
       <!-- liquid doesn't support `not` or `!` -__- -->
       <a class="button button--inverted survey__button survey__skip-button">{{ skip }}</a>
     {% endunless %}
   {% endif %}
-  <button type="submit" class="button action-form__submit-button survey__button survey__next-button">{{ cta }}</button>
 </form>