From b38785d5f6c2267453e0ba1d0546d7b268aac0a1 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@ghost.org>
Date: Sat, 16 Aug 2014 19:39:52 +0300
Subject: [PATCH] Settings nav overhaul

---
 .../assets/sass/components/navigation.scss    |   2 +-
 ghost/admin/assets/sass/layouts/content.scss  |   9 +-
 ghost/admin/assets/sass/layouts/default.scss  |  44 +-
 ghost/admin/assets/sass/layouts/settings.scss | 436 +++++++-----------
 ghost/admin/assets/sass/layouts/users.scss    |  14 +-
 5 files changed, 186 insertions(+), 319 deletions(-)

diff --git a/ghost/admin/assets/sass/components/navigation.scss b/ghost/admin/assets/sass/components/navigation.scss
index 8df219801b..0d68af4495 100644
--- a/ghost/admin/assets/sass/components/navigation.scss
+++ b/ghost/admin/assets/sass/components/navigation.scss
@@ -151,7 +151,7 @@
 // Mobile
 // --------------------------------------------------
 
-@media (max-width: 1025px) {
+@media (max-width: 900px) {
 
     // Fixed width, position left
     .global-nav {
diff --git a/ghost/admin/assets/sass/layouts/content.scss b/ghost/admin/assets/sass/layouts/content.scss
index 60d053234c..7d289d8b83 100644
--- a/ghost/admin/assets/sass/layouts/content.scss
+++ b/ghost/admin/assets/sass/layouts/content.scss
@@ -176,6 +176,7 @@
     bottom:0;
     top:0;
     right:0;
+    overflow: auto;
     background: #fff;
     @media (max-width: 800px) {
         width: auto;
@@ -204,12 +205,6 @@
     }
 
     .content-preview-content {
-        position: absolute;
-        top:0;
-        right:0;
-        bottom:0;
-        left:0;
-        overflow: auto;
         padding: 80px 40px;
         word-break: break-word;
         hyphens: auto;
@@ -234,8 +229,6 @@
 
     .post-edit {
         @include icon($i-edit, 14px);
-        margin-right: 2px;
-        padding: 0 10px;
     }
 
     img {
diff --git a/ghost/admin/assets/sass/layouts/default.scss b/ghost/admin/assets/sass/layouts/default.scss
index 4c410bc29b..fe95fee188 100644
--- a/ghost/admin/assets/sass/layouts/default.scss
+++ b/ghost/admin/assets/sass/layouts/default.scss
@@ -17,7 +17,7 @@
     overflow: hidden;
     z-index: 500; // Above the .global-nav when collapsed
 
-    @media (max-width: 1025px) {
+    @media (max-width: 900px) {
         @include transition(transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1));
     }
 
@@ -27,7 +27,7 @@
 }
 
 //
-// The header bar - visible below 1025px
+// The header bar - visible below 900px
 // --------------------------------------------------
 
 .page-header {
@@ -39,30 +39,32 @@
     background: $darkgrey;
     overflow: hidden;
 
-    @media (min-width: 1025px) {
+    @media (min-width: 900px) {
         height: 60px;
         line-height: 60px;
     }
 
-    // Centered page heading
-    h2 {
-        display: block;
-        height: 44px;
-        line-height: 44px;
-        margin: 0;
-        padding: 0 15%;
-        font-size: 1.8rem;
-        font-weight: normal;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
+}
 
-        @media (min-width: 1025px) {
-            height: 60px;
-            line-height: 60px;
-        }
+// Centered page heading
+.page-title {
+    display: block;
+    height: 44px;
+    line-height: 44px;
+    margin: 0;
+    padding: 0 15%;
+    color: #fff;
+    font-size: 1.8rem;
+    font-weight: normal;
+    letter-spacing: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    @media (min-width: 900px) {
+        height: 60px;
+        line-height: 60px;
     }
-
 }
 
 // The burger to expand .global-nav menu
@@ -92,7 +94,7 @@
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 
-    @media (max-width: 1025px) {
+    @media (max-width: 900px) {
         top: 44px;
     }
 }
\ No newline at end of file
diff --git a/ghost/admin/assets/sass/layouts/settings.scss b/ghost/admin/assets/sass/layouts/settings.scss
index 2cfec94e41..cc5ab4f943 100644
--- a/ghost/admin/assets/sass/layouts/settings.scss
+++ b/ghost/admin/assets/sass/layouts/settings.scss
@@ -4,97 +4,27 @@
 // Slug: /ghost/settings/
 // --------------------------------------------------
 
-.settings {
-
-    // The main white bg for the page
-    .wrapper {
-        background: #fff;
-        box-shadow: $shadow;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        padding: 0;
-
-        @media (max-width: 800px) {
-            top: -55px;
-            margin-top: 55px;
-            overflow-x: hidden;
-        }
-    }
-
-    .title {
-        text-transform: uppercase;
-        font-weight: normal;
-        font-size: 1.6em;
-        line-height: 0.8em;
-        margin: 0 0 18px 0;
-        padding: 0;
-        border: none;
-    }
-
-} // .settings
-
 
 //
 // Sidebar
 // --------------------------------------------------
 
-// The whole left column sidebar, duh.
-.settings-sidebar {
-    width: 20%;
-    position: absolute;
-    top: 0;
+// Main settings-menu styles, apply to every item
+.settings-menu {
+    width: 25%;
+    position: fixed;
+    top: 60px;
     left: 0;
     bottom: 0;
     z-index: 700;
     background: #fff;
     box-shadow: $lightbrown 1px 0 0;
-    @media (max-width: 800px) {
+    @media (max-width: 900px) {
         width: 100%;
-        box-shadow: none;
     }
 
-    > header {
-        position: relative;
-        z-index: 400;
-        height: 17px;
-        padding: 30px 15px 47px 40px;
-        margin-bottom: 0;
-        border-bottom: none;
-        box-shadow: #edece4 0 -1px 0 inset, #edece4 1px 0 0;
-
-        // Transparent gradient to make bg fade out as it goes out the top.
-        // TODO: Much improve
-        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.90)));
-        background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
-        background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
-
-        @media (max-width: 1000px) {
-            padding-left: 15px;
-        }
-    }
-
-} // .settings-sidebar
-
-// Main settings-menu styles, apply to every item
-.settings-menu {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: -1px;
-    overflow: auto;
-    @media (max-width: 800px) {
-        right: 0;
-    };
-
-    // Create placeholder the same height as the floating header
-    // to push content down by the same amount
-    &:before {
-        display: block;
-        content: "";
-        height: 77px; // 30px + 17px title + 30px
+    @media (max-width: 900px) {
+        top: 44px;
     }
 
     ul {
@@ -102,13 +32,12 @@
         margin: 0;
         padding: 0;
         border-top: none;
-        @media (max-width: 800px) { border-bottom: #edece4 1px solid; }
+        @media (max-width: 900px) { border-bottom: #edece4 1px solid; }
     }
 
     li {
-        margin-right: 1px;
         border-top: #fff 1px solid;
-        @media (max-width: 800px) {
+        @media (max-width: 900px) {
             margin-right: 0;
             border-top: #edece4 1px solid;
         }
@@ -120,8 +49,8 @@
             border-bottom: none;
             color: $brown;
 
-            @media (max-width: 1000px) { padding-left: 15px; }
-            @media (max-width: 800px) {
+            @media (max-width: 900px) {
+                padding-left: 15px ;
                 @include icon-after($i-chevron) {
                     float: right;
                     margin-top: 5px;
@@ -138,14 +67,14 @@
             // Make space for icons
             &:before {
                 margin-right: 20px;
-                @media (max-width: 1000px) {
+                @media (max-width: 900px) {
                     margin-right: 15px;
                 }
             }
         }
 
         &.active {
-            @media (min-width: 801px) {
+            @media (min-width: 900px) {
                 // only apply active styles on larger devices
 
                 margin-right: 0;
@@ -211,175 +140,17 @@
 
 // The main content panel on the right
 .settings-content {
-    padding: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 20%;
-    bottom: 0;
-    background: #fff;
-
-    @media (max-width: 800px) {
-        width: 100%;
-        left: 100%;
-        right: -100%;
-        margin-left: 15px;
-    }
+    margin-left: 25%;
 
     .settings-general img {
         max-width: 100%;
         max-height: 400px;
     }
 
-    // TODO: Header could really be more specific (class)
-    > header {
-        position: relative;
-        z-index: 200;
-        height: 17px;
-        padding: 30px 220px 46px 40px;
-        border-bottom: $lightbrown 1px solid;
-        margin-bottom: 40px;
-        text-transform: none;
-        font-weight: normal;
-        line-height: inherit;
-        color: inherit;
-
-        // Transparent gradient to make bg fade out as it goes out the top.
-        // TODO: Significantly improve
-        background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,0.90) 100%);
-        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.90)));
-        background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
-        background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
-        background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
-        background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
-
-        @media (max-width: 1000px) {
-            padding-left: 15px;
-        }
-        // @media (max-width: 800px) {
-        //     padding-left: 115px;
-        // }
-        @media (max-height: 600px) {
-            height: auto;
-            padding: 5px;
-            position: absolute;
-            top: 0;
-            right: 0;
-            border: none;
-            background: transparent;
-
-            .title {
-                display: none;
-            }
-        }
-        @media (max-width: 650px) {
-            padding-left: 15px;
-
-            .button-back {
-                position: fixed;
-                top: 5px;
-                left: 14px;
-                min-height: 0;
-                padding-top: 8px;
-                padding-bottom: 8px;
-                display: block;
-
-                &:before {
-                    left: -9px;
-                    border-width: 15px 9px 15px 0;
-                }
-            }
-        }
-
-        .header-inner {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 100px;
-            outline: 1px solid red;
-        }
-
-    } // header
-
-
-    .page-actions {
-        position: absolute;
-        top: 20px;
-        right: 40px;
-        z-index: 700;
-        font-size: 1em;
-
-        @media (max-width: 1000px) {
-            right: 15px;
-        }
-        @media (max-width: 650px) {
-            position: fixed;
-            top: 5px;
-            right: 4px;
-
-            .btn-blue {
-                min-height: 0;
-                height: 30px;
-                padding: 0.5em 1.37em;
-            }
-        }
-        &.page-actions-alt {
-            left: 40px;
-            @media (max-width: 1000px) {
-                left: 15px;
-            }
-        }
-
-        .btn-green {
-            position: relative;
-            padding-left: 50px;
-            border: rgba(0,0,0,0.07) 1px solid;
-            @include icon($i-add, 1.4em, rgba(255,255,255,0.6)) {
-                position: absolute;
-                top: 0;
-                padding: 9px 8px 0 0;
-                left: 9px;
-                bottom: 0;
-                width: 26px;
-                border-right: rgba(0,0,0,0.07) 1px solid;
-            };
-            @media (max-width: 650px) {
-                height: 30px;
-                min-height: 30px;
-                padding: 6px 10px 8px 40px;
-                &:before {
-                    padding-top: 7px;
-                    left: 8px;
-                    width: 22px;
-                }
-            }
-        }
-    } // > header
-
     .content {
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        bottom: 0;
         padding: 40px;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
 
-        // Create placeholder the same height as the floating header
-        // to push content down by the same amount
-        &:before {
-            display: block;
-            content: "";
-            height: 87px;
-        }
-
-        &.no-padding {
-            padding: 0;
-        }
-
-        @media (max-width: 1000px) {
+        @media (max-width: 900px) {
             padding-left: 15px;
             padding-right: 15px;
         }
@@ -388,43 +159,148 @@
         }
     } // .content
 
-    .description-container,
-    .bio-container {
-        textarea {
-            min-height: 115px;
-        }
-    }
-
-    .word-count {
-        float: right;
-        font-weight: bold;
-        color: darken($brown, 5%);
-    }
-
-    // Fixes for images in buttons (user avatar/cover)
-    button.js-modal-logo,
-    button.js-modal-cover {
-        padding: 0;
-    }
-
-    @media (max-width: 550px) {
-        textarea {
-            max-width: 100%;
-            + p {
-                max-width: 100%;
-            }
-        }
-    }
-
 } // .settings-content
 
+// This is the header for /ghost/settings/view/
+// It's black and fixed position at the top of the screen
+.settings-view-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 3000;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    color: #fff;
+    background: #242628;
+    overflow: hidden;
 
-//
-// Code Injection
-// --------------------------------------------------
-// TODO: This should not be here
+    .btn-back {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        color: #fff;
+        background: transparent;
+    }
 
-.header-injection,
-.footer-injection {
-    margin-top: 3.2em;
+    .btn {
+        vertical-align: top;
+        line-height: 1.45;
+    }
+
+    .page-actions {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+
+    }
+
+    // Desktop
+    // On larger viewports, make it look like a simple heading
+    @media (min-width: 900px) {
+        position: static;
+        height: auto;
+        padding: 30px 40px;
+        text-align: left;
+        line-height: 1.15em;
+        background: none;
+
+        .btn-back {
+            display: none;
+            vertical-align: middle;
+            color: #666;
+        }
+
+        .btn {
+            vertical-align: middle;
+            line-height: 1.428571429;
+        }
+
+        .page-title {
+            display: inline;
+            padding: 0;
+            font-size: 2.6rem;
+            line-height: 1.3;
+            overflow: visible;
+            color: $darkgrey;
+        }
+
+        .page-actions {
+            position: static;
+            float: right;
+        }
+    }
+}
+
+
+// This is the header for /ghost/settings/view/subview/
+// It's black and fixed position at the top of the screen
+.settings-subview-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 3000;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    color: #fff;
+    background: #242628;
+    overflow: hidden;
+
+    .btn-back {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        color: #fff;
+        background: transparent;
+    }
+
+    .btn {
+        vertical-align: top;
+        line-height: 1.45;
+    }
+
+    .page-actions {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+
+    }
+
+    // Desktop
+    // On larger viewports, make it look like a simple heading
+    @media (min-width: 900px) {
+        position: static;
+        height: auto;
+        padding: 30px 40px;
+        line-height: 1.15em;
+        background: none;
+
+        .btn-back {
+            position: static;
+            float:left;
+            color: #666;
+        }
+
+        .btn {
+            vertical-align: middle;
+            line-height: 1.428571429;
+        }
+
+        .page-title {
+            display: inline;
+            padding: 0;
+            font-size: 2.6rem;
+            line-height: 1.3;
+            overflow: visible;
+            color: $darkgrey;
+        }
+
+        .page-actions {
+            position: static;
+            float: right;
+        }
+    }
 }
\ No newline at end of file
diff --git a/ghost/admin/assets/sass/layouts/users.scss b/ghost/admin/assets/sass/layouts/users.scss
index 7504470262..ec64c19b5b 100644
--- a/ghost/admin/assets/sass/layouts/users.scss
+++ b/ghost/admin/assets/sass/layouts/users.scss
@@ -151,32 +151,28 @@ a.object-list-item {
 // --------------------------------------------------
 
 .role-label {
-
-    background: #eee;
-
     display: inline-block;
     padding: 6px 8px;
-
     color: rgba(0,0,0,0.5);
     font-size: 9px;
     line-height: 1;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: 400;
-
-    &.owner, &.admin, &.editor {
-        color: rgba(255,255,255,0.8);
-    }
+    background: #eee;
 
     &.owner {
+        color: rgba(255,255,255,0.8);
         background: $darkgrey;
     }
 
-    &.admin {
+    &.administrator {
+        color: rgba(255,255,255,0.8);
         background: $red;
     }
 
     &.editor {
+        color: rgba(255,255,255,0.8);
         background: $blue;
     }