From ecf5d045f3a618d62a099f5631a6388fb0ddabb9 Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Thu, 4 Sep 2014 15:03:07 +0100
Subject: [PATCH] Fix user profile settings

References #3810, #3944

- Fixes several small visual bugs with the user settings page
- Changes `.settings-subview-header` to use a clearfix instead of `overflow: hidden;` (fixing style issues in #3944)
---
 core/client/assets/sass/layouts/settings.scss |  4 +--
 core/client/assets/sass/layouts/user.scss     | 36 ++++++++++++++-----
 core/client/templates/settings/users/user.hbs |  2 +-
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss
index e32d2d44ac..8cb0d80ea0 100644
--- a/core/client/assets/sass/layouts/settings.scss
+++ b/core/client/assets/sass/layouts/settings.scss
@@ -156,7 +156,7 @@
             padding-right: 15px;
         }
         @media (max-width: 550px) {
-            padding: 0 15px 40px;
+            padding-top: 15px;
         }
     } // .content
 
@@ -238,6 +238,7 @@
 // This is the header for /ghost/settings/view/subview/
 // It's black and fixed position at the top of the screen
 .settings-subview-header {
+    @include clearfix;
     position: fixed;
     top: 0;
     left: 0;
@@ -248,7 +249,6 @@
     text-align: center;
     color: #fff;
     background: #242628;
-    overflow: hidden;
 
     .btn-back {
         position: absolute;
diff --git a/core/client/assets/sass/layouts/user.scss b/core/client/assets/sass/layouts/user.scss
index bf019d3ce2..b2baa123ac 100644
--- a/core/client/assets/sass/layouts/user.scss
+++ b/core/client/assets/sass/layouts/user.scss
@@ -4,6 +4,10 @@
 // Slug: /ghost/settings/users/username/
 // --------------------------------------------------
 
+.user-actions-cog {
+    padding: 9px 11px;
+}
+
 .user-cover {
     position: relative;
     width: auto;
@@ -14,7 +18,7 @@
     overflow: hidden;
 
     @media (max-width: 900px) {
-        margin: 0 15px;
+        margin: 0;
     }
 
     // Gradient overlay
@@ -32,13 +36,13 @@
 .user-cover-edit {
     position: absolute;
     right: 35px;
-    bottom: 34px;
-    min-height: 34px;
-    height: 34px;
+    bottom: 29px;
+    min-height: 37px;
+    height: 37px;
     background: rgba(0,0,0,0.3);
-    border-radius: 0;
     color: rgba(255,255,255,0.8);
     z-index: 2;
+    border-width: 0;
     border-radius: $rounded;
     transition: color 0.3s ease, background 0.3s ease;
     @media (max-width: 1000px) {
@@ -77,7 +81,13 @@
     }
 
     fieldset {
-        padding: 0 0 0 40px;
+        padding: 0 15px 0 40px;
+        @media (max-width: 650px) {
+            padding: 0 40px;
+        }
+        @media (max-width: 550px) {
+            padding: 0 15px;
+        }
     }
 
     textarea {
@@ -89,6 +99,11 @@
 
     @media (max-width: 650px) {
         margin-bottom: 10px;
+        label[for='user-name'] { // Reverse the affects of .sr-only
+            position: static;
+            width: auto;
+            height: auto;
+        }
     }
 
     @media (min-width: 651px) {
@@ -97,10 +112,15 @@
         p {
             color: #fff;
         }
+        .user-name {
+            border-color: #fff;
+        }
     }
 
-    .user-name {
-        border-color: #fff;
+    @media (min-width: 901px) {
+        .user-name {
+            width: calc(100% - 20px);
+        }
     }
 
 }
diff --git a/core/client/templates/settings/users/user.hbs b/core/client/templates/settings/users/user.hbs
index 723e8e91b9..61f1ef3e6c 100644
--- a/core/client/templates/settings/users/user.hbs
+++ b/core/client/templates/settings/users/user.hbs
@@ -21,7 +21,7 @@
 </header>
 
 <figure class="user-cover" {{bind-attr style=cover}}>
-    <button class="user-cover-edit js-modal-cover" {{action "openModal" "upload" user "cover"}}>Change Cover</button>
+    <button class="btn btn-default user-cover-edit js-modal-cover" {{action "openModal" "upload" user "cover"}}>Change Cover</button>
 </figure>
 
 <form class="user-profile" novalidate="novalidate" autocomplete="off">