Merge pull request #67 from epochtalk/profile-mobile-layout

Profile mobile layout

Author: akinsey

src/components/users/UserPosts.vue

@@ -250,7 +250,7 @@ export default {
     }
     &.closed {
       width: 100%;
-      max-height: 18px;
+      max-height: 2.5rem;
       white-space: pre-wrap;
       overflow: hidden;
       text-overflow: ellipsis;

src/views/Posts.vue

@@ -138,8 +138,8 @@
             <router-link class="hide-mobile" :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
               <div class="original-poster" v-if="post.user.original_poster">OP</div>
               <div v-if="post.user.title" :title="('Title: ' + post.user.title)" class="user-activity"><span class="user-activity-value">{{post.user.title}}</span></div>
+              <div v-if="post.user.activity > -1" :title="('Activity: ' + post.user.activity)" class="user-activity">Activity: <span class="user-activity-value">{{post.user.activity}}</span></div>
               <div v-if="post.user.merit > -1" :title="('Merit: ' + post.user.merit)" class="user-activity">Merit: <span class="user-activity-value">{{post.user.merit}}</span></div>
-              <div v-if="post.user.activity > -1" :title="('Activity: ' + post.user.activity)" class="user-activity">Act: <span class="user-activity-value">{{post.user.activity}}</span></div>
             </router-link>
           </router-link>
 
@@ -169,8 +169,8 @@
               <router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }" class="user-activity-mobile">
                 <div class="original-poster" v-if="post.user.original_poster">OP</div>
                 <div v-if="post.user.title" :title="('Title: ' + post.user.title)" class="user-activity"><span class="user-activity-value">{{post.user.title}}</span></div>
+                <div v-if="post.user.activity > -1" :title="('Activity: ' + post.user.activity)" class="user-activity">Activity: <span class="user-activity-value">{{post.user.activity}}</span></div>
                 <div v-if="post.user.merit > -1" :title="('Merit: ' + post.user.merit)" class="user-activity">Merit: <span class="user-activity-value">{{post.user.merit}}</span></div>
-                <div v-if="post.user.activity > -1" :title="('Activity: ' + post.user.activity)" class="user-activity">Act: <span class="user-activity-value">{{post.user.activity}}</span></div>
               </router-link>
               <div class="timestamp">
                 <span>{{humanDate(post.created_at)}}</span>
@@ -1707,10 +1707,6 @@ ad-viewer {
       width: $postWidth__mobile;
     }
   }
-
-  @include break-mobile-sm {
-    padding-bottom: 3rem;
-  }
 }
 
 .thread-title {

src/views/Profile.vue

@@ -68,16 +68,16 @@
 
         <div class="profile-user-stats">
           <div class="stats">
+            <span class="label">Posts </span>
             <span class="stat-text">{{ user.post_count || 0 }}</span>
-            <span class="label">Posts</span>
           </div>
-          <div class="stats">
-            <span class="label">Last Seen </span>
-            <span class="stat-text-sm">{{ humanDate(user.last_active, true) }}</span>
+          <div v-if="user.last_active" class="stats">
+            <span class="label">Last Active </span>
+            <span class="stat-text">{{ humanDate(user.last_active, true) }}</span>
           </div>
           <div class="stats">
             <span class="label">Created </span>
-            <span class="stat-text-sm">{{ humanDate(user.created_at, true) }}</span>
+            <span class="stat-text">{{ humanDate(user.created_at, true) }}</span>
           </div>
         </div>
       </div>
@@ -492,7 +492,7 @@ export default {
         a { color: $text-gray-med; text-decoration: underline; }
       }
     }
-    .signature-block { display: flex; margin-bottom: 1rem; }
+    .signature-block { display: grid; margin-bottom: 1rem; }
     .signature {
       @include truncate-ellipsis;
       font-size: $font-size-xs;
@@ -507,7 +507,11 @@ export default {
   }
   .profile-user-stats {
     display: flex;
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
+    column-gap: 0.5rem;
+    @include break-mobile-med {
+      justify-content: center;
+    }
     .stats {
       border: $border;
       border-radius: 6px;
@@ -516,31 +520,36 @@ export default {
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      margin-right: 1rem;
       padding: 0.5rem;
       text-align: center;
-      width: 100px;
-      max-width: 120px;
-      .label { font-size: $font-size-xs; }
+      width: auto;
+      white-space: nowrap;
+      @include break-mobile-med {
+        width: 100px;
+        max-width: 120px;
+        white-space: normal;
+      }
+      .label { 
+        margin-bottom: 0.25rem;
+        font-size: $font-size-xs;
+       }
       .stat-text {
-        font-size: 2rem;
+        font-size: $font-size-lg;
         font-weight: 600;
         margin-bottom: 0.25rem;
-        &-sm { font-size: 21px; font-weight: 600; }
       }
     }
   }
   @include break-mobile-med {
     align-items: center;
     flex-direction: column;
     .profile-avatar {
-      margin-bottom: 3rem;
       margin-right: 0;
     }
     .profile-user-details {
       .profile-user-name-role {
         flex-direction: column;
-        margin-bottom: 1.5rem;
+        margin-bottom: 1rem;
         h1, .username-screen, .user-role {
           margin-bottom: 0.25rem;
         }
@@ -550,12 +559,16 @@ export default {
     .trust-profile { .trust-link { white-space: nowrap; } }
   }
 }
-.profile-threads-posts { grid-area: main; }
+.profile-threads-posts { 
+  grid-area: main;
+  @include break-mobile-med {
+    border-top: $border;
+  }
+}
 .profile-sidebar {
   color: $text-gray-dark;
   grid-area: sidebar;
   .actions-panel {
-    border-bottom: $border;
     line-height: 1.5;
     margin-bottom: 1rem;
     padding-bottom: 1rem;