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}} - +
+ +
{{/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 {