From 1df11e0ee10be984614b363c24d4c9c82f9ecfb7 Mon Sep 17 00:00:00 2001
From: Chris Rodrigues <crod951@gmail.com>
Date: Wed, 27 Nov 2024 11:27:55 -0800
Subject: [PATCH 1/4] style(threads): Moved thread pagination to bottom of each
 thread on mobile; Increased bottom padding on each table cell for readability
 on mobile

---
 src/views/Threads.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/views/Threads.vue b/src/views/Threads.vue
index 50866e8a..fcfe6510 100644
--- a/src/views/Threads.vue
+++ b/src/views/Threads.vue
@@ -32,7 +32,7 @@
           </td>
           <td class="views">
               <span class="views-number">{{childBoard.total_post_count}}</span>
-              <span class="label"> posts,</span>
+              <span class="label"> posts, </span>
               <span class="views-number">{{childBoard.total_thread_count}}</span>
               <span class="label"> threads</span>
           </td>
@@ -194,7 +194,7 @@
               <span> on {{ humanDate(thread.created_at)}}</span>
             </div>
 
-            <div v-if="thread.post_count > posts_per_page" class="thread-pagination">
+            <div v-if="thread.post_count > posts_per_page" class="hide-mobile thread-pagination">
               <thread-pagination :slug="thread.slug" :limit="posts_per_page" :count="thread.post_count" />
             </div>
           </td>
@@ -210,6 +210,11 @@
             <router-link v-if="!thread.last_deleted" :to="{ path: '/profile/' + thread.last_post_username.toLowerCase() }"><span v-html="thread.last_post_username"></span></router-link> posted on <router-link :to="{ name: 'Posts', params: { threadSlug: thread.slug }, query: { start: thread.last_post_position }, hash: '#' + thread.last_post_id }"><span>{{humanDate(thread.last_post_created_at)}}</span>.</router-link>
             <router-link v-if="thread.has_new_post" :to="{ name: 'Posts', params: { threadSlug: thread.slug }, query: { start: thread.latest_unread_position }, hash: '#' + thread.latest_unread_post_id }">(Last unread post)</router-link>
           </td>
+          <td class="show-mobile">
+            <div v-if="thread.post_count > posts_per_page" class="thread-pagination">
+              <thread-pagination :slug="thread.slug" :limit="posts_per_page" :count="thread.post_count" />
+            </div>
+          </td>
         </tr>
       </tbody>
     </table>
@@ -766,7 +771,7 @@ export default {
     margin-bottom: 2rem;
 
     td {
-      padding-bottom: 0;
+      padding-bottom: 0.1rem;
     }
 
     td:last-child {
@@ -981,7 +986,7 @@ export default {
           border-bottom: 0;
           line-height: 20px;
           margin-bottom: 0;
-          padding-bottom: 0;;
+          padding-bottom: 0.1rem;
         }
       }
     }

From 01c53fab55b13b2ec2fc60f87274b8f8205ea380 Mon Sep 17 00:00:00 2001
From: Chris Rodrigues <crod951@gmail.com>
Date: Wed, 27 Nov 2024 11:30:13 -0800
Subject: [PATCH 2/4] style(boards-avatar-small): Removed left margin and
 increased right margin from small avatar to better line up with rest of board
 data on mobile

---
 src/views/Boards.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Boards.vue b/src/views/Boards.vue
index 80b51e17..31b4aaa2 100644
--- a/src/views/Boards.vue
+++ b/src/views/Boards.vue
@@ -54,7 +54,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>
@@ -170,7 +170,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;

From 0ffb5ff0d823abb38496ebb6661863142a32f03a Mon Sep 17 00:00:00 2001
From: Chris Rodrigues <crod951@gmail.com>
Date: Wed, 27 Nov 2024 11:34:08 -0800
Subject: [PATCH 3/4] fix(pagination): Fixed pagination display bug when
 current page doesnt show in some cases on mobile; Fixed bug where ellipsis
 would duplicate when switching between some pages.

---
 src/components/layout/Pagination.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/Pagination.vue b/src/components/layout/Pagination.vue
index 0df09334..87c93b1c 100644
--- a/src/components/layout/Pagination.vue
+++ b/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,7 +69,7 @@ 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
@@ -77,7 +77,7 @@ export default {
 
       // 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
@@ -85,7 +85,7 @@ export default {
 
       // 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

From a2df2a37841479a23124dcbfee3e331b85a81ae9 Mon Sep 17 00:00:00 2001
From: Chris Rodrigues <crod951@gmail.com>
Date: Wed, 27 Nov 2024 11:35:29 -0800
Subject: [PATCH 4/4] style(post-user-data): Updated layout of post user data
 on mobile to remove whitespace between user data and post body.

---
 src/views/Posts.vue | 112 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 108 insertions(+), 4 deletions(-)

diff --git a/src/views/Posts.vue b/src/views/Posts.vue
index d93c2fda..ebb975c2 100644
--- a/src/views/Posts.vue
+++ b/src/views/Posts.vue
@@ -135,7 +135,7 @@
                 <img :src="post.avatar || defaultAvatar" @error="$event.target.src=defaultAvatar" />
               </router-link>
             </div>
-            <router-link :to="{ path: '/profile/' + post.user.username.toLowerCase() }">
+            <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.merit > -1" :title="('Merit: ' + post.user.merit)" class="user-activity">Merit: <span class="user-activity-value">{{post.user.merit}}</span></div>
@@ -147,18 +147,46 @@
             <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.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>
+                <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() }">
                 <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 {