Server migration

src/components/layout/HeaderComponent.vue

@@ -1113,6 +1113,6 @@ header {
 }
 
 @include break-mobile-sm {
-  #header-spacer { margin-bottom: 1.5rem; }
+  #header-spacer { margin-bottom: 3.5rem; }
 }
 </style>

src/components/layout/Pagination.vue

@@ -10,7 +10,7 @@
          </div>
         </div>
       </li>
-      <span v-for="pageKey in paginationKeys" :key="pageKey.val">
+      <span v-for="pageKey in paginationKeys" :key="pageKey.key">
         <li :class="pageKey.class">
           <a href="#" @click.stop.prevent="changePage(pageKey.page)" v-html="pageKey.val"></a>
         </li>
@@ -69,23 +69,23 @@ export default {
 
       // Case 2: Truncate Tail
       // 1 2 3 4 5 [6] 7 8 ... 14 15 16
-      if (truncate && v.currentPage <= 6)
+      if (truncate && (v.mobile ? v.currentPage <= 3 : v.currentPage <= 6))
         if (v.mobile) 
           ellipsis = [{ index: 4, nextIndex: v.pageCount - 2 }]
         else
           ellipsis = [{ index: 9, nextIndex: v.pageCount - 2 }]
 
       // Case 3: Truncate Head
       // 1 2 3 ... 9 10 [11] 12 13 14 15 16
-      else if (truncate && v.currentPage >= v.pageCount - 5)
+      else if (truncate && (v.mobile ? v.currentPage >= v.pageCount - 2 : v.currentPage >= v.pageCount - 5))
         if (v.mobile) 
           ellipsis = [{ index: 4, nextIndex: v.pageCount - 2 }]
         else
           ellipsis = [{ index: 4, nextIndex: v.pageCount - 8 }]
 
       // Case 4: Truncate Head and Tail
       // 1 2 3 ... 7 8 [9] 10 11 ... 14 15 16
-      else if (truncate && v.currentPage > 6 && v.currentPage < v.pageCount - 5) 
+      else if (truncate && (v.mobile ? v.currentPage > 3 : v.currentPage > 6) && (v.mobile ? v.currentPage < v.pageCount - 2 : v.currentPage < v.pageCount - 5)) 
         if (v.mobile) 
           ellipsis = [
             { index: 2, nextIndex: v.currentPage - 1 },
@@ -102,7 +102,7 @@ export default {
 
     const generatePageKeys = (ellipsis) => {
       // Add Previous Button
-      let prevBtnKey = { val: '&#10094;' }
+      let prevBtnKey = { key: 'prev', val: '&#10094;' }
       if (v.currentPage > 1) {
         prevBtnKey.class = 'arrow'
         prevBtnKey.page = v.currentPage - 1
@@ -122,6 +122,7 @@ export default {
         // Insert ellipsis if index matches
         if (ellipsis && ellipsis[ellipsisIndex] && ellipsis[ellipsisIndex].index === index) {
           pageKey = {
+            key: index,
             val: '&hellip;',
             page: null,
             class: 'unavailable'
@@ -132,6 +133,7 @@ export default {
         // Otherwise generate page key
         else {
           pageKey = {
+            key: index,
             val: index,
             page: index,
             class: index === v.currentPage ? 'current' : null
@@ -142,7 +144,7 @@ export default {
       }
 
       // Add Next Button
-      let nextBtnKey = { val: '&#10095;' }
+      let nextBtnKey = { key: 'next', val: '&#10095;' }
       if (v.currentPage < v.pageCount) {
         nextBtnKey.class = 'arrow'
         nextBtnKey.page = v.currentPage + 1

src/components/users/UserPosts.vue

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

src/views/Boards.vue

@@ -56,7 +56,7 @@
                 <div class="view-count">
                   <p class="view-count-posts">
                     <span class="view-count-number">{{board.total_post_count}}</span>
-                     <span class="label"> posts,</span>
+                     <span class="label"> posts, </span>
                   </p>
                   <p class="view-count-threads">
                     <span class="view-count-number">{{board.total_thread_count}}</span>
@@ -172,7 +172,7 @@ img.avatar-small {
   border-radius: 100px;
   border: 1px solid #444;
   opacity: 1;
-  margin: 0 0.1rem;
+  margin: 0 0.2rem 0 0;
   height: 1rem;
   width: 1rem;
   object-fit: cover;

src/views/Posts.vue

@@ -135,30 +135,58 @@
                 <img :src="post.avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
               </router-link>
             </div>
-            <router-link :to="{ path: '/profile/' + post.user.username.toLowerCase(), query: { id: post.user.id } }">
+            <router-link class="hide-mobile" :to="{ path: '/profile/' + post.user.username.toLowerCase(), query: { id: post.user.id } }">
               <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>
 
           <div class="user-trust" v-if="loggedIn && postData.data.thread.trust_visible">
             <trust-display :user="post.user" />
           </div>
 
-          <div class="user-rank">
-            <rank-display v-if="postData?.data?.metadata" :user="{ ...post.user, metadata: {...postData.data.metadata } }" />
+          <div v-if="postData?.data?.metadata" class="user-rank">
+            <rank-display :user="{ ...post.user, metadata: {...postData.data.metadata } }" />
           </div>
           <div v-if="loggedIn && post.user.id !== authedUser.id" class="ignore-directive">
             <a href="" @click.prevent="toggleIgnoredPosts(post)" v-html="post.user._ignored ? 'Unignore Posts' : 'Ignore Posts'"></a>
           </div>
+
+          <div class="show-mobile">
+            <div class="post-title-mobile">
+              <div class="post-title-user">
+                <span class="username" :data-balloon="post.user.role_name || 'User'"><router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
+                  <span v-html="post.user.username"></span>
+                </router-link></span>
+                <div :title="post.user.name" v-if="post.user.name" class="display-name">
+                  <span>{{truncate(post.user.name, 33)}}</span>
+                  <span class="hide-mobile">&nbsp;&mdash;&nbsp;</span>
+                </div>
+                <div :title="post.user.role_name || 'user'" class="user-role" :style="userRoleHighlight(post.user.highlight_color)">{{post.user.role_name || 'user'}}</div>
+              </div>
+              <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>
+              </router-link>
+              <div class="timestamp">
+                <span>{{humanDate(post.created_at)}}</span>
+                <span v-if="showEditDate(post) && post.metadata?.edited_by_username">{{'&nbsp;&mdash;&nbsp;Edited ' + humanDate(post.updated_at) + ' by '}}</span><a v-if="showEditDate(post) && post.metadata?.edited_by_username" href="#">{{post.metadata.edited_by_username}}</a>
+                <span v-if="showEditDate(post) && !post.metadata?.edited_by_username">{{'&nbsp;&mdash;&nbsp;Edited ' + humanDate(post.updated_at)}}</span>
+                <span v-if="post.metadata?.locked_by_username">{{'&nbsp;&mdash;&nbsp;Locked ' + humanDate(post.metadata.locked_at) + ' by '}}</span>
+                <a v-if="post.metadata?.locked_by_username" href="#">{{post.metadata.locked_by_username}}</a>
+              </div>
+            </div>
+          </div>
         </div>
 
         <!-- Post Body Section -->
         <div :id="(i + 1) === postData.data.posts.length ? 'last' : ''" class="post-content">
           <!-- Post Title -->
-          <div class="post-title">
+          <div class="hide-mobile post-title">
             <div class="post-title-user">
               <span class="username" :data-balloon="post.user.role_name || 'User'"><router-link :to="{ path: '/profile/' + post.user.username.toLowerCase(), query: { id: post.user.id } }">
                 <span v-html="post.user.username"></span>
@@ -1113,6 +1141,9 @@ export default {
 
 $postWidth__mobile: calc(100vw - 2rem);
 .post-body {
+  @include break-mobile-sm {
+    padding-top: 0.5rem;
+  }
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word;
@@ -1362,6 +1393,10 @@ ad-viewer {
   .post-user {
     // width: $postUserWidth;
     flex: 0 0 $postUserWidth;
+    @include break-mobile-sm {
+      display: flex;
+      flex: 0 0 calc(#{$postUserWidth}/1.25);
+    }
     margin-right: $postUserMargin;
     font-size: $font-size-tiny;
     text-align: center;
@@ -1375,6 +1410,10 @@ ad-viewer {
       background: no-repeat center center;
       position: relative;
       margin-bottom: 1rem;
+      @include break-mobile-sm {
+        margin-bottom: 0;
+        margin-right: 0.5rem;
+      }
       width: $postUserWidth;
       height: $postUserWidth;
 
@@ -1427,6 +1466,11 @@ ad-viewer {
       text-align: center;
       text-transform: uppercase;
       width: 100%;
+      @include break-mobile-sm {
+        text-align: left;
+        margin-bottom: 0;
+        width: auto;
+      }
 
       &-value {
         font-weight: 600;
@@ -1445,6 +1489,66 @@ ad-viewer {
         }
       }
     }
+
+    .post-title-mobile {
+      color: $secondary-font-color;
+      display: flex;
+      flex-direction: column;
+      align-items: left;
+      margin-bottom: 0.25rem;
+      width: 100%;
+      text-transform: none;
+
+      .post-title-user {
+        display: flex;
+        align-items: center;
+        flex: 2 1 auto;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        padding-bottom: 0.1rem;
+      }
+
+      span.username {
+        margin-right: 0.25rem;
+        color: $base-font-color;
+        font-size: $font-size-sm;
+        font-weight: 600;
+        &:hover {
+          color: $color-primary;
+        }
+      }
+
+      .user-role {
+        @include truncate-ellipsis;
+        background-color: transparent;
+        border: 1px solid $secondary-font-color;
+        border-radius: 2px;
+        color: $secondary-font-color-dark;
+        display: inline-block;
+        font-size: $font-size-xs;
+        font-weight: 400;
+        line-height: 1.1;
+        margin-right: 0.5rem;
+        max-width: 140px;
+        padding: 0px 6px;
+        text-align: center;
+      }
+
+      .user-activity-mobile {
+        display: flex;
+        gap: 0.5rem;
+      }
+
+      .timestamp, .display-name {
+        display: flex;
+        color: $secondary-font-color;
+        font-size: $font-size-xs;
+        font-weight: 400;
+      }
+      .display-name {
+        color: $secondary-font-color-dark;
+      }
+    }
   }
 
   .post-content {
@@ -1603,10 +1707,6 @@ ad-viewer {
       width: $postWidth__mobile;
     }
   }
-
-  @include break-mobile-sm {
-    padding-bottom: 3rem;
-  }
 }
 
 .thread-title {

src/views/Profile.vue

@@ -72,16 +72,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 v-if="user.last_active" class="stats">
             <span class="label">Last Active </span>
-            <span class="stat-text-sm">{{ humanDate(user.last_active, true) }}</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>
@@ -496,7 +496,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;
@@ -511,7 +511,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;
@@ -520,31 +524,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;
         }
@@ -554,12 +563,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;