From d3d74f0395b68903897f74c3e0adcebcf1438b09 Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Fri, 26 Sep 2014 12:56:14 +0100
Subject: [PATCH] Refactor settings and content wrappers to allow smooth
 overflows and properly show headers on mobile

Closes #4186, Closes #4190, Closes #4150

- Alters markup to allow for correct use of `-webkit-overflow-scrolling: touch;`
- Updates the debug page to use the same markup as the rest of the settings page
- Solve floating tag bar issue by making it absolute, not fixed
---
 ghost/admin/assets/sass/layouts/content.scss  |  13 +-
 ghost/admin/assets/sass/layouts/default.scss  |   1 -
 ghost/admin/assets/sass/layouts/editor.scss   |   6 +-
 ghost/admin/assets/sass/layouts/settings.scss |  24 ++-
 ghost/admin/assets/sass/layouts/user.scss     |  25 ++-
 ghost/admin/templates/debug.hbs               | 102 ++++++-----
 ghost/admin/templates/settings/users/user.hbs | 158 +++++++++---------
 7 files changed, 185 insertions(+), 144 deletions(-)

diff --git a/ghost/admin/assets/sass/layouts/content.scss b/ghost/admin/assets/sass/layouts/content.scss
index b75bfdab7c..4a15e1f844 100644
--- a/ghost/admin/assets/sass/layouts/content.scss
+++ b/ghost/admin/assets/sass/layouts/content.scss
@@ -200,6 +200,7 @@
     @media (max-width: 900px) {
         width: 100%;
         border: none;
+        overflow: visible;
     }
 
     .unfeatured {
@@ -217,7 +218,7 @@
 
     .normal {
         text-transform: none;
-        margin:0 3px;
+        margin: 0 3px;
     }
 
     .content-preview-content {
@@ -225,8 +226,14 @@
         word-break: break-word;
         hyphens: auto;
 
-        @media (max-width:400px) {
-            padding: 0;
+        @media (max-width: 900px) {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
         }
 
         .wrapper {
diff --git a/ghost/admin/assets/sass/layouts/default.scss b/ghost/admin/assets/sass/layouts/default.scss
index b06b0fb7ae..fb5a565941 100644
--- a/ghost/admin/assets/sass/layouts/default.scss
+++ b/ghost/admin/assets/sass/layouts/default.scss
@@ -172,7 +172,6 @@
     background: #fff;
     overflow-y: auto;
     overflow-x: hidden;
-    -webkit-overflow-scrolling: touch;
 
     @media (max-width: 900px) {
         top: 44px;
diff --git a/ghost/admin/assets/sass/layouts/editor.scss b/ghost/admin/assets/sass/layouts/editor.scss
index e5d875826f..2825bb7a32 100644
--- a/ghost/admin/assets/sass/layouts/editor.scss
+++ b/ghost/admin/assets/sass/layouts/editor.scss
@@ -176,7 +176,7 @@
                 top: 40px;
             }
             @media (max-height: 560px) {
-                height: calc(100% - 40px);
+                height: calc(100% - 5px);
             }
 
             &:focus {
@@ -426,7 +426,7 @@ body.zen {
     padding: 0;
     color: $midgrey;
     background: darken($darkgrey, 4%);
-    position: fixed;
+    position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
@@ -701,7 +701,7 @@ body.zen {
 .post-settings {
     @include icon($i-settings, 14px);
     display: inline-block;
-    padding: 10px;
+    padding: 8px 10px;
     color: $midgrey;
     transition: all 0.15s ease-out 0s;
     position: relative;
diff --git a/ghost/admin/assets/sass/layouts/settings.scss b/ghost/admin/assets/sass/layouts/settings.scss
index 8bdba14b69..744da6ae25 100644
--- a/ghost/admin/assets/sass/layouts/settings.scss
+++ b/ghost/admin/assets/sass/layouts/settings.scss
@@ -138,7 +138,6 @@
 
 // The main content panel on the right
 .settings-content {
-    margin-left: 25%;
 
     @media (max-width: 900px) {
         &.fade-in {
@@ -146,6 +145,17 @@
         }
     }
 
+    @media (min-width: 901px) {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 25%;
+        bottom: 0;
+
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
     .settings-general img {
         max-width: 100%;
         max-height: 400px;
@@ -162,6 +172,18 @@
         @media (max-width: 550px) {
             padding-top: 15px;
         }
+
+        @media (max-width: 900px) {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+        }
+
     } // .content
 
     .word-count {
diff --git a/ghost/admin/assets/sass/layouts/user.scss b/ghost/admin/assets/sass/layouts/user.scss
index 6fbdaee76c..a9c495621e 100644
--- a/ghost/admin/assets/sass/layouts/user.scss
+++ b/ghost/admin/assets/sass/layouts/user.scss
@@ -4,6 +4,14 @@
 // Slug: /ghost/settings/users/username/
 // --------------------------------------------------
 
+.content.settings-user {
+    padding: 0;
+
+    @media (min-width: 901px) {
+        padding: 0 40px;
+    }
+}
+
 .user-actions-cog {
     padding: 9px 11px;
 }
@@ -12,7 +20,7 @@
     position: relative;
     width: auto;
     height: 300px;
-    margin: 0 40px;
+    margin: 0;
     background: #fafafa no-repeat center center;
     background-size: cover;
     overflow: hidden;
@@ -65,7 +73,7 @@
         left: 40px;
     }
     @media (min-width: 1001px) {
-        width: calc(100% - 221px);
+        width: calc(100% - 181px);
     }
 }
 
@@ -77,7 +85,6 @@
     }
 
     fieldset {
-        padding: 0 15px 0 40px;
         @media (max-width: 650px) {
             padding: 0 40px;
         }
@@ -125,14 +132,6 @@
 
 }
 
-@media (max-width: 550px) {
-    .user-details-top,
-    .user-details-bottom {
-        padding-left: 15px;
-        padding-right: 15px;
-    }
-}
-
 .user-image {
     display: block;
     position: absolute;
@@ -144,13 +143,13 @@
 
     @media (max-width: 650px) {
         top: -159px;
-        left: -19px;
+        left: 21px;
     }
     
     width: 126px;
     height: 126px;
     float: left;
-    margin-left: 34px;
+    margin-left: -6px;
     margin-right: 20px;
     text-align: center;
     border-radius: 100%;
diff --git a/ghost/admin/templates/debug.hbs b/ghost/admin/templates/debug.hbs
index bec835bc0a..6578315369 100644
--- a/ghost/admin/templates/debug.hbs
+++ b/ghost/admin/templates/debug.hbs
@@ -1,49 +1,59 @@
-<div class="wrapper settings-debug">
-    <aside class="settings-sidebar" role="complementary">
-        <header>
-            <h1 class="title">Ugly Debug Tools</h1>
-        </header>
-    </aside>
+<header class="page-header">
+    <button class="menu-button js-menu-button" {{action "toggleGlobalMobileNav"}}><span class="sr-only">Menu</span></button>
+    <h2 class="page-title">Settings</h2>
+</header>
 
-    <section class="settings-content active">
-        <section class="content">
+<div class="page-content">
+
+    <div class="settings-content">
+        
+        <header class="settings-view-header">
+            <h2 class="page-title">Ugly Debug Tools</h2>
+            <div class="js-settings-header-inner settings-header-inner">
+                {{#link-to 'settings' class='btn btn-default btn-back'}}Back{{/link-to}}
+            </div>
+        </header>
+
+        <section class="content settings-debug">
             <form id="settings-export">
-                <fieldset>
-                    <div class="form-group">
-                        <label>Export</label>
-                        <a class="btn btn-blue" {{action "exportData"}}>Export</a>
-                        <p>Export the blog settings and data.</p>
-                    </div>
-                </fieldset>
-            </form>
-            {{#gh-form id="settings-import" enctype="multipart/form-data"}}
-                <fieldset>
-                    <div class="form-group">
-                        <label>Import</label>
-                        {{partial "import-errors"}}
-                        {{gh-file-upload id="importfile" uploadButtonText=uploadButtonText}}
-                        <p>Import from another Ghost installation. If you import a user, this will replace the current user & log you out.</p>
-                    </div>
-                </fieldset>
-            {{/gh-form}}
-            <form id="settings-resetdb">
-                <fieldset>
-                    <div class="form-group">
-                        <label>Delete all Content</label>
-                        <a href="javascript:void(0);" class="btn btn-red js-delete" {{action "openModal" "deleteAll"}}>Delete</a>
-                        <p>Delete all posts and tags from the database.</p>
-                    </div>
-                </fieldset>
-            </form>
-            <form id="settings-testmail">
-                <fieldset>
-                    <div class="form-group">
-                        <label>Send a test email</label>
-                        <button type="submit" id="sendtestmail" class="btn btn-blue" {{action "sendTestEmail"}}>Send</button>
-                        <p>Sends a test email to your address.</p>
-                    </div>
-                </fieldset>
-            </form>
+                    <fieldset>
+                        <div class="form-group">
+                            <label>Export</label>
+                            <a class="btn btn-blue" {{action "exportData"}}>Export</a>
+                            <p>Export the blog settings and data.</p>
+                        </div>
+                    </fieldset>
+                </form>
+                {{#gh-form id="settings-import" enctype="multipart/form-data"}}
+                    <fieldset>
+                        <div class="form-group">
+                            <label>Import</label>
+                            {{partial "import-errors"}}
+                            {{gh-file-upload id="importfile" uploadButtonText=uploadButtonText}}
+                            <p>Import from another Ghost installation. If you import a user, this will replace the current user & log you out.</p>
+                        </div>
+                    </fieldset>
+                {{/gh-form}}
+                <form id="settings-resetdb">
+                    <fieldset>
+                        <div class="form-group">
+                            <label>Delete all Content</label>
+                            <a href="javascript:void(0);" class="btn btn-red js-delete" {{action "openModal" "deleteAll"}}>Delete</a>
+                            <p>Delete all posts and tags from the database.</p>
+                        </div>
+                    </fieldset>
+                </form>
+                <form id="settings-testmail">
+                    <fieldset>
+                        <div class="form-group">
+                            <label>Send a test email</label>
+                            <button type="submit" id="sendtestmail" class="btn btn-blue" {{action "sendTestEmail"}}>Send</button>
+                            <p>Sends a test email to your address.</p>
+                        </div>
+                    </fieldset>
+                </form>
         </section>
-    </section>
-</div>
+
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/ghost/admin/templates/settings/users/user.hbs b/ghost/admin/templates/settings/users/user.hbs
index b7fe39ad78..f60dd5775a 100644
--- a/ghost/admin/templates/settings/users/user.hbs
+++ b/ghost/admin/templates/settings/users/user.hbs
@@ -20,99 +20,103 @@
     </section>
 </header>
 
-<figure class="user-cover" {{bind-attr style=cover}}>
-    <button class="btn btn-default user-cover-edit js-modal-cover" {{action "openModal" "upload" user "cover"}}>Change Cover</button>
-</figure>
+<div class="content settings-user">
 
-<form class="user-profile" novalidate="novalidate" autocomplete="off">
+    <figure class="user-cover" {{bind-attr style=cover}}>
+        <button class="btn btn-default user-cover-edit js-modal-cover" {{action "openModal" "upload" user "cover"}}>Change Cover</button>
+    </figure>
 
-    {{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}}
-    <input style="display:none;" type="text" name="fakeusernameremembered"/>
-    <input style="display:none;" type="password" name="fakepasswordremembered"/>
+    <form class="user-profile" novalidate="novalidate" autocomplete="off">
 
-    <fieldset class="user-details-top">
+        {{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}}
+        <input style="display:none;" type="text" name="fakeusernameremembered"/>
+        <input style="display:none;" type="password" name="fakepasswordremembered"/>
 
-        <figure class="user-image">
-            <div id="user-image" class="img" {{bind-attr style=image}} href="#"><span class="hidden">{{name}}"s Picture</span></div>
-            <button type="button" {{action "openModal" "upload" user "image"}} class="edit-user-image js-modal-image">Edit Picture</button>
-        </figure>
+        <fieldset class="user-details-top">
 
-        <div class="form-group">
-            <label for="user-name">Full Name</label>
-            {{input value=user.name id="user-name" class="user-name" placeholder="Full Name" autocorrect="off"}}
-            <p>Use your real name so people can recognise you</p>
-        </div>
+            <figure class="user-image">
+                <div id="user-image" class="img" {{bind-attr style=image}} href="#"><span class="hidden">{{name}}"s Picture</span></div>
+                <button type="button" {{action "openModal" "upload" user "image"}} class="edit-user-image js-modal-image">Edit Picture</button>
+            </figure>
 
-    </fieldset>
+            <div class="form-group">
+                <label for="user-name">Full Name</label>
+                {{input value=user.name id="user-name" class="user-name" placeholder="Full Name" autocorrect="off"}}
+                <p>Use your real name so people can recognise you</p>
+            </div>
 
-    <fieldset class="user-details-bottom">
+        </fieldset>
 
-        <div class="form-group">
-            <label for="user-slug">Slug</label>
-            {{gh-input class="user-name" id="user-slug" value=slugValue name="user" focus-out="updateSlug" placeholder="Slug" selectOnClick="true" autocorrect="off"}}
-            <p>{{gh-blog-url}}/author/{{slugValue}}</p>
-        </div>
+        <fieldset class="user-details-bottom">
 
-        <div class="form-group">
-            <label for="user-email">Email</label>
-            {{input type="email" value=user.email id="user-email" placeholder="Email Address" autocapitalize="off" autocorrect="off" autocomplete="off"}}
-            <p>Used for notifications</p>
-        </div>
-        {{#if view.rolesDropdownIsVisible}}
-        <div class="form-group">
-            <label for="user-role">Role</label>
-            {{gh-role-selector
-                initialValue=role
-                onChange="changeRole"
-                selectId="user-role"}}
-            <p>What permissions should this user have?</p>
-        </div>
-        {{/if}}
-        <div class="form-group">
-            <label for="user-location">Location</label>
-            {{input type="text" value=user.location id="user-location"}}
-            <p>Where in the world do you live?</p>
-        </div>
+            <div class="form-group">
+                <label for="user-slug">Slug</label>
+                {{gh-input class="user-name" id="user-slug" value=slugValue name="user" focus-out="updateSlug" placeholder="Slug" selectOnClick="true" autocorrect="off"}}
+                <p>{{gh-blog-url}}/author/{{slugValue}}</p>
+            </div>
 
-        <div class="form-group">
-            <label for="user-website">Website</label>
-            {{input type="url" value=user.website id="user-website" autocapitalize="off" autocorrect="off" autocomplete="off"}}
-            <p>Have a website or blog other than this one? Link it!</p>
-        </div>
+            <div class="form-group">
+                <label for="user-email">Email</label>
+                {{input type="email" value=user.email id="user-email" placeholder="Email Address" autocapitalize="off" autocorrect="off" autocomplete="off"}}
+                <p>Used for notifications</p>
+            </div>
+            {{#if view.rolesDropdownIsVisible}}
+            <div class="form-group">
+                <label for="user-role">Role</label>
+                {{gh-role-selector
+                    initialValue=role
+                    onChange="changeRole"
+                    selectId="user-role"}}
+                <p>What permissions should this user have?</p>
+            </div>
+            {{/if}}
+            <div class="form-group">
+                <label for="user-location">Location</label>
+                {{input type="text" value=user.location id="user-location"}}
+                <p>Where in the world do you live?</p>
+            </div>
 
-        <div class="form-group bio-container">
-            <label for="user-bio">Bio</label>
-            {{textarea id="user-bio" value=user.bio}}
-            <p>
-                Write about you, in 200 characters or less.
-                {{gh-count-characters user.bio}}
-            </p>
-        </div>
+            <div class="form-group">
+                <label for="user-website">Website</label>
+                {{input type="url" value=user.website id="user-website" autocapitalize="off" autocorrect="off" autocomplete="off"}}
+                <p>Have a website or blog other than this one? Link it!</p>
+            </div>
 
-        <hr />
+            <div class="form-group bio-container">
+                <label for="user-bio">Bio</label>
+                {{textarea id="user-bio" value=user.bio}}
+                <p>
+                    Write about you, in 200 characters or less.
+                    {{gh-count-characters user.bio}}
+                </p>
+            </div>
 
-    </fieldset>
+            <hr />
 
-    <fieldset>
+        </fieldset>
 
-        <div class="form-group">
-            <label for="user-password-old">Old Password</label>
-            {{input value=user.password type="password" id="user-password-old"}}
-        </div>
+        <fieldset>
 
-        <div class="form-group">
-            <label for="user-password-new">New Password</label>
-            {{input value=user.newPassword type="password" id="user-password-new"}}
-        </div>
+            <div class="form-group">
+                <label for="user-password-old">Old Password</label>
+                {{input value=user.password type="password" id="user-password-old"}}
+            </div>
 
-        <div class="form-group">
-            <label for="user-new-password-verification">Verify Password</label>
-            {{input value=user.ne2Password type="password" id="user-new-password-verification"}}
-        </div>
-        <div class="form-group">
-            <button type="button" class="btn btn-red button-change-password" {{action "password"}}>Change Password</button>
-        </div>
+            <div class="form-group">
+                <label for="user-password-new">New Password</label>
+                {{input value=user.newPassword type="password" id="user-password-new"}}
+            </div>
 
-    </fieldset>
+            <div class="form-group">
+                <label for="user-new-password-verification">Verify Password</label>
+                {{input value=user.ne2Password type="password" id="user-new-password-verification"}}
+            </div>
+            <div class="form-group">
+                <button type="button" class="btn btn-red button-change-password" {{action "password"}}>Change Password</button>
+            </div>
 
-</form>
+        </fieldset>
+
+    </form>
+
+</div>
\ No newline at end of file