feat: standardize pagination

Author: akinsey

src/components/layout/SimplePagination.vue

@@ -123,6 +123,7 @@ export default {
   margin: 0;
   padding: 0;
   list-style-type: none;
+  li { flex: 1; }
 }
 
 .pagination-control {
@@ -135,7 +136,7 @@ export default {
   display: block;
   width: 18px;
   height: 18px;
-  margin: 0 2px;
+  margin: 0 auto;
   fill: $border-color;
   &:hover { fill: $border-color; }
   &-active {

src/components/settings/IgnoredSettingsPartial.vue

@@ -43,15 +43,18 @@
       </tbody>
     </table>
 
-    <div class="pagination-simple">
-      <button @click="pullPage(-1)" :disabled="!ignored?.prev">&#10094; Prev</button>
-      <button @click="pullPage(1)" :disabled="!ignored?.next">Next &#10095;</button>
+    <div class="pagination-slide mobile-grid">
+      <div class="pagination-controls">
+        <button @click="pullPage(-1)" :disabled="!ignored?.prev">&#10094; Prev</button>
+        <div class="page">{{currentPage}}</div>
+        <button @click="pullPage(1)" :disabled="!ignored?.next">Next &#10095;</button>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { reactive, inject, onBeforeMount, toRefs } from 'vue'
+import { reactive, inject, onBeforeMount, toRefs, computed } from 'vue'
 import { usersApi } from '@/api'
 import Multiselect from '@vueform/multiselect'
 
@@ -85,6 +88,7 @@ export default {
 
     const v = reactive({
       ignoredInput: null,
+      currentPage: computed(() => v.ignored?.page),
       ignored: {},
       defaultAvatar: window.default_avatar,
       defaultAvatarShape: window.default_avatar_shape,
@@ -114,7 +118,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .multiselect { margin: 0; }
 .input-button-wrap { margin-top: .25rem; }
 table.striped.ignored-users {
@@ -151,4 +155,8 @@ table.striped.ignored-users {
     .no-data { display: none; }
   }
 }
+
+
+.pagination-slide { grid-template-columns: 1fr; }
+
 </style>

src/views/MemberSearch.vue

@@ -40,23 +40,32 @@
       </table>
     </div>
   </div>
-  <div class="sidebar">
-    <div class="sidebar-block" v-if="searchData?.page_count > 1">
+  <div class="sidebar" v-if="searchData?.page_count > 1">
+    <div class="sidebar-block">
       <pagination :page="searchData.page" :limit="searchData.limit" :count="searchData.count" />
     </div>
+    <div class="pagination-wrap">
+      <simple-pagination
+        v-model="currentPage"
+        :pages="pages"
+        :range-size="1"
+        @update:modelValue="pageResults"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-import { reactive, toRefs, nextTick } from 'vue'
+import { reactive, toRefs, nextTick, computed } from 'vue'
 import { usersApi } from '@/api'
 import Pagination from '@/components/layout/Pagination.vue'
 import { useRoute, useRouter } from 'vue-router'
 import humanDate from '@/composables/filters/humanDate'
+import SimplePagination from '@/components/layout/SimplePagination.vue'
 
 export default {
   name: 'MemberSearch',
-  components: { Pagination },
+  components: { Pagination, SimplePagination },
   beforeRouteEnter(to, from, next) {
     const query = {
       limit: 10,
@@ -79,6 +88,13 @@ export default {
     next()
   },
   setup() {
+    const pageResults = page => {
+      let query = { ...$route.query, page: page }
+      if (query.page === 1 || !query.page) delete query.page
+      if ($route.query.page !== v.currentPage)
+        $router.replace({ name: $route.name, params: $route.params, query: query })
+    }
+
     const searchUsers = () => {
       let query = { ...$route.query, search: v.search }
       delete query.field
@@ -135,6 +151,7 @@ export default {
 
     const v = reactive({
       currentPage: Number($route.query.page) || 1,
+      pages: computed(() => Math.ceil(v.searchData?.count  / v.searchData?.limit)),
       searchData: null,
       search: $route.query.search,
       searchInput: null,
@@ -144,7 +161,7 @@ export default {
 
     nextTick(() => v.searchInput.focus())
 
-    return { ...toRefs(v), searchUsers, clearSearch, setSortField, getSortClass, humanDate }
+    return { ...toRefs(v), pageResults, searchUsers, clearSearch, setSortField, getSortClass, humanDate }
   }
 }
 </script>
@@ -159,17 +176,30 @@ export default {
       "sidebar sidebar";
   }
 }
-.user-search { grid-area: main; }
+.user-search { grid-area: main; width: 100%; }
 .sidebar {
   grid-area: sidebar;
-
   .sidebar-block {
     display: block;
     position: sticky;
     top: $header-offset;
   }
+  .pagination-wrap { display: none; }
+  @include break-mobile-sm {
+    border-top: 1px solid $border-color;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: $base-background-color;
+    padding: 0.75rem;
+    z-index: 1000;
+    margin: 0 auto;
+    width: 100vw;
+    .sidebar-block { display: none; }
+    .pagination-wrap { display: block; }
+  }
 }
-
 .members td {
   height: 6.25rem;
   padding-left: 0;

src/views/Watchlist.vue

@@ -87,7 +87,7 @@
 
 </div>
 
-<div class="actions-bottom">
+<div class="actions-bottom" v-if="watchlistData?.has_more_threads || watchlistData?.page > 1">
   <div class="pagination-slide">
     <div class="pagination-controls">
       <button @click="pageResults(-1)" :disabled="watchlistData?.page === 1">&#10094; Prev</button>