feat: add page indicator

Rule-34 · Nov 10, 2023 · 27b7f81 · 27b7f81
1 parent bf1b2a3
commit 27b7f81
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 57 deletions.
diff --git a/components/pages/posts/navigation/PostsPagination.vue b/components/pages/posts/navigation/PostsPagination.vue
@@ -15,7 +15,7 @@ function onIntersectionObserver([{ isIntersecting }]) {
 <template>
   <div
     v-intersection-observer="[onIntersectionObserver, { rootMargin: '650px' }]"
-    class='flex animate-pulse items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-base-content ring-1 ring-base-0/20'
+    class='flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-base-content'
     data-testid='load-next-page'
   >
     <slot />

diff --git a/pages/posts.vue b/pages/posts.vue
@@ -153,7 +153,7 @@ const {
   }
 })
 
-// TODO: Virtualize posts
+// TODO: Virtualize posts or use a clever maxPages combination and scroll to last page end
 
 /**
  * `undefined` values mean that they will be replaced by default values
@@ -476,6 +476,7 @@ definePageMeta({
         </template>
       </PageHeader>
 
+      <!-- TODO: strip page -->
       <ShareButton
         :title='title'
         :url='canonicalUrl'
@@ -519,22 +520,36 @@ definePageMeta({
         </div>
       </template>
 
-      <template v-else>
-        <!-- -->
+      <!-- Posts -->
+      <div
+        v-else
+        class='space-y-4'
+      >
+
+        <!-- TODO: Previous page -->
 
-        <ol
-          v-for='postsPage in data.pages'
+        <!-- Pages -->
+        <div
+          v-for='(postsPage, postsPageIndex) in data.pages'
           class='space-y-4'
           data-testid='posts-list'
         >
+
+          <!-- Page indicator -->
+          <div
+            v-if='postsPageIndex !== 0'
+            class='text-center text-sm'
+          >
+            &dharl; Page {{ postsPage.meta.current_page }} &dharr;
+          </div>
+
           <!-- TODO: Animate adding posts https://vuejs.org/guide/built-ins/transition-group.html#staggering-list-transitions -->
-          <template
-            v-for='(post, index) in postsPage.data'
+          <ol
+            v-for='(post, postIndex) in postsPage.data'
             :key='`${selectedBooru.domain}-${post.id}`'
+            class='space-y-4'
           >
-            <!-- Post -->
-            <li :data-testid='`post-${selectedBooru.domain}-${post.id}`'>
-              <!-- TODO: Fix content jumping -->
+            <li>
               <Post
                 :post='post'
                 :post-name='`${selectedBooru.domain}-${post.id}`'
@@ -545,24 +560,23 @@ definePageMeta({
             </li>
 
             <!-- Promoted content -->
-            <template v-if='!isPremium && index !== 0 && index % 7 === 0'>
+            <template v-if='!isPremium && postIndex !== 0 && postIndex % 7 === 0'>
               <li :key='`${post.id}-promoted-content`'>
                 <PromotedContent />
               </li>
             </template>
-          </template>
-        </ol>
+          </ol>
+        </div>
 
         <!-- Next Pagination -->
         <PostsPagination
-          class='mt-4'
           @load-next-page='onLoadNextPostPage'
         >
           <span v-if='isFetchingNextPage'>Loading more&hellip;</span>
-          <span v-else-if='hasNextPage'>Load More</span>
+          <span v-else-if='hasNextPage'>Reach here to load more</span>
           <span v-else>Nothing more to load</span>
         </PostsPagination>
-      </template>
+      </div>
     </section>
   </main>
 </template>
diff --git a/pages/settings.vue b/pages/settings.vue
@@ -1,37 +1,37 @@
 <script setup>
-  import { version } from '~/package.json'
-  import { useUserSettings } from '~/composables/useUserSettings'
-  import { ExclamationTriangleIcon } from '@heroicons/vue/20/solid'
+import { version } from '~/package.json'
+import { useUserSettings } from '~/composables/useUserSettings'
+import { ExclamationTriangleIcon } from '@heroicons/vue/20/solid'
 
-  useSeoMeta({
-    title: 'Settings',
+useSeoMeta({
+  title: 'Settings',
 
-    description: 'Options to configure how the Rule 34 App works.'
-  })
+  description: 'Options to configure how the Rule 34 App works.'
+})
 
-  const appVersion = version
+const appVersion = version
 
-  const userSettings = useUserSettings()
+const userSettings = useUserSettings()
 
-  async function removeAllData() {
-    if (!confirm('Are you sure you want to reset all data?')) {
-      return
-    }
-
-    localStorage.clear()
+async function removeAllData() {
+  if (!confirm('Are you sure you want to reset all data?')) {
+    return
+  }
 
-    const indexedDBDatabaseNames = await indexedDB.databases()
+  localStorage.clear()
 
-    for (const { name } of indexedDBDatabaseNames) {
-      indexedDB.deleteDatabase(name)
-    }
+  const indexedDBDatabaseNames = await indexedDB.databases()
 
-    location.reload()
+  for (const { name } of indexedDBDatabaseNames) {
+    indexedDB.deleteDatabase(name)
   }
+
+  location.reload()
+}
 </script>
 
 <template>
-  <main class="container mx-auto flex max-w-3xl flex-1 flex-col px-4 py-4 sm:px-6 lg:px-8">
+  <main class='container mx-auto flex max-w-3xl flex-1 flex-col px-4 py-4 sm:px-6 lg:px-8'>
     <!-- -->
 
     <PageHeader>
@@ -40,11 +40,11 @@
     </PageHeader>
 
     <!-- Settings -->
-    <section class="mx-2 mt-4 flex-auto">
-      <ol class="space-y-4">
+    <section class='mx-2 mt-4 flex-auto'>
+      <ol class='space-y-4'>
         <!-- navigationTouchGestures -->
         <li>
-          <SettingSwitch v-model="userSettings.navigationTouchGestures">
+          <SettingSwitch v-model='userSettings.navigationTouchGestures'>
             <template #name> Touch gestures</template>
 
             <template #description> Show menu on left-to-right swipe, and search on right-to-left</template>
@@ -53,19 +53,19 @@
 
         <!-- postFullSizeImages -->
         <li>
-          <SettingSwitch v-model="userSettings.postFullSizeImages">
+          <SettingSwitch v-model='userSettings.postFullSizeImages'>
             <template #name> Full size images</template>
 
-            <template #description> Load full size images on posts, very data intensive</template>
+            <template #description> Load full size images on posts, very data & memory intensive</template>
           </SettingSwitch>
         </li>
 
         <!-- postsPerPage -->
         <li>
           <SettingNumber
-            v-model.number="userSettings.postsPerPage"
-            :max="100"
-            :min="1"
+            v-model.number='userSettings.postsPerPage'
+            :max='100'
+            :min='1'
           >
             <template #name> Posts per page</template>
 
@@ -76,28 +76,28 @@
     </section>
 
     <!-- Reset -->
-    <section class="mx-2 mt-24 flex flex-row items-center justify-between gap-2">
-      <label for="reset">
-        <span class="font-medium leading-8 text-base-content-highlight">
+    <section class='mx-2 mt-24 flex flex-row items-center justify-between gap-2'>
+      <label for='reset'>
+        <span class='font-medium leading-8 text-base-content-highlight'>
           Reset
-          <ExclamationTriangleIcon class="inline-block h-4 w-4" />
+          <ExclamationTriangleIcon class='inline-block h-4 w-4' />
         </span>
 
-        <span class="block text-sm"> Clear settings, saved posts, and all other app data. </span>
+        <span class='block text-sm'> Clear settings, saved posts, and all other app data. </span>
       </label>
 
       <button
-        id="reset"
-        class="hover:hover-bg-util focus-visible:focus-outline-util rounded-lg px-3 py-1.5 text-sm font-medium text-base-content-highlight ring-1 ring-base-0/20 transition-colors focus-visible:ring-inset"
-        type="button"
-        @click="removeAllData"
+        id='reset'
+        class='hover:hover-bg-util focus-visible:focus-outline-util rounded-lg px-3 py-1.5 text-sm font-medium text-base-content-highlight ring-1 ring-base-0/20 transition-colors focus-visible:ring-inset'
+        type='button'
+        @click='removeAllData'
       >
         Reset
       </button>
     </section>
 
-    <footer class="mt-2">
-      <span class="block text-center text-sm text-base-content-highlight"> v{{ appVersion }} </span>
+    <footer class='mt-2'>
+      <span class='block text-center text-sm text-base-content-highlight'> v{{ appVersion }} </span>
     </footer>
   </main>
 </template>