UX: Improve user profile header layout on mobile

UX: Improve user profile header layout on mobile

diff --git a/app/assets/javascripts/discourse/templates/user.hbs b/app/assets/javascripts/discourse/templates/user.hbs
index 2279b2d..a794d52 100644
--- a/app/assets/javascripts/discourse/templates/user.hbs
+++ b/app/assets/javascripts/discourse/templates/user.hbs
@@ -36,10 +36,9 @@
       {{/if}}
     {{/unless}}
 
-      <div class='profile-image'></div>
       <div class='details'>
         <div class='primary'>
-          {{user-profile-avatar user=model}}
+          {{user-profile-avatar user=model tagName=""}}
           <section class='controls'>
             <ul>
               {{#if model.can_send_private_message_to_user}}
@@ -66,9 +65,10 @@
                 {{/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=""
                               connectorTagName="li"
                               args=(hash model=model)}}
 
@@ -89,24 +89,28 @@
           </section>
 
           <div class="primary-textual">
-            <h1 class="{{if nameFirst "full-name" "username"}}">{{if nameFirst model.name (format-username model.username)}} {{user-status model currentUser=currentUser}}</h1>
-            <h2 class="{{if nameFirst "username" "full-name"}}">{{#if nameFirst}}{{model.username}}{{else}}{{model.name}}{{/if}}</h2>
-            {{#if model.staged}}
-              <h2 class="staged">{{i18n 'user.staged'}}</h2>
-            {{/if}}
-            {{#if model.title}}
-              <h3>{{model.title}}</h3>
-            {{/if}}
-            {{plugin-outlet name="user-post-names" args=(hash model=model)}}
+            <div class="user-profile-names">
+              <h1 class="{{if nameFirst "full-name" "username"}}">{{if nameFirst model.name (format-username model.username)}} {{user-status model currentUser=currentUser}}</h1>
+              <h2 class="{{if nameFirst "username" "full-name"}}">{{#if nameFirst}}{{model.username}}{{else}}{{model.name}}{{/if}}</h2>
+              {{#if model.staged}}
+                <h2 class="staged">{{i18n 'user.staged'}}</h2>
+              {{/if}}
+              {{#if model.title}}
+                <h3>{{model.title}}</h3>
+              {{/if}}
+              {{plugin-outlet name="user-post-names" args=(hash model=model)}}
+            </div>
             <h3 class="location-and-website">
-            {{#if model.location}}{{d-icon "map-marker-alt"}} {{model.location}}{{/if}}
+            {{#if model.location}}<div class="user-profile-location">{{d-icon "map-marker-alt"}} {{model.location}}</div>{{/if}}
             {{#if model.website_name}}
+            <div class="user-profile-website">
               {{d-icon "globe"}}
               {{#if linkWebsite}}
                 <a href={{model.website}} rel={{unless removeNoFollow 'nofollow noopener'}} target="_blank">{{model.website_name}}</a>
               {{else}}
                 <span title={{model.website}}>{{model.website_name}}</span>
               {{/if}}
+              </div>
             {{/if}}
             {{plugin-outlet name="user-location-and-website" args=(hash model=model)}}
             </h3>
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index b678408..0f9b2a1 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -199,8 +199,8 @@
             font-size: $font-up-1;
             margin-top: 4px;
           }
-
-          h3 {
+          h3,
+          h3.location-and-website {
             display: none;
           }
         }
diff --git a/app/assets/stylesheets/common/foundation/spacing.scss b/app/assets/stylesheets/common/foundation/spacing.scss
index 01bc298..9acbb71 100644
--- a/app/assets/stylesheets/common/foundation/spacing.scss
+++ b/app/assets/stylesheets/common/foundation/spacing.scss
@@ -11,6 +11,8 @@ $base-space: 4px;
       // Strip units if 0
       $size: $size * $base-space;
       $size: $size / ($size * 0 + 1);
+    } @else if ($size == auto) {
+      $size: auto;
     } @else {
       $size: $size * $base-space;
     }
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index e03a940..6783764 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -149,7 +149,6 @@
 
     .details {
       padding: 0 0 4px 0;
-      margin-top: -200px;
       transition: margin 0.15s linear;
 
       img.avatar {
@@ -164,10 +163,14 @@
             text-decoration: underline;
           }
           .location-and-website {
+            display: flex;
             max-width: 100%;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+            .user-profile-location {
+              margin-right: 1em;
+            }
           }
         }
 
@@ -184,6 +187,7 @@
     &.has-background {
       .details {
         padding: 15px 15px 4px 15px;
+        margin-top: 240px;
       }
     }
 
@@ -221,6 +225,7 @@
 
       .details {
         padding: 0 0 2px 0;
+        margin-top: 0;
         border-bottom: 1px solid $primary-low;
       }
 
diff --git a/app/assets/stylesheets/mobile/user-badges.scss b/app/assets/stylesheets/mobile/user-badges.scss
new file mode 100644
index 0000000..dc43af5
--- /dev/null
+++ b/app/assets/stylesheets/mobile/user-badges.scss
@@ -0,0 +1,7 @@
+.show-badge-details {
+  margin-bottom: 1em;
+
+  .badge-grant-info {
+    display: none;
+  }
+}
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 97a78db..149e087 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -1,79 +1,33 @@
 // Mobile styles for "/user" section
-.user-right {
-  &,
-  > .user-stream {
-    > .alert:first-child {
-      margin-top: 20px;
-    }
-  }
-}
 
 .user-main {
-  margin-top: 10px;
-  table.group-members {
-    width: 100%;
-    p {
-      max-width: 600px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    th {
-      text-align: right;
-    }
-    td {
-      padding: 0.5em;
-      border-bottom: 1px solid $primary-low;
-      img {
-        margin-right: 10px;
-      }
-      span.text {
-        float: right;
-        color: $primary;
-      }
-    }
-    .user-info {
-      width: 245px;
-    }
-  }
+  margin-top: s(3);
 
   .user-content {
-    background-color: $secondary;
     box-sizing: border-box;
-    margin-top: 10px;
-
-    .btn.right {
-      float: right;
-    }
-
+    background-color: $secondary;
+    margin-top: s(3);
     table {
       width: 100%;
-      margin-top: 10px;
+      margin-top: s(3);
     }
   }
 
   .about {
-    background: dark-light-diff($primary, $secondary, 0%, -75%) center;
-    margin-bottom: 10px;
+    margin-bottom: 0;
     color: $secondary;
 
-    &.no-background {
-      .profile-image {
-        display: none;
-      }
-    }
-
     .secondary {
+      margin-bottom: s(3);
       dl {
-        padding: 5px 0;
+        padding: s(2) 0;
       }
     }
 
     .details {
-      padding: 15px 5px 5px 5px;
+      background: $secondary;
 
       h1 {
-        margin: 0;
         line-height: $line-height-small;
       }
 
@@ -81,32 +35,82 @@
         line-height: $line-height-medium;
       }
 
-      .primary {
+      .user-profile-avatar {
+        .avatar-flair {
+          right: 2px;
+        }
+        display: block;
+        float: none;
+        margin: s(2 auto);
+        img.avatar {
+          float: none;
+        }
+      }
+
+      .user-profile-names {
+        text-align: center;
+      }
+

[... diff too long, it was truncated ...]

GitHub sha: 88a3b899