UX: Minor profile page restructure

app/assets/javascripts/discourse/templates/user.hbs

@@ -1,8 +1,9 @@
 <div class="container {{if viewingSelf 'viewing-self'}}">
   {{#d-section class="user-main"}}
 
-    <section class="{{if collapsedInfo 'collapsed-info'}} about {{if hasProfileBackground 'has-background' 'no-background'}}"  style={{model.profileBackground}}>
+    <section class="{{if collapsedInfo 'collapsed-info'}} about {{if hasProfileBackground 'has-background' 'no-background'}}" >
     {{#unless collapsedInfo}}
+    <div class="user-profile-image" style={{model.profileBackground}}></div>
       {{#if showStaffCounters}}
         <div class='staff-counters'>
           {{#if model.number_of_flags_given}}
@@ -146,9 +147,6 @@
             {{plugin-outlet name="user-profile-primary" args=(hash model=model)}}
           </div>
         </div>
-        <div style='clear: both'></div>
-      </div>
-
         {{#unless collapsedInfo}}
         <div class='secondary'>
           <dl>
@@ -201,6 +199,9 @@
           {{plugin-outlet name="user-profile-secondary" args=(hash model=model)}}
         </div>
         {{/unless}}
+      </div>
+
+
     </section>
 
     <div class='user-content-wrapper'>

app/assets/stylesheets/common/base/user.scss

@@ -101,9 +101,9 @@
     margin-bottom: 15px;
 
     .secondary {
-      background: $secondary;
+      display: inline-block;
+      width: 100%;
       border-top: 1px solid $primary-low;
-      border-bottom: 1px solid $primary-low;
 
       .btn {
         padding: 4px 12px;
@@ -155,6 +155,7 @@
 
     .details {
       background: rgba($secondary, 0.8);
+      border-bottom: 1px solid $primary-low;
 
       h1 {
         font-size: $font-up-5;
@@ -196,7 +197,6 @@
       .primary {
         width: 100%;
         position: relative;
-        float: left;
 
         h1 {
           font-weight: bold;

app/assets/stylesheets/desktop/user.scss

@@ -103,9 +103,6 @@
   margin-bottom: 50px;
 
   .about {
-    background-position: center center;
-    background-size: cover;
-
     &.group {
       .details {
         padding: 15px 0;
@@ -115,12 +112,8 @@
     }
 
     .details {
-      padding-bottom: s(2);
-      transition: margin 0.15s linear;
-
       img.avatar {
         margin: 0 20px 10px 0;
-        transition: all 0.1s linear;
       }
 
       .primary {
@@ -149,12 +142,23 @@
           }
         }
       }
+
+      .secondary {
+        margin-top: s(4);
+      }
     }
 
     &.has-background {
+      .user-profile-image {
+        height: 300px;
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
       .details {
-        padding: 15px 15px 4px 15px;
+        box-sizing: border-box;
-        margin-top: 240px;
+        width: 100%;
+        padding: 15px 0 0 0;
+        bottom: 0;
       }
     }
 
@@ -169,11 +173,14 @@
     }
 
     &.collapsed-info {
+      .user-profile-image {
+        display: none;
+      }
       .controls {
         width: auto;
 
-        ul {
+        > ul {
-          li {
+          > li {
             display: inline;
           }
 
@@ -185,16 +192,11 @@
       }
 
       .details {
-        padding: 0 0 2px 0;
+        position: relative;
+        padding: 0;
         margin-top: 0;
         border-bottom: 1px solid $primary-low;
       }
-
-      &.has-background {
-        .details {
-          padding: 12px 15px 2px 15px;
-        }
-      }
     }
   }
 

app/assets/stylesheets/mobile/user.scss

@@ -47,14 +47,13 @@
     color: $secondary;
 
     .secondary {
-      margin-bottom: s(3);
       dl {
         padding: s(2) 0;
       }
     }
 
     .details {
-      background: $secondary;
+      margin-bottom: s(3);
 
       h1 {
         line-height: $line-height-small;
@@ -131,16 +130,15 @@
     }
 
     &.has-background {
+      .user-profile-image {
+        height: 200px;
         background-size: contain;
         background-position: top center;
         background-repeat: no-repeat;
-
+      }
       .user-profile-avatar {
         margin-top: s(-24);
       }
-      .details {
-        margin-top: 200px;
-      }
     }
 
     .controls {
@@ -163,6 +161,13 @@
           a {
             width: 100%;
           }
+          .select-kit.dropdown-select-box.user-notifications-dropdown {
+            width: 100%;
+            li {
+              flex: 1 1 100%;
+              margin-left: 0;
+            }
+          }
         }
       }
 
@@ -210,10 +215,6 @@
   .user-profile-names {
     text-align: left;
   }
-  .controls {
-    margin: s(2) 0 s(3);
-    border-bottom: 1px solid $primary-low;
-  }
 }
 
 .form-horizontal .control-group.category {