UX: Improve user profile header layout on mobile

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>
+            <div class="user-profile-names">
-            <h2 class="{{if nameFirst "username" "full-name"}}">{{#if nameFirst}}{{model.username}}{{else}}{{model.name}}{{/if}}</h2>
+              <h1 class="{{if nameFirst "full-name" "username"}}">{{if nameFirst model.name (format-username model.username)}} {{user-status model currentUser=currentUser}}</h1>
-            {{#if model.staged}}
+              <h2 class="{{if nameFirst "username" "full-name"}}">{{#if nameFirst}}{{model.username}}{{else}}{{model.name}}{{/if}}</h2>
-              <h2 class="staged">{{i18n 'user.staged'}}</h2>
+              {{#if model.staged}}
-            {{/if}}
+                <h2 class="staged">{{i18n 'user.staged'}}</h2>
-            {{#if model.title}}
+              {{/if}}
-              <h3>{{model.title}}</h3>
+              {{#if model.title}}
-            {{/if}}
+                <h3>{{model.title}}</h3>
-            {{plugin-outlet name="user-post-names" args=(hash model=model)}}
+              {{/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>

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;
           }
         }

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;
     }

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;
       }
 

app/assets/stylesheets/mobile/user-badges.scss

@@ -0,0 +1,7 @@
+.show-badge-details {
+  margin-bottom: 1em;
+
+  .badge-grant-info {
+    display: none;
+  }
+}

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;
+  margin-top: s(3);
-  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;
-    }
-  }
 
   .user-content {
-    background-color: $secondary;
     box-sizing: border-box;
-    margin-top: 10px;
+    background-color: $secondary;
-
+    margin-top: s(3);
-    .btn.right {
-      float: right;
-    }
-
     table {
       width: 100%;
-      margin-top: 10px;
+      margin-top: s(3);
     }
   }
 
   .about {
-    background: dark-light-diff($primary, $secondary, 0%, -75%) center;
+    margin-bottom: 0;
-    margin-bottom: 10px;
     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 {
-        display: flex;
+        .avatar-flair {
-        flex-wrap: wrap;
+          right: 2px;
-        color: $primary;
-
-        .avatar {
-          margin: 0 5px 10px 5px;
         }
-
+        display: block;
-        .primary-textual {
+        float: none;
-          flex: 1 1 40%;
+        margin: s(2 auto);
-          padding-left: 5px;
+        img.avatar {
-          word-break: break-word;
+          float: none;
-          a[href] {
-            color: $primary;
-          }
-        }
-
-        .bio {
-          color: $primary;
-          max-width: 700px;
         }
       }
 
-      .user-profile-avatar .avatar-flair {
+      .user-profile-names {
-        right: 2px;
+        text-align: center;
+      }
+
+      .location-and-website {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        font-size: $font-0;
+        .d-icon {
+          width: 0.8em;
+          height: 0.8em;
+          margin-right: 0.25em;
+        }
+        a {
+          text-decoration: underline;
+        }
+      }
+
+      .user-profile-location {
+        margin-right: 1em;
+      }
+
+      .user-profile-location,
+      .user-profile-website {
+        justify-content: center;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .primary {
+      display: flex;
+      flex-wrap: wrap;
+      color: $primary;
+
+      .avatar {
+        margin: 0 0 s(3);
+      }
+
+      .primary-textual {
+        flex: 1 1 100%;
+        word-break: break-word;
+        margin: 0;
+      }
+
+      .bio {
+        color: $primary;
+        margin: 0 auto s(2);
+        max-width: 700px;
+        text-align: center;
+      }
+    }
+
+    &.has-background {
+      background-size: contain;
+      background-position: top center;
+      background-repeat: no-repeat;
+
+      .user-profile-avatar {
+        margin-top: s(-24);
+      }
+      .details {
+        margin-top: 200px;
       }
     }
 
@@ -120,17 +124,17 @@
         display: flex;
         flex: 1 1 auto;
         flex-wrap: wrap;
-      }
+        margin-left: -1em;
-
+        li,
-      li {
+        > span {
-        display: flex;
+          display: flex;
-        flex: 1 1 auto;
+          flex: 1 1 45%;
-        margin: 0 5px;
+          margin-left: 1em;
-      }
+          button,
-
+          a {
-      span {
+            width: 100%;
-        flex: 0 1 100%;
+          }
-        margin: 0 5px;
+        }
       }
 
       .user-profile-controls-outlet {
@@ -145,22 +149,6 @@
         min-width: 120px;
       }
     }
-
-    &.collapsed-info {
-      .details {
-        .primary {
-          .primary-textual {
-            margin: 0 10px 5px 0;
-          }
-          .avatar {
-            margin: 0 5px 10px 5px;
-          }
-        }
-      }
-      .user-profile-avatar .avatar-flair {
-        bottom: 12px;
-      }
-    }
   }
 
   .user-field {
@@ -172,13 +160,31 @@
   }
 }
 
-.profile-image {
+.user-main .collapsed-info.about.has-background {
-  height: 25px;
+  background-image: none !important; // todo: make changes to behavior to remove this
-  width: 100%;
+  .details {
+    margin-top: 0;
+  }
 }
 
-.has-background .details {
+.user-main .collapsed-info.about .details {
-  margin-top: 200px;
+  display: flex;
+  .user-profile-avatar {
+    margin: 0;
+    flex: 0 0 auto;
+    align-self: flex-start;
+  }
+  .primary .primary-textual {
+    flex: 1 0 80%;
+    margin: 0;
+  }
+  .user-profile-names {
+    text-align: left;
+  }
+  .controls {
+    margin: s(2) 0 s(3);
+    border-bottom: 1px solid $primary-low;
+  }
 }
 
 .form-horizontal .control-group.category {
@@ -201,7 +207,6 @@
   }
 }
 
-// mobile fixups for badges
 .badge-card.medium {
   width: 100%;
 }
@@ -210,40 +215,13 @@
   margin-bottom: 2em;
 }
 
-.show-badge-details {
-  margin-bottom: 1em;
-
-  .badge-grant-info {
-    display: none;
-  }
-}
-
 .user-preferences {
   .instructions {
-    margin-top: 5px;
+    margin-top: s(1);
-  }
-
-  .category-controls {
-    padding-top: 8px;
   }
 
   .controls-dropdown {
-    margin-top: 10px;
+    margin-bottom: s(4);
-    margin-bottom: 15px;
-
-    select {
-      width: 280px;
-    }
-  }
-
-  .save-button {
-    width: 100%;
-    overflow: auto;
-    max-width: 200px;
-
-    button {
-      display: block;
-    }
   }
 
   .delete-account {
@@ -261,10 +239,20 @@
     }
   }
 
-  .desktop-notifications button {
-    float: none;
-  }
   .apps .controls button {
     float: right;
   }
 }
+
+.staff-counters {
+  margin-bottom: s(4);
+}
+
+.user-right {
+  &,
+  > .user-stream {
+    > .alert:first-child {
+      margin-top: 20px;
+    }
+  }
+}