From 4342137545553302e46e027be1cae481969045ef Mon Sep 17 00:00:00 2001
From: Anthony Kinsey <anthonyjk@gmail.com>
Date: Fri, 3 Dec 2021 14:57:23 -1000
Subject: [PATCH] feat: add mobile pagination to post search view

---
 src/views/PostSearch.vue | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/views/PostSearch.vue b/src/views/PostSearch.vue
index 92f8bb2c..78019c8c 100644
--- a/src/views/PostSearch.vue
+++ b/src/views/PostSearch.vue
@@ -54,10 +54,11 @@
       </div>
     </div>
   </div>
-  <div class="sidebar">
-    <div class="sidebar-block" v-if="searchData?.posts.length > 0">
-      <div class="pagination-simple">
+  <div class="actions-bottom" v-if="searchData?.posts.length > 0">
+    <div class="pagination-slide">
+      <div class="pagination-controls">
         <button @click="pageResults(-1)" :disabled="!searchData?.prev">&#10094; Prev</button>
+        <div class="page">{{currentPage}}</div>
         <button @click="pageResults(1)" :disabled="!searchData?.next">Next &#10095;</button>
       </div>
     </div>
@@ -65,7 +66,7 @@
 </template>
 
 <script>
-import { reactive, toRefs, nextTick, watch } from 'vue'
+import { reactive, toRefs, nextTick, watch, computed } from 'vue'
 import { postsApi } from '@/api'
 import { useRoute, useRouter } from 'vue-router'
 import humanDate from '@/composables/filters/humanDate'
@@ -128,7 +129,7 @@ export default {
     const $router = useRouter()
 
     const v = reactive({
-      currentPage: Number($route.query.page) || 1,
+      currentPage: computed(() => Number($route.query.page) || 1),
       searchData: null,
       search: $route.query.search,
       searchInput: null
@@ -149,15 +150,6 @@ export default {
   @include break-mobile-sm { grid-template-areas: unset; }
 }
 .main { grid-area: main; }
-.sidebar {
-  grid-area: sidebar;
-  .sidebar-block {
-    display: block;
-    position: sticky;
-    top: $header-offset;
-    padding-top: .5rem;
-  }
-}
 .search-results {
   @include pad(0 0 1rem 0);
   clear: both;