Hide some pager elements on small screen sizes

Hide page links and ellipses on small screen sizes.
artefactual-sdps · Oct 9, 2024 · c9d03f2 · c9d03f2
1 parent 2297a7f
commit c9d03f2
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/dashboard/src/pages/packages/index.vue b/dashboard/src/pages/packages/index.vue
@@ -137,10 +137,17 @@ const toggleLegend = () => {
               ><IconCaretLeftFill
             /></a>
           </li>
-          <li v-if="packageStore.pager.first > 1" aria-hidden="true">
+          <li
+            v-if="packageStore.pager.first > 1"
+            class="d-none d-sm-block"
+            aria-hidden="true"
+          >
             <a href="#" class="page-link disabled">…</a>
           </li>
-          <li v-for="pg in packageStore.pager.pages">
+          <li
+            v-for="pg in packageStore.pager.pages"
+            :class="{ 'd-none d-sm-block': pg != packageStore.pager.current }"
+          >
             <a
               href="#"
               :class="{
@@ -159,6 +166,7 @@ const toggleLegend = () => {
           </li>
           <li
             v-if="packageStore.pager.last < packageStore.pager.total"
+            class="d-none d-sm-block"
             aria-hidden="true"
           >
             <a href="#" class="page-link disabled">…</a>