From 44deb1c0df18bb97cff453b672a13f09ea585105 Mon Sep 17 00:00:00 2001
From: Matthew Harrison-Jones <matthojo@gmail.com>
Date: Fri, 6 Sep 2013 15:36:16 +0100
Subject: [PATCH] Bug Fix: Action modals now have centered content and correct
 spacing

This also adds functionality to Modals, so they can have multiple
styles, e.g 'wide' and 'centered'.
---
 core/client/assets/sass/modules/global.scss | 8 +++++++-
 core/client/tpl/modal.hbs                   | 2 +-
 core/client/views/blog.js                   | 2 +-
 core/client/views/editor.js                 | 4 ++--
 core/client/views/settings.js               | 2 +-
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/core/client/assets/sass/modules/global.scss b/core/client/assets/sass/modules/global.scss
index 1dc8d8534e..7bce135890 100644
--- a/core/client/assets/sass/modules/global.scss
+++ b/core/client/assets/sass/modules/global.scss
@@ -979,6 +979,10 @@ body.blur > *:not(#modal-container) {
 
 .modal-action {
     @extend %modal;
+
+    .modal-footer {
+        margin-top: 20px;
+    }
 }
 
 .modal-header {
@@ -1024,10 +1028,12 @@ body.blur > *:not(#modal-container) {
 }
 
 .modal-style-wide {
-    @extend %modal;
     width: 550px;
 }
 
+.modal-style-centered {
+    text-align: center;
+}
 /* ==========================================================================
    Main Elements
    ========================================================================== */
diff --git a/core/client/tpl/modal.hbs b/core/client/tpl/modal.hbs
index 6860803727..f09a3f9d95 100644
--- a/core/client/tpl/modal.hbs
+++ b/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>
diff --git a/core/client/views/blog.js b/core/client/views/blog.js
index df76af7ff7..e790cea7a3 100644
--- a/core/client/views/blog.js
+++ b/core/client/views/blog.js
@@ -166,7 +166,7 @@
                             }
                         },
                         type: "action",
-                        style: "wide",
+                        style: ["wide", "centered"],
                         animation: 'fade'
                     },
                     content: {
diff --git a/core/client/views/editor.js b/core/client/views/editor.js
index df2efa285d..82ad7732ce 100644
--- a/core/client/views/editor.js
+++ b/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: {
diff --git a/core/client/views/settings.js b/core/client/views/settings.js
index 4263a4d657..c6b018944e 100644
--- a/core/client/views/settings.js
+++ b/core/client/views/settings.js
@@ -186,7 +186,7 @@
                     options: {
                         close: false,
                         type: "action",
-                        style: "wide",
+                        style: ["wide"],
                         animation: 'fadeIn',
                         afterRender: function () {
                             this.$('.js-drop-zone').upload();