Merge pull request #638 from matthojo/Modal-Fix

Modal Fixes

core/client/assets/sass/modules/global.scss

@@ -971,6 +971,14 @@ body.blur > *:not(#modal-container) {
             opacity: 1;
         }
     }
+
+    button {
+        min-width: 100px;
+    }
+
+    @include breakpoint($mobile) {
+        width: 100%;
+    }
 }
 
 .modal-info {
@@ -979,6 +987,10 @@ body.blur > *:not(#modal-container) {
 
 .modal-action {
     @extend %modal;
+
+    .modal-footer {
+        margin-top: 20px;
+    }
 }
 
 .modal-header {
@@ -1024,10 +1036,16 @@ body.blur > *:not(#modal-container) {
 }
 
 .modal-style-wide {
-    @extend %modal;
     width: 550px;
+
+    @include breakpoint($mobile) {
+        width: 100%;
+    }
 }
 
+.modal-style-centered {
+    text-align: center;
+}
 /* ==========================================================================
    Main Elements
    ========================================================================== */

core/client/tpl/modal.hbs

@@ -1,5 +1,5 @@
 <aside class="modal-background"></aside>
-<article class="modal{{#if options.type}}-{{options.type}}{{/if}} {{#if options.style}}modal-style-{{options.style}}{{/if}}  {{options.animation}} js-modal">
+<article class="modal{{#if options.type}}-{{options.type}}{{/if}} {{#if options.style}}{{#each options.style}}modal-style-{{this}} {{/each}}{{/if}}{{options.animation}} js-modal">
     {{#if content.title}}<header class="modal-header"><h1>{{content.title}}</h1>{{#if options.close}}<a class="close" href="#"><span class="hidden">Close</span></a>{{/if}}</header>{{/if}}
     <section class="modal-content">
     </section>

core/client/views/blog.js

@@ -166,7 +166,7 @@
                             }
                         },
                         type: "action",
-                        style: "wide",
+                        style: ["wide", "centered"],
                         animation: 'fade'
                     },
                     content: {

core/client/views/editor.js

@@ -300,7 +300,7 @@
                     options: {
                         close: true,
                         type: "info",
-                        style: "wide",
+                        style: ["wide"],
                         animation: 'fade'
                     },
                     content: {
@@ -374,7 +374,7 @@
                     options: {
                         close: true,
                         type: "info",
-                        style: "wide",
+                        style: ["wide"],
                         animation: 'fade'
                     },
                     content: {

core/client/views/settings.js

@@ -186,8 +186,8 @@
                     options: {
                         close: false,
                         type: "action",
-                        style: "wide",
-                        animation: 'fadeIn',
+                        style: ["wide"],
+                        animation: 'fade',
                         afterRender: function () {
                             this.$('.js-drop-zone').upload();
                         },