Merge pull request #1440 from JohnONolan/post-settings

Post settings refactor

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
    ============================================================================= */

ghost/admin/assets/sass/layouts/manage.scss

@@ -229,12 +229,12 @@
         .post-controls {
             float:right;
             position: relative;
+        }
 
-            ul {
+        .post-settings-menu {
-                position: absolute;
+            position: absolute;
-                top:15px;
+            top: 35px;
-                right:-10px;
+            right: -3px;
-            }
         }
 
         .post-edit {

ghost/admin/assets/sass/modules/forms.scss

@@ -5,9 +5,9 @@
  * Table of Contents:
  *
  * General
+ * Checkboxes
  * Buttons
  * Split Buttons
- * iCheck jQuery Plugin Styles
  *
  */
 
@@ -16,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 {
+    label, 
-        border: none;
+    .label {
-        margin: 0 0 3em 0;
+        @extend %label;
-        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;
-        }
     }
 
     p {
@@ -61,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
@@ -443,70 +475,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;
-}
-

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 {
+    table {
-        a {
+        margin: 0;
-            padding: 10px 15px;
+    }
 
-            &:before {
+    td {
-                font-size: 11px;
+        padding: 0;
-                line-height: 1em;
+        border-top: none;
-                margin-right: 1em;
+        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;
     }
 

ghost/admin/tpl/preview.hbs

@@ -4,39 +4,46 @@
         <span class="hidden">Star</span>
     </a>
     {{! TODO: JavaScript toggle featured/unfeatured}}
-    <span class="status">{{#if published}}Published{{else}}Written{{/if}}</span>
+    <small>
-    <span class="normal">by</span>
+        <span class="status">{{#if published}}Published{{else}}Written{{/if}}</span>
-    <span class="author">{{#if author.name}}{{author.name}}{{else}}{{author.email}}{{/if}}</span>
+        <span class="normal">by</span>
+        <span class="author">{{#if author.name}}{{author.name}}{{else}}{{author.email}}{{/if}}</span>
+    </small>
     <section class="post-controls">
         <a class="post-edit" href="#" title="Edit Post"><span class="hidden">Edit Post</span></a>
         <a class="post-settings" href="#" data-toggle=".post-settings-menu" title="Post Settings"><span class="hidden">Post Settings</span></a>
-        <ul class="post-settings-menu menu-drop-right overlay">
+        <div class="post-settings-menu menu-drop-right overlay">
-            <li class="post-setting">
+            <form>
-                <div class="post-setting-label">
+                <table class="plain">
-                    <label for="url">URL</label>
+                    <tr class="post-setting">
-                </div>
+                        <td class="post-setting-label">
-                <div class="post-setting-field">
+                            <label for="url">URL</label>
-                    <input class="post-setting-slug" type="text" value="{{{slug}}}">
+                        </td>
-                </div>
+                        <td class="post-setting-field">
-            </li>
+                            <input id="url" class="post-setting-slug" type="text" value="" />
-            <li class="post-setting">
+                        </td>
-                <div class="post-setting-label">
+                    </tr>
-                    <label for="url">Pub Date</label>
+                    <tr class="post-setting">
-                </div>
+                        <td class="post-setting-label">
-                <div class="post-setting-field">
+                            <label for="pub-date">Pub Date</label>
-                    <input class="post-setting-date" type="text" value="">
+                        </td>
-                </div>
+                        <td class="post-setting-field">
-            </li>
+                            <input id="pub-date" class="post-setting-date" type="text" value=""><!--<span class="post-setting-calendar"></span>-->
-            <li class="post-setting">
+                        </td>
-                <div class="post-setting-label">
+                    </tr>
-                    <label for="static-page">Static Page</label>
+                    <tr class="post-setting">
-                </div>
+                        <td class="post-setting-label">
-                <div class="post-setting-field">
+                            <span class="label">Static Page</span>
-                    <input id="static-page" class="post-setting-static-page" type="checkbox" value="">
+                        </td>
-                </div>
+                        <td class="post-setting-item">
-            </li>                
+                            <input id="static-page" class="post-setting-static-page" type="checkbox" value="">
-            <li><a href="#" class="delete hidden">Delete This Post</a></li>
+                            <label class="checkbox" for="static-page"></label>
-        </ul>
+                        </td>
+                    </tr>
+                </table>
+            </form>
+            <a class="delete" href="#">Delete This Post</a>
+        </div>
     </section>
 </header>
 <section class="content-preview-content">

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*/