Fix/issue 1281 (#1323)

* fix style on bg dark * fix pagination style * add pagination fix #1281
impresso · Oct 7, 2024 · 677a7ef · 677a7ef
1 parent 1d4cc49
commit 677a7ef
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 12 deletions.
diff --git a/src/components/TextReusePassageMonitor.vue b/src/components/TextReusePassageMonitor.vue
@@ -2,16 +2,19 @@
   <div class="TextReusePassageMonitor d-flex flex-column">
     <div class="flex-shrink-1">
       <!-- add pagination for startPassage and endPassage -->
-      <div class="d-flex flex-row w-100 py-2 align-items-center TextReusePassageMonitor_pagination">
-        <div class="mx-3 d-flex flex-wrap align-items-center">
+      <div class="w-100 py-2 d-flex flex-row">
+        <div class="w-50">
           <div
+            class="p-3 text-white"
             v-html="
               $tc('passages_in_same_cluster', totalPassages, {
                 offset: endPassageOffset + 1,
                 n: totalPassages
               })
             "
           />
+        </div>
+        <div class="d-flex flex-column w-50 align-items-center">
           <i-dropdown
             v-model="endPassageOrderBy"
             :options="
@@ -20,14 +23,22 @@
                 text: $t(`sort_${value}`)
               }))
             "
-            class="ml-2"
+            class="d-inline-block my-2"
             size="sm"
             variant="outline-tertiary"
           ></i-dropdown>
+          <pagination
+            :total-rows="totalPassages"
+            :per-page="1"
+            :current-page="endPassageOffset + 1"
+            @change="endPassageOffset = $event - 1"
+            class="mr-2"
+          ></pagination>
         </div>
       </div>
       <div class="d-flex flex-row TextReusePassageMonitor_header">
-        <TextReusePassageItemLabel :item="item" class="px-3" />
+        <TextReusePassageItemLabel :item="item" class="px-3" style="min-width: 50%" />
+
         <TextReusePassageItemLabel v-if="endPassage" :item="endPassage" class="px-3" />
       </div>
     </div>
@@ -62,12 +73,14 @@ import TextReusePassage from '@/models/TextReusePassage'
 import TextReusePassageItemLabel from './modules/lists/TextReusePassageItemLabel.vue'
 import { textReusePassages } from '@/services'
 import { offset } from '@floating-ui/vue'
+import Pagination from './modules/Pagination.vue'
 const OrderByOptions = ['date', '-date', 'size', '-size']
 
 export default {
   name: 'TextReusePassageMonitor',
   components: {
-    TextReusePassageItemLabel
+    TextReusePassageItemLabel,
+    Pagination
   },
   props: {
     item: {
@@ -126,8 +139,8 @@ export default {
         limit: 1,
         order_by: this.endPassageOrderBy,
         filters: [
-          { type: 'textReuseCluster', q: this.item.textReuseCluster.id },
-          { type: 'id', q: this.item.id, context: 'exclude' }
+          { type: 'textReuseCluster', q: this.item.textReuseCluster.id }
+          // { type: 'id', q: this.item.id, context: 'exclude' }
         ],
         addons: { newspaper: 'text' }
       }
@@ -208,10 +221,10 @@ export default {
 <i18n lang="json">
 {
   "en": {
-    "sort_date": "sorted by date",
-    "sort_-date": "sorted by date (desc)",
-    "sort_size": "sorted by size",
-    "sort_-size": "sorted by size (desc)",
+    "sort_date": "sort by date",
+    "sort_-date": "sort by date (desc)",
+    "sort_size": "sort by size",
+    "sort_-size": "sort by size (desc)",
     "passages_in_same_cluster": "Compare the passage on the left side with passage <b>#{offset}</b> of <b>{ n }</b> in the same cluster"
   }
 }

diff --git a/src/components/modules/Pagination.vue b/src/components/modules/Pagination.vue
@@ -226,4 +226,19 @@ const goToLast = () => {
 .Pagination .pagination li.page-item.active > .page-link {
   background-color: var(--impresso-color-black);
 }
+.bg-dark .Pagination .pagination {
+  border: 1px solid var(--clr-white);
+  border-radius: var(--impresso-border-radius-xs);
+  overflow: hidden;
+}
+.bg-dark .Pagination .pagination li.page-item > a,
+.bg-dark .Pagination .pagination li.page-item > .page-link {
+  background-color: var(--impresso-color-black);
+  color: var(--clr-white);
+  border-color: var(--clr-white-rgba-20);
+}
+.bg-dark .Pagination .pagination li.page-item.active > .page-link {
+  background-color: var(--clr-white);
+  color: var(--impresso-color-black);
+}
 </style>
diff --git a/src/components/modules/lists/TextReusePassageItemLabel.vue b/src/components/modules/lists/TextReusePassageItemLabel.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, withDefaults } from 'vue'
+import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
 import ItemSelector from '../ItemSelector.vue'
 
@@ -94,3 +94,10 @@ const newspaperRoute = computed(() => {
   }
 })
 </script>
+<style>
+.bg-dark .TextReusePassageItemLabel h3,
+.bg-dark .TextReusePassageItemLabel span,
+.bg-dark .TextReusePassageItemLabel a {
+  color: var(--clr-white);
+}
+</style>
diff --git a/src/styles/style.css b/src/styles/style.css
@@ -52,6 +52,7 @@
   --impresso-wght-smallcaps-bold: 800;
   --clr-white: #f8f8ff;
   --clr-white-rgba-20: #ffffff33;
+  --clr-white-rgba-50: #f8f8ff80;
   --clr-dark: var(--impresso-color-black);
 
   --clr-grey-100: #3d4146;
@@ -388,6 +389,15 @@ ul.nav.nav-pills .nav-item:hover .nav-link {
 .dropdown.show .dropdown-toggle.btn-outline-tertiary:hover {
   background-color: white !important;
 }
+.bg-dark .dropdown .Icon path {
+  stroke: var(--clr-white) !important;
+}
+.bg-dark .dropdown-toggle {
+  color: var(--clr-white) !important;
+}
+.bg-dark .dropdown-toggle:hover {
+  color: var(--white) !important;
+}
 /* Bootstrap Modals */
 .modal {
   z-index: 1041;