Merge pull request #2648 from riking/mobile-user-page

Style & structure fixes for mobile user page

app/assets/javascripts/discourse/templates/user/user.js.handlebars

@@ -66,8 +66,9 @@
               {{#if number_of_flagged_posts}}
                 <div>
                   {{#link-to 'user.flaggedPosts' this}}
-                    <span class="pill flagged-posts">{{number_of_flagged_posts}}</span>&nbsp;{{i18n user.staff_counters.flagged_posts}}</div>
+                    <span class="pill flagged-posts">{{number_of_flagged_posts}}</span>&nbsp;{{i18n user.staff_counters.flagged_posts}}
                   {{/link-to}}
+                </div>
               {{/if}}
               {{#if number_of_deleted_posts}}
                 <div>

app/assets/stylesheets/desktop/user.scss

@@ -203,6 +203,11 @@
 
         h1, h2 {font-weight: bold;}
 
+        .primary-textual {
+          background: rgba($primary, 0.2);
+          padding: 3px;
+        }
+
         .bio {
           color: dark-light-diff($secondary, $primary, 75%, 0%);
           text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;

app/assets/stylesheets/mobile/user.scss

@@ -147,16 +147,30 @@
         img {
           max-width: 100%;
         }
+
+        .primary-textual {
+          width: 90%;
+          margin: 0 auto;
+          padding: 4px;
+          background: rgba($primary, 0.3);
+
+          h1, h2 {
+            margin: 7px;
+          }
+        }
       }
 
       .secondary {
         background-color: $primary;
         text-align: left;
-        padding: 0 10px;
+        padding: 1px 10px;
 
         dd {
           color: $secondary;
           margin: 0 0 7px 0;
+          a {
+            color: inherit;
+          }
         }
         dt {
           color: scale-color($primary, $lightness: 75%);
@@ -274,8 +288,10 @@
 
   .staff-counters {
     text-align: center;
-    > div {
+    div {
+      padding: 2px 8px;
       margin-bottom: 10px;
+      display: inline-block;
     }
     a.active {
       font-weight: bold;