From a8151a3c0c10191a009a11358d3eca161a113d16 Mon Sep 17 00:00:00 2001 From: Hassaan Ali Date: Sun, 1 Jun 2025 22:59:23 +0500 Subject: [PATCH 1/5] mods page impovements --- src/components/ModsList.astro | 120 ++++++++++++++++++++++++++++++---- 1 file changed, 106 insertions(+), 14 deletions(-) diff --git a/src/components/ModsList.astro b/src/components/ModsList.astro index eb118b7..b2d99ff 100644 --- a/src/components/ModsList.astro +++ b/src/components/ModsList.astro @@ -1,5 +1,6 @@ --- import { icon, library } from '@fortawesome/fontawesome-svg-core' +import ChevronDownIcon from '~/icons/ChevronDownIcon.astro' import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons' import { type ZenTheme } from '~/mods' import { getPath, type Locale } from '~/utils/i18n' @@ -40,14 +41,16 @@ const totalPages = Math.ceil(allMods.length / defaultLimit) /> -
+
-
+
-
-
@@ -309,6 +338,13 @@ const totalPages = Math.ceil(allMods.length / defaultLimit) } }) } + + document.addEventListener('limit-changed', e => { + if (e instanceof CustomEvent) { + const newLimit = e.detail.value + this.setState({ limit: newLimit, page: 1 }) + } + }) } setState(newState) { // Prevent multiple renders @@ -676,4 +712,60 @@ const totalPages = Math.ceil(allMods.length / defaultLimit) // Initialize the mods search new ModsSearch() + + class CustomDropdown { + constructor() { + this.button = document.getElementById('limit-button') + this.dropdown = document.getElementById('limit-dropdown') + this.valueSpan = document.getElementById('limit-value') + + if (!this.button || !this.dropdown || !this.valueSpan) return + + this.button.addEventListener('click', () => this.toggle()) + this.dropdown.addEventListener('click', e => this.handleOptionClick(e)) + + // Close dropdown when clicking outside + document.addEventListener('click', e => { + if (!this.button?.contains(e.target) && !this.dropdown?.contains(e.target)) { + this.close() + } + }) + } + + toggle() { + const isExpanded = this.button?.getAttribute('aria-expanded') === 'true' + if (isExpanded) { + this.close() + } else { + this.open() + } + } + + open() { + this.button?.setAttribute('aria-expanded', 'true') + this.dropdown?.classList.remove('hidden') + } + + close() { + this.button?.setAttribute('aria-expanded', 'false') + this.dropdown?.classList.add('hidden') + } + + handleOptionClick(e) { + const target = e.target + if (target instanceof HTMLButtonElement && target.dataset.value) { + const value = target.dataset.value + if (this.valueSpan) { + this.valueSpan.textContent = value + } + // Trigger change event for ModsSearch + const event = new CustomEvent('limit-changed', { detail: { value: parseInt(value, 10) } }) + document.dispatchEvent(event) + this.close() + } + } + } + + // Initialize the custom dropdown + new CustomDropdown() From c7f2880c466ea27ec6eaa5c70c9932e685cb61d8 Mon Sep 17 00:00:00 2001 From: Hassaan Ali Date: Sun, 1 Jun 2025 23:38:56 +0500 Subject: [PATCH 2/5] mods page sort buttons improved --- src/components/ModsList.astro | 114 +++------------------------------- 1 file changed, 10 insertions(+), 104 deletions(-) diff --git a/src/components/ModsList.astro b/src/components/ModsList.astro index b2d99ff..fb60a65 100644 --- a/src/components/ModsList.astro +++ b/src/components/ModsList.astro @@ -41,10 +41,8 @@ const totalPages = Math.ceil(allMods.length / defaultLimit) />
-
-
+
+
-
- -
-
@@ -338,13 +307,6 @@ const totalPages = Math.ceil(allMods.length / defaultLimit) } }) } - - document.addEventListener('limit-changed', e => { - if (e instanceof CustomEvent) { - const newLimit = e.detail.value - this.setState({ limit: newLimit, page: 1 }) - } - }) } setState(newState) { // Prevent multiple renders @@ -712,60 +674,4 @@ const totalPages = Math.ceil(allMods.length / defaultLimit) // Initialize the mods search new ModsSearch() - - class CustomDropdown { - constructor() { - this.button = document.getElementById('limit-button') - this.dropdown = document.getElementById('limit-dropdown') - this.valueSpan = document.getElementById('limit-value') - - if (!this.button || !this.dropdown || !this.valueSpan) return - - this.button.addEventListener('click', () => this.toggle()) - this.dropdown.addEventListener('click', e => this.handleOptionClick(e)) - - // Close dropdown when clicking outside - document.addEventListener('click', e => { - if (!this.button?.contains(e.target) && !this.dropdown?.contains(e.target)) { - this.close() - } - }) - } - - toggle() { - const isExpanded = this.button?.getAttribute('aria-expanded') === 'true' - if (isExpanded) { - this.close() - } else { - this.open() - } - } - - open() { - this.button?.setAttribute('aria-expanded', 'true') - this.dropdown?.classList.remove('hidden') - } - - close() { - this.button?.setAttribute('aria-expanded', 'false') - this.dropdown?.classList.add('hidden') - } - - handleOptionClick(e) { - const target = e.target - if (target instanceof HTMLButtonElement && target.dataset.value) { - const value = target.dataset.value - if (this.valueSpan) { - this.valueSpan.textContent = value - } - // Trigger change event for ModsSearch - const event = new CustomEvent('limit-changed', { detail: { value: parseInt(value, 10) } }) - document.dispatchEvent(event) - this.close() - } - } - } - - // Initialize the custom dropdown - new CustomDropdown() From 429b2e7230671bf0fc5e08d97284573919738493 Mon Sep 17 00:00:00 2001 From: Hassaan Ali Date: Mon, 2 Jun 2025 00:00:34 +0500 Subject: [PATCH 3/5] final push --- src/components/ModsList.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ModsList.astro b/src/components/ModsList.astro index fb60a65..5de8c0f 100644 --- a/src/components/ModsList.astro +++ b/src/components/ModsList.astro @@ -41,7 +41,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit) />
-
+
-
+