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}}
@@ -12,7 +13,7 @@
             <div>
               {{#link-to 'review' (query-params username=model.username status='all' type='ReviewableFlaggedPost')}}
                 <span class="flagged-posts">{{model.number_of_flagged_posts}}</span>{{i18n 'user.staff_counters.flagged_posts'}}
-              {{/link-to}} 
+              {{/link-to}}
             </div>
           {{/if}}
           {{#if model.number_of_deleted_posts}}
@@ -55,7 +56,7 @@
                 {{/if}}
               {{/if}}
               {{#if currentUser.staff}}
-                <li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}{{i18n 'admin.user.show_admin_profile'}}</a></li>          
+                <li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}{{i18n 'admin.user.show_admin_profile'}}</a></li>
               {{/if}}
               {{plugin-outlet name="user-profile-controls"
                               tagName=""
@@ -146,61 +147,61 @@
             {{plugin-outlet name="user-profile-primary" args=(hash model=model)}}
           </div>
         </div>
-        <div style='clear: both'></div>
+        {{#unless collapsedInfo}}
+        <div class='secondary'>
+          <dl>
+            {{#if model.created_at}}
+              <div><dt>{{i18n 'user.created'}}</dt><dd>{{bound-date model.created_at}}</dd></div>
+            {{/if}}
+            {{#if model.last_posted_at}}
+              <div><dt>{{i18n 'user.last_posted'}}</dt><dd>{{bound-date model.last_posted_at}}</dd></div>
+            {{/if}}
+            {{#if model.last_seen_at}}
+              <div><dt>{{i18n 'user.last_seen'}}</dt><dd>{{bound-date model.last_seen_at}}</dd></div>
+            {{/if}}
+            <div><dt>{{i18n 'views'}}</dt><dd>{{model.profile_view_count}}</dd></div>
+            {{#if model.invited_by}}
+              <div><dt class="invited-by">{{i18n 'user.invited_by'}}</dt><dd class="invited-by">{{#link-to 'user' model.invited_by}}{{model.invited_by.username}}{{/link-to}}</dd></div>
+            {{/if}}
+            {{#if model.trust_level}}
+              <div><dt class="trust-level">{{i18n 'user.trust_level'}}</dt><dd class="trust-level">{{model.trustLevel.name}}</dd></div>
+            {{/if}}
+            {{#if canCheckEmails}}
+              <div><dt>{{i18n 'user.email.title'}}</dt>
+              <dd title={{model.email}}>
+                {{#if model.email}}
+                  {{model.email}}
+                {{else}}
+                  {{d-button action=(route-action "checkEmail") actionParam=model icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
+                {{/if}}
+              </dd>
+              </div>
+            {{/if}}
+
+            {{#if model.displayGroups}}
+              <div><dt class="groups">{{i18n 'groups.title' count=model.displayGroups.length}}</dt>
+              <dd class='groups'>
+                {{#each model.displayGroups as |group|}}
+                  <span>{{#link-to 'group' group.name class="group-link"}}{{group.name}}{{/link-to}}</span>
+                {{/each}}
+
+                {{#link-to "groups" (query-params username=model.username)}}
+                  ...
+                {{/link-to}}
+              </dd>
+              </div>
+            {{/if}}
+
+            {{#if canDeleteUser}}
+              <div>{{d-button action=(action "adminDelete") icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}</div>
+            {{/if}}
+          </dl>
+          {{plugin-outlet name="user-profile-secondary" args=(hash model=model)}}
+        </div>
+        {{/unless}}
       </div>
 
-      {{#unless collapsedInfo}}
-      <div class='secondary'>
-        <dl>
-          {{#if model.created_at}}
-            <div><dt>{{i18n 'user.created'}}</dt><dd>{{bound-date model.created_at}}</dd></div>
-          {{/if}}
-          {{#if model.last_posted_at}}
-            <div><dt>{{i18n 'user.last_posted'}}</dt><dd>{{bound-date model.last_posted_at}}</dd></div>
-          {{/if}}
-          {{#if model.last_seen_at}}
-            <div><dt>{{i18n 'user.last_seen'}}</dt><dd>{{bound-date model.last_seen_at}}</dd></div>
-          {{/if}}
-          <div><dt>{{i18n 'views'}}</dt><dd>{{model.profile_view_count}}</dd></div>
-          {{#if model.invited_by}}
-            <div><dt class="invited-by">{{i18n 'user.invited_by'}}</dt><dd class="invited-by">{{#link-to 'user' model.invited_by}}{{model.invited_by.username}}{{/link-to}}</dd></div>
-          {{/if}}
-          {{#if model.trust_level}}
-            <div><dt class="trust-level">{{i18n 'user.trust_level'}}</dt><dd class="trust-level">{{model.trustLevel.name}}</dd></div>
-          {{/if}}
-          {{#if canCheckEmails}}
-            <div><dt>{{i18n 'user.email.title'}}</dt>
-            <dd title={{model.email}}>
-              {{#if model.email}}
-                {{model.email}}
-              {{else}}
-                {{d-button action=(route-action "checkEmail") actionParam=model icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
-              {{/if}}
-            </dd>
-            </div>
-          {{/if}}
 
-          {{#if model.displayGroups}}
-            <div><dt class="groups">{{i18n 'groups.title' count=model.displayGroups.length}}</dt>
-            <dd class='groups'>
-              {{#each model.displayGroups as |group|}}
-                <span>{{#link-to 'group' group.name class="group-link"}}{{group.name}}{{/link-to}}</span>
-              {{/each}}
-
-              {{#link-to "groups" (query-params username=model.username)}}
-                ...
-              {{/link-to}}
-            </dd>
-            </div>
-          {{/if}}
-
-          {{#if canDeleteUser}}
-            <div>{{d-button action=(action "adminDelete") icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}</div>
-          {{/if}}
-        </dl>
-        {{plugin-outlet name="user-profile-secondary" args=(hash model=model)}}
-      </div>
-      {{/unless}}
     </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 {
-      background-size: contain;
+      .user-profile-image {
-      background-position: top center;
+        height: 200px;
-      background-repeat: no-repeat;
+        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 {