Hide table current page on small screen (#101)

* Hide table current page on small screen
gobitfly · Mar 13, 2024 · cf9179f · cf9179f
1 parent 211fc2b
commit cf9179f
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/frontend/components/bc/table/TablePager.vue b/frontend/components/bc/table/TablePager.vue
@@ -81,7 +81,7 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
         <div class="item button" :disabled="!currentOffset" @click="prev">
           <IconChevron class="toggle" direction="left" />
         </div>
-        <div class="item">
+        <div class="item current-page">
           {{ data.page }} {{ $t('table.of') }} {{ data.lastPage }}
         </div>
         <div class="item button" :disabled="data.page! >= data.lastPage!" @click="next">
@@ -148,11 +148,12 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
     display: flex;
     gap: 3px;
 
-    .table{
+    .table {
       @include main.container;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
-      &.p-overlay-open{
+
+      &.p-overlay-open {
         border-bottom-right-radius: 0;
       }
     }
@@ -193,6 +194,12 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
         border-top-right-radius: var(--border-radius);
         border-bottom-right-radius: var(--border-radius);
       }
+
+      @media screen and (max-width: 1399px) {
+        &.current-page {
+          display: none;
+        }
+      }
     }
   }