From e81f1319926e8deb7268255ba6f0abcc20e973e0 Mon Sep 17 00:00:00 2001
From: Angus McLeod <angus@mcleod.org.au>
Date: Sat, 10 Feb 2018 15:04:31 +0800
Subject: [PATCH] Use flexboxes to align step children and fields

---
 .../wizard/initializers/custom.js.es6         |  2 +
 .../templates/components/wizard-step.hbs      |  4 +-
 .../stylesheets/wizard/wizard_composer.scss   |  9 ++-
 assets/stylesheets/wizard/wizard_custom.scss  | 75 +++++++++----------
 .../wizard/wizard_custom_mobile.scss          |  6 --
 5 files changed, 46 insertions(+), 50 deletions(-)

diff --git a/assets/javascripts/wizard/initializers/custom.js.es6 b/assets/javascripts/wizard/initializers/custom.js.es6
index e7737dd1..d078da25 100644
--- a/assets/javascripts/wizard/initializers/custom.js.es6
+++ b/assets/javascripts/wizard/initializers/custom.js.es6
@@ -151,6 +151,8 @@ export default {
     });
 
     WizardField.reopen({
+      classNameBindings: ['field.id'],
+
       inputComponentName: function() {
         const type = this.get('field.type');
         const id = this.get('field.id');
diff --git a/assets/javascripts/wizard/templates/components/wizard-step.hbs b/assets/javascripts/wizard/templates/components/wizard-step.hbs
index a28a6fac..028bf686 100644
--- a/assets/javascripts/wizard/templates/components/wizard-step.hbs
+++ b/assets/javascripts/wizard/templates/components/wizard-step.hbs
@@ -8,7 +8,9 @@
   {{/if}}
 
   {{#if bannerImage}}
-    <img src={{bannerImage}} class="wizard-step-banner">
+    <div class="wizard-step-banner">
+      <img src={{bannerImage}}>
+    </div>
   {{/if}}
 
   {{#wizard-step-form step=step}}
diff --git a/assets/stylesheets/wizard/wizard_composer.scss b/assets/stylesheets/wizard/wizard_composer.scss
index c04cc352..0dcef708 100644
--- a/assets/stylesheets/wizard/wizard_composer.scss
+++ b/assets/stylesheets/wizard/wizard_composer.scss
@@ -26,15 +26,16 @@
 
 .d-editor .d-editor-modal {
   min-width: 400px;
-  @media screen and (max-width: 424px) {
-    min-width: 300px;
-  }
   position: absolute;
   background-color: $secondary;
   border: 1px solid $primary;
   padding: 1em;
   top: 25px;
 
+  @media screen and (max-width: 424px) {
+    min-width: 300px;
+  }
+
   input {
     width: 95%;
   }
@@ -156,7 +157,7 @@
 ////
 
 .d-editor {
-  max-height: 300px;
+  max-height: 250px;
 }
 
 .d-editor-modal.hidden {
diff --git a/assets/stylesheets/wizard/wizard_custom.scss b/assets/stylesheets/wizard/wizard_custom.scss
index af8f559a..7bac259c 100644
--- a/assets/stylesheets/wizard/wizard_custom.scss
+++ b/assets/stylesheets/wizard/wizard_custom.scss
@@ -5,13 +5,19 @@
 
   .wizard-step-contents {
     position: relative;
-    display: inline-block;
+    display: flex;
+    flex-direction: column;
     width: 100%;
   }
 
+  .wizard-step-title {
+    flex: 0;
+  }
+
   .wizard-step-description {
     line-height: 1.7;
     margin: 1em 0;
+    flex: 0;
 
     i {
       margin-right: 7px;
@@ -67,25 +73,45 @@
     .inline-list > * {
       display: inline-block;
     }
+  }
 
-    .tip {
-      position: absolute;
-      bottom: 0;
-      font-style: italic;
-      margin-bottom: 20px;
+  .wizard-step-form {
+    flex: auto;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .wizard-field {
+    margin-bottom: 1em;
+
+    &.tip {
+      margin-top: auto;
+    }
+
+    .field-label {
+      font-weight: 400;
+    }
+
+    .field-description {
+      color: #333;
 
       img {
-        width: 30px;
-        height: 30px;
+        width: 40px;
+        height: 40px;
         vertical-align: middle;
-        padding-bottom: 5px;
+        padding-bottom: 10px;
+        margin-right: 10px;
+      }
+
+      input {
+        margin: 0 5px;
       }
     }
   }
 
   .wizard-column .wizard-step-banner {
     width: initial;
-    max-width: 660px;
     max-height: 300px;
     margin-bottom: 0;
   }
@@ -385,31 +411,6 @@ img.avatar {
   }
 }
 
-.wizard-column .wizard-field {
-  clear: both;
-  margin-bottom: 1em;
-
-  .field-label {
-    font-weight: 400;
-  }
-
-  .field-description {
-    color: #333;
-
-    img {
-      width: 40px;
-      height: 40px;
-      vertical-align: middle;
-      padding-bottom: 10px;
-      margin-right: 15px;
-    }
-
-    input {
-      margin: 0 5px;
-    }
-  }
-}
-
 .checkbox-field.invalid .input-area {
   padding: 3px;
   border: 4px solid red;
@@ -437,7 +438,3 @@ img.avatar {
     color: rgb(231, 195, 0);
   }
 }
-
-.textarea-field textarea {
-  height: 19em;
-}
diff --git a/assets/stylesheets/wizard/wizard_custom_mobile.scss b/assets/stylesheets/wizard/wizard_custom_mobile.scss
index d2042faa..337bd199 100644
--- a/assets/stylesheets/wizard/wizard_custom_mobile.scss
+++ b/assets/stylesheets/wizard/wizard_custom_mobile.scss
@@ -23,12 +23,6 @@
       height: 60px;
       padding: 10px;
     }
-
-    .tip {
-      position: relative;
-      display: inline-block;
-      margin: 20px 0;
-    }
   }
 
   .wizard-step-banner {