Merge branch 'fix-profile' into GUI-2.0

* fix-profile:
  Fix up user profile screen

core/client/assets/sass/layouts/user.scss

@@ -0,0 +1,178 @@
+//
+// Users
+// --------------------------------------------------
+// Slug: /ghost/settings/users/username/
+// --------------------------------------------------
+
+.user-cover {
+    position: relative;
+    width: auto;
+    height: 300px;
+    margin: 0 40px;
+    background: #fafafa no-repeat center center;
+    background-size: cover;
+    overflow: hidden;
+
+    @media (max-width: 900px) {
+        margin: 0 15px;
+    }
+
+    // Gradient overlay
+    &:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 110px;
+        @include linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.18) );
+    }
+}
+
+.user-cover-edit {
+    position: absolute;
+    right: 35px;
+    bottom: 34px;
+    min-height: 34px;
+    height: 34px;
+    background: rgba(0,0,0,0.3);
+    border-radius: 0;
+    color: rgba(255,255,255,0.8);
+    z-index: 2;
+    border-radius: $rounded;
+    @include transition(
+        color 0.3s ease,
+        background 0.3s ease
+    );
+    @media (max-width: 1000px) {
+        right: 15px;
+    }
+
+    &:hover {
+        color: #fff;
+        background: rgba(0,0,0,0.5);
+    }
+}
+
+.user-image + .form-group {
+    margin-top: 155px;
+    max-width: 500px;
+    @media (min-width: 651px) and (max-width: 1000px) {
+        width: calc(100% - 201px);
+    }
+    @media (min-width: 651px) {
+        min-width: 285px;
+        margin-top: 0;
+        top: -110px;
+        left: 40px;
+    }
+    @media (min-width: 1001px) {
+        width: calc(100% - 221px);
+    }
+}
+
+.user-profile {
+    position: relative;
+    top: -110px;
+    z-index: 1;
+    @media (min-width: 651px) {
+        padding-left: 143px;
+    }
+
+    fieldset {
+        padding: 0 0 0 40px;
+    }
+
+    textarea {
+        min-width: 240px;
+    }
+}
+
+.user-details-top {
+
+    @media (max-width: 650px) {
+        margin-bottom: 10px;
+    }
+
+    @media (min-width: 651px) {
+        margin-bottom: 0;
+        padding: 0;
+        p {
+            color: #fff;
+        }
+    }
+
+    .user-name {
+        border-color: #fff;
+    }
+
+}
+
+@media (max-width: 550px) {
+    .user-details-top,
+    .user-details-bottom {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+}
+
+.user-image {
+    display: block;
+    position: relative;
+    width: 126px;
+    height: 126px;
+    float: left;
+    margin-left: 34px;
+    margin-right: 20px;
+    text-align: center;
+    border-radius: 100%;
+    overflow: hidden;
+    padding: 3px;
+    background: #fff;
+    z-index: 2;
+
+    margin-left: -104px;
+
+    @media (max-width: 550px) {
+        margin-left: 0px;
+    }
+
+    @media (min-width: 551px) and (max-width: 650px) {
+        margin-left: 20px;
+    }
+
+    .img {
+        display: block;
+        width: 120px;
+        height: 120px;
+        background-size: cover;
+        background-position: center center;
+        border-radius: 100%;
+    }
+
+    &:hover {
+        .edit-user-image {
+            opacity: 1;
+        }
+    }
+}
+
+.edit-user-image {
+    @include position(absolute, 3px 3px 3px 3px);
+    border-radius: 100%;
+    width: calc(100% - 6px);
+    background: rgba(0,0,0,0.5);
+    opacity: 0;
+    color: #fff;
+    line-height: 120px;
+    text-transform: uppercase;
+    text-decoration: none;
+    @include transition(opacity 0.3s ease);
+}
+
+.user-details-bottom {
+    padding: 0 40px;
+    @media (min-width: 651px) {
+        margin: -104px 0 0 0;
+    }
+}

core/client/assets/sass/screen.scss

@@ -57,5 +57,6 @@
 @import "layouts/post-settings-menu";
 @import "layouts/settings";
 @import "layouts/users";
+@import "layouts/user";
 @import "layouts/about";
 @import "layouts/error";