barmar/tethys.frontend
1
0
Fork 0
forked from geolba/tethys.frontend
Code Pull Requests Activity

Fixed scrolling when facet list is collapsed

Browse Source
This commit is contained in:
Porras-Bernardez 2024-09-18 12:42:35 +02:00
parent 9f076daf15
commit 5dd8821667
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/face-category/FacetCategory.ts
View File

@ -79,11 +79,11 @@ export default class FacetCategory extends Vue {
} }
toggle(): void { toggle(): void {
if (this.collapsed == true) { this.collapsed = !this.collapsed;
this.collapsed = false;
} else if (this.collapsed == false) { // Scroll to the top of the page only when collapsing
this.collapsed = true; if (this.collapsed) {
//list.children("li:gt(4)").hide(); this.scrollTop();
} }
} }
@ -94,6 +94,19 @@ export default class FacetCategory extends Vue {
filterItem.category = this.filterName; filterItem.category = this.filterName;
filterItem.active = true; filterItem.active = true;
// this.$emit("filter", filterItem); // this.$emit("filter", filterItem);
// Scroll to the top of the page when activating a new filter
this.scrollTop();
return filterItem; return filterItem;
} }
scrollTop(): void {
setTimeout(() => {
window.scrollTo({
top: 0,
behavior: 'smooth' // Smooth scroll to the top
});
}, 50); // Delay to allow the DOM to update
}
} }

3
src/views/search-view/search-view-component.vue
View File

@ -23,7 +23,8 @@
<!-- Display message if no results found --> <!-- Display message if no results found -->
<div v-else-if="results.length == 0"> <div v-else-if="results.length == 0">
<div class="p-1 mb-0 text-sm bg-[#d8f4f7] rounded-lg" role="alert"> <div class="p-1 mb-0 text-sm bg-[#d8f4f7] rounded-lg" role="alert">
<span class="font-medium pl-5">Your search yielded <strong> 0</strong> results.</span> <!-- <span class="font-medium pl-5">Your search yielded <strong> 0</strong> results.</span> -->
<span class="font-medium pl-5">Your search term</span> <span class="font-semibold">{{ "'" + stringSearchTerm + "'" }}</span> yielded <strong>0</strong> results:
</div> </div>
</div> </div>
</div> </div>