Fix/issue 1318 scrolltotop (#1322)

* fix type build error * clean Pagination style fix #1317 add convenient z-index * go to first element of the page fix #1318
impresso · Oct 7, 2024 · 1d4cc49 · 1d4cc49
1 parent 069d2ec
commit 1d4cc49
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 20 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -482,21 +482,7 @@ input[type='range']:active::-ms-thumb {
     font-weight: bold;
   }
 }
-.fixed-pagination-footer {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  max-width: 100%;
-
-  .pagination {
-    li.page-item > a,
-    li.page-item > .page-link {
-      border-color: $clr-secondary;
-      padding: 0.15em 0.6em;
-    }
-  }
-}
+
 .dark-mode,
 .navbar-dark {
   .fixed-pagination-footer {

diff --git a/src/components/CollapsibleSection.vue b/src/components/CollapsibleSection.vue
@@ -15,10 +15,12 @@
     <ol>
       <li v-for="(paragraph, idx) in paragraphs" :key="paragraph.id">
         <CollapsibleParagraph
-          :modelValue="currentOpenTaskId === paragraph.id"
+          :modelValue="currentOpenParagraphId === paragraph.id"
           :paragraph="paragraph"
           :taskNum="idx + 1"
-          @update:modelValue="(value: boolean) => (currentOpenTaskId = value ? task.id : null)"
+          @update:modelValue="
+            (value: boolean) => (currentOpenParagraphId = value ? paragraph.id : null)
+          "
           @heightChanged="(e: string) => updateHeight(paragraph.id, e)"
         >
         </CollapsibleParagraph>
@@ -64,7 +66,7 @@ const props = defineProps({
 })
 
 const isOpen = ref(!props.isCollapsed)
-const currentOpenTaskId = ref<string | null>(props.initialOpenedParagraphId)
+const currentOpenParagraphId = ref<string | null>(props.initialOpenedParagraphId)
 
 watch(
   () => props.isCollapsed,

diff --git a/src/components/modules/Pagination.vue b/src/components/modules/Pagination.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'dark-mode': props.darkMode }">
+  <div class="Pagination" :class="{ 'dark-mode': props.darkMode }">
     <ul
       class="pagination b-pagination m-0"
       :class="{
@@ -209,8 +209,21 @@ const goToLast = () => {
 }
 </script>
 
-<style scoped lang="less">
+<style>
 .dark-mode {
   background: transparent;
 }
+
+.fixed-pagination-footer .Pagination {
+  border-radius: var(--impresso-border-radius-xs);
+  box-shadow: var(--bs-box-shadow-md);
+}
+.Pagination .pagination li.page-item > a,
+.Pagination .pagination li.page-item > .page-link {
+  padding: var(--spacing-1) var(--spacing-2);
+  background-color: var(--clr-white);
+}
+.Pagination .pagination li.page-item.active > .page-link {
+  background-color: var(--impresso-color-black);
+}
 </style>
diff --git a/src/pages/Search.vue b/src/pages/Search.vue
@@ -201,6 +201,7 @@
 
       <div class="p-1">
         <b-container fluid>
+          <div ref="searchResultsFirstElement" />
           <b-row v-if="displayStyle === 'list'" data-testid="search-results-list-items">
             <b-col
               cols="12"
@@ -662,6 +663,8 @@ export default {
         this.searchResults = data.map(d => new Article(d))
         this.isLoadingResults = false
 
+        this.$refs.searchResultsFirstElement?.scrollIntoView({ behavior: 'smooth' })
+
         let facets = searchResponseToFacetsExtractor(FACET_TYPES_S)({ info })
 
         // get remaining facets and enriched filters.

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -112,6 +112,8 @@
   --impresso-font-size-4: 1.5rem;
 
   --impresso-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --z-index-pagination: 1001;
 }
 
 body {
@@ -475,3 +477,12 @@ svg path.domain {
 .z-index-1 {
   z-index: 1;
 }
+/* fixed pagination, see Pagination component */
+.fixed-pagination-footer {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 100%;
+  z-index: var(--z-index-pagination);
+}