Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Bug Fix: Action modals now have centered content and correct spacing

Browse source 
This also adds functionality to Modals, so they can have multiple
styles, e.g 'wide' and 'centered'.
This commit is contained in:
Matthew Harrison-Jones 2013-09-06 15:36:16 +01:00
parent 75a58bcd1e
commit 44deb1c0df
5 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
core/client/assets/sass/modules/global.scss
View file

@ -979,6 +979,10 @@ body.blur > *:not(#modal-container) {
.modal-action { .modal-action {
@extend %modal; @extend %modal;
.modal-footer {
margin-top: 20px;
}
} }
.modal-header { .modal-header {
@ -1024,10 +1028,12 @@ body.blur > *:not(#modal-container) {
} }
.modal-style-wide { .modal-style-wide {
@extend %modal;
width: 550px; width: 550px;
} }
.modal-style-centered {
text-align: center;
}
/* ========================================================================== /* ==========================================================================
Main Elements Main Elements
========================================================================== */ ========================================================================== */

2
core/client/tpl/modal.hbs
View file

@ -1,5 +1,5 @@
<aside class="modal-background"></aside> <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}} {{#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 class="modal-content">
</section> </section>

2
core/client/views/blog.js
View file

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

4
core/client/views/editor.js
View file

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

2
core/client/views/settings.js
View file

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