From cf7b03bfff5f0a7b3345a30e82fc8590b6f49bf9 Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Fri, 8 Nov 2013 14:38:23 +0100 Subject: [PATCH 1/2] Kill iCheck cause Hannah says it has genital warts. --- ghost/admin/assets/sass/modules/forms.scss | 68 ---------------------- ghost/admin/views/settings.js | 4 -- 2 files changed, 72 deletions(-) diff --git a/ghost/admin/assets/sass/modules/forms.scss b/ghost/admin/assets/sass/modules/forms.scss index 5a3923b5c2..20bdaa0ed3 100644 --- a/ghost/admin/assets/sass/modules/forms.scss +++ b/ghost/admin/assets/sass/modules/forms.scss @@ -7,7 +7,6 @@ * General * Buttons * Split Buttons - * iCheck jQuery Plugin Styles * */ @@ -443,70 +442,3 @@ input[type="reset"] { } } - -/* ============================================================================= - iCheck jQuery Plugin Styles - ============================================================================= */ -.icheckbox_ghost, -.iradio_ghost { - @include box-sizing(border-box); - display: block; - width: 16px; - height: 16px; - float: left; - margin: 2px 0 0 0; - padding: 0; - margin-right: 6px; - background: none; - border: none; - box-shadow: none; - border-radius: 2px; - @include transition( - border ease 0.25s, - background ease 0.2s - ); -} - -.icheckbox_ghost { - border: 1px solid darken($lightbrown, 5%); -} -.icheckbox_ghost.hover { - border: $brown 1px solid; -} -.icheckbox_ghost.checked { - background: $blue; - border: $blue 1px solid; - padding:0; - @include icon($i-check, 12px, #fff) { - position: relative; - top: -4px; - left: -1px - } -} -.icheckbox_ghost.disabled { - border: 1px solid $lightbrown; -} -.icheckbox_ghost.checked.disabled { - background: $lightbrown; -} - -.iradio_ghost { - border-radius: 11px; - border: 1px solid darken($lightbrown, 5%); -} -.iradio_ghost.hover { - border: $blue 2px solid; -} -.iradio_ghost.checked { - background: $blue; - border: none; - @include icon($i-check, 1em, #fff); -} -.iradio_ghost.disabled { - border: 1px solid $lightbrown; - cursor: default; -} -.iradio_ghost.checked.disabled { - background: $lightbrown; -} - diff --git a/ghost/admin/views/settings.js b/ghost/admin/views/settings.js index 34387f8ed0..0a340f4b4c 100644 --- a/ghost/admin/views/settings.js +++ b/ghost/admin/views/settings.js @@ -110,10 +110,6 @@ afterRender: function () { this.$el.attr('id', this.id); this.$el.addClass('active'); - - this.$('input').iCheck({ - checkboxClass: 'icheckbox_ghost' - }); }, saveSuccess: function (model, response, options) { /*jslint unparam:true*/ From 6e3abb1ad4caee82da9daa21176ad9bf27d74c10 Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Tue, 12 Nov 2013 09:19:02 +0100 Subject: [PATCH 2/2] Complete post-settings menu refactor --- ghost/admin/assets/sass/layouts/editor.scss | 38 ++- ghost/admin/assets/sass/layouts/manage.scss | 10 +- ghost/admin/assets/sass/modules/forms.scss | 275 +++++++++++--------- ghost/admin/assets/sass/modules/global.scss | 137 +++++----- ghost/admin/tpl/preview.hbs | 67 ++--- 5 files changed, 290 insertions(+), 237 deletions(-) diff --git a/ghost/admin/assets/sass/layouts/editor.scss b/ghost/admin/assets/sass/layouts/editor.scss index c0089a60a9..a81aa0e139 100644 --- a/ghost/admin/assets/sass/layouts/editor.scss +++ b/ghost/admin/assets/sass/layouts/editor.scss @@ -402,6 +402,19 @@ body.zen { @include breakpoint($netbook) {font-weight: normal;} + .post-settings { + &:hover, + &.active { + color: $lightgrey; + } + } + + .post-settings-menu { + position: absolute; + bottom: 44px; + right: -3px; + } + button { min-height: 30px; height: 30px; @@ -615,28 +628,6 @@ body.zen { z-index: 1; } -.entry-settings { - @include icon($i-settings, 14px); - @include box-sizing(border-box); - display: inline-block; - padding: 0 10px; - color: $midgrey; - @include transition; - position: relative; - top: 1px; - - &:hover, - &.active { - color: $lightgrey; - } -} - -.entry-settings-menu { - position: absolute; - bottom: 44px; - right: -3px; -} - #entry-actions { margin-right: 6px; position: relative; @@ -651,13 +642,16 @@ body.zen { /* ============================================================================= Markdown Help Modal ============================================================================= */ + .markdown-help-container{ padding-bottom: 20px; } + .modal-markdown-help-table { margin-top: 0; } + /* ============================================================================= CodeMirror ============================================================================= */ diff --git a/ghost/admin/assets/sass/layouts/manage.scss b/ghost/admin/assets/sass/layouts/manage.scss index e744c3ba2a..ffeae0c0db 100644 --- a/ghost/admin/assets/sass/layouts/manage.scss +++ b/ghost/admin/assets/sass/layouts/manage.scss @@ -229,12 +229,12 @@ .post-controls { float:right; position: relative; + } - ul { - position: absolute; - top:15px; - right:-10px; - } + .post-settings-menu { + position: absolute; + top: 35px; + right: -3px; } .post-edit { diff --git a/ghost/admin/assets/sass/modules/forms.scss b/ghost/admin/assets/sass/modules/forms.scss index 20bdaa0ed3..6caf50259b 100644 --- a/ghost/admin/assets/sass/modules/forms.scss +++ b/ghost/admin/assets/sass/modules/forms.scss @@ -5,6 +5,7 @@ * Table of Contents: * * General + * Checkboxes * Buttons * Split Buttons * @@ -15,43 +16,32 @@ General ============================================================================= */ +%label { + display: inline-block; + position: absolute; + top: 0.5em; + left: 0; + width: 120px; + font-weight: bold; + color: $brown; + text-align: right; + + @include breakpoint(550px) { + display: block; + position: relative; + top: auto; + left: auto; + width: auto; + margin-bottom: 5px; + text-align: left; + } +} + form { - fieldset { - border: none; - margin: 0 0 3em 0; - padding: 0; - } - - legend { - display: block; - width: 100%; - margin: 2em 0; - border-bottom:$lightbrown 1px solid; - font-size: 1.2em; - line-height: 2.0em; - color: $brown; - } - - label { - display: inline-block; - position: absolute; - top: 0.5em; - left: 0; - width: 120px; - font-weight: bold; - color: $brown; - text-align: right; - - @include breakpoint(550px) { - display: block; - position: relative; - top: auto; - left: auto; - width: auto; - margin-bottom: 5px; - text-align: left; - } + label, + .label { + @extend %label; } p { @@ -60,94 +50,137 @@ form { margin: 0; } - input, textarea, select { - @include box-sizing(border-box); - width: 276px; - padding: 5px 7px; - margin: 0; - outline: 0; - font-size: 1.1em; - line-height: 1.4em; - background: #fff; - border: darken($lightbrown, 5%) 1px solid; - border-radius: $rounded; - @include transition(all 0.15s ease-in-out); - - @include breakpoint(550px) { - width: 100%; - } - } - - textarea { - width: 100%; - max-width: 340px; - min-width: 250px; - height: auto; - min-height: 80px; - } - - input, select, textarea { - margin-bottom: 5px; - } - - input[type="text"]:focus, - input[type="email"]:focus, - input[type="search"]:focus, - input[type="tel"]:focus, - input[type="url"]:focus, - input[type="password"]:focus, - input[type="number"]:focus, - input[type="date"]:focus, - input[type="month"]:focus, - input[type="week"]:focus, - input[type="time"]:focus, - input[type="datetime"]:focus, - input[type="datetime-local"]:focus, - textarea:focus { - border: $brown 1px solid; - background: #fff; - outline: none; - outline-width: 0; - } - - select { - @include box-sizing(border-box); - width: 270px; - height: 30px; - line-height: 30px; - - @include breakpoint(550px) { - width: 100%; - } - } - - .radio input[type="radio"], - .checkbox input[type="checkbox"] { - float: left; - width:auto; - margin-right: 6px; - margin-top: 4px; - font-size: 1em; - } - - .radio, .checkbox { - width: auto; - margin: 5px 0; - font-weight: normal; - padding:0.55em 0; - cursor: pointer; - } - - .form-group { - position: relative; - margin: 1.5em 0; - padding-left: 140px; - - @include breakpoint(550px) { padding-left: 0; } - } - }//form +fieldset { + border: none; + margin: 0 0 3em 0; + padding: 0; +} + +legend { + display: block; + width: 100%; + margin: 2em 0; + border-bottom:$lightbrown 1px solid; + font-size: 1.2em; + line-height: 2.0em; + color: $brown; +} + +input, textarea, select { + @include box-sizing(border-box); + width: 276px; + padding: 5px 7px; + margin: 0; + outline: 0; + font-size: 1.1em; + line-height: 1.4em; + background: #fff; + border: darken($lightbrown, 5%) 1px solid; + border-radius: $rounded; + @include transition(all 0.15s ease-in-out); + + @include breakpoint(550px) { + width: 100%; + } +} + +textarea { + width: 100%; + max-width: 340px; + min-width: 250px; + height: auto; + min-height: 80px; +} + +input, select, textarea { + margin-bottom: 5px; +} + +input[type="text"]:focus, +input[type="email"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +input[type="number"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="week"]:focus, +input[type="time"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +textarea:focus { + border: $brown 1px solid; + background: #fff; + outline: none; + outline-width: 0; +} + +select { + @include box-sizing(border-box); + width: 270px; + height: 30px; + line-height: 30px; + + @include breakpoint(550px) { + width: 100%; + } +} + +.form-group { + position: relative; + margin: 1.5em 0; + padding-left: 140px; + + @include breakpoint(550px) { padding-left: 0; } +} + +/* ============================================================================= + Checkboxes + ============================================================================= */ + +// Hide the default checkbox +input[type="checkbox"] { + display: none; +} + +// Turn the label element into a fake checkbox +.checkbox { + @include box-sizing(border-box); + position: relative; + top: auto; + margin-top: 0.5em; + display: inline-block; + width: 18px; + height: 18px; + cursor: pointer; + border-radius: $rounded; + background: lighten($lightbrown, 5%); + border: darken($lightbrown, 5%) 1px solid; + @include transition(all 0.2s ease); + + // Create a checkmark, hidden by default + &:after { + opacity: 0; + content: ""; + position: absolute; + width: 7px; + height: 3px; + top: 5px; + left: 4px; + border: 3px solid #fff; + border-top: none; + border-right: none; + @include transform(rotate(-45deg)); + } +} + +// If the checkbox is checked, show the the :after element +input[type=checkbox]:checked + .checkbox { background: $green; border: lighten($green, 10%); } +input[type=checkbox]:checked + .checkbox:after { opacity: 1; } + /* ============================================================================= Buttons diff --git a/ghost/admin/assets/sass/modules/global.scss b/ghost/admin/assets/sass/modules/global.scss index 799f614cd3..a53fa1653b 100644 --- a/ghost/admin/assets/sass/modules/global.scss +++ b/ghost/admin/assets/sass/modules/global.scss @@ -318,7 +318,7 @@ table { padding: 8px; line-height: 20px; text-align: left; - vertical-align: top; + vertical-align: middle; border-top: 1px solid $lightbrown; } @@ -834,77 +834,96 @@ nav { Post Settings ========================================================================== */ +.post-settings { + @include icon($i-settings, 14px); + @include box-sizing(border-box); + display: inline-block; + padding: 0 10px; + color: $midgrey; + @include transition; + position: relative; + top: 1px; + + &:hover, + &.active { + color: $darkgrey; + } +} + .post-settings-menu { + padding-top: 0; text-transform: none; - li { - a { - padding: 10px 15px; + table { + margin: 0; + } - &:before { - font-size: 11px; - line-height: 1em; - margin-right: 1em; + td { + padding: 0; + border-top: none; + border-bottom: lighten($grey, 5%) 1px solid; + } + + .post-setting-label { + padding: 8px 10px 8px 15px; + border-right: lighten($grey, 5%) 1px solid; + text-align: right; + } + + %label { + position: static; + width: auto; + font-weight: normal; + color: $midgrey; + white-space: nowrap; + } + + input { + width: 200px; + margin: 0; + + @include breakpoint(550px) { width: 200px; } + + &[type="text"] { + border: none; + padding: 8px 0 8px 10px; + color: $lightgrey; + border-radius: 0; + background: transparent; + + &:focus { + background: $grey; + border: none; } } } + .post-setting-item { + position: relative; + padding: 7px; + } + + .checkbox { + @include position(absolute, 9px 0 0 10px); + margin-top: 0; + width: 18px; + border: lighten($grey, 10%) 1px solid; + background: $grey; + } + .delete { - @include icon($i-trash) { position: relative; top: -2px; }; + display: block; + padding: 10px 15px; + @include icon($i-trash) { + position: relative; + top: -1px; + margin-right: 10px + }; &:hover { background: $red; } } } -.post-setting { - min-width: 300px; - border-bottom: 1px solid #35393b; - - &:first-child { - margin-top: -6px; - } - - input { - width: 100%; - background: none; - border: none; - color: #e2edf2; - line-height: 1.68em; - } -} - -.post-setting-label { - float: left; - width: 26%; - text-align: right; - padding: 10px 2%; - border-right: 1px solid #35393b; -} - -.post-setting-field { - float: left; - width: 64%; - padding: 8px 2%; - - input:focus { - outline: none; - } -} - -.post-settings { - @include icon($i-settings, 14px); - padding: 5px; - /* margin-right: -5px;*/ -} - -.post-setting-calendar { - @include icon-after($i-calendar, 18px); - width: 18px; - height: 18px; - position: absolute; - margin-top: -25px; /* This doesn't work in FF */ - right: 10px; -} /* ========================================================================== Notifications @@ -1223,7 +1242,7 @@ main { } } - span { + small { font-size: 0.85em; } diff --git a/ghost/admin/tpl/preview.hbs b/ghost/admin/tpl/preview.hbs index c1e71da962..464dd9b35a 100644 --- a/ghost/admin/tpl/preview.hbs +++ b/ghost/admin/tpl/preview.hbs @@ -4,39 +4,46 @@ {{! TODO: JavaScript toggle featured/unfeatured}} - {{#if published}}Published{{else}}Written{{/if}} - by - {{#if author.name}}{{author.name}}{{else}}{{author.email}}{{/if}} + + {{#if published}}Published{{else}}Written{{/if}} + by + {{#if author.name}}{{author.name}}{{else}}{{author.email}}{{/if}} +
-
    -
  • -
    - -
    -
    - -
    -
    • -
  • -
    - -
    -
    - -
    -
    • -
  • -
    - -
    -
    - -
    -
    • -
    • -
+
+
+ + + + + + + + + + + + + +
+ + + +
+ + + +
+ Static Page + + + +
+
+ Delete This Post +