feat: Implement enhanced park list template with improved layout and accessibility features

- Created a new enhanced park list template with a responsive design.
- Added skip navigation links for better accessibility.
- Introduced an enhanced header section with park statistics overview.
- Developed a sidebar for advanced filters and a search section.
- Implemented loading overlay and error handling for HTMX requests.
- Enhanced park results display with animations and improved empty states.
- Added pagination controls with improved UX for navigating park listings.
This commit is contained in:
pacnpal
2025-09-23 20:35:44 -04:00
parent fd42ee1161
commit 41fb41838c
14 changed files with 1716 additions and 44 deletions

View File

@@ -54,13 +54,19 @@ Features:
this.open = false;
this.suggestions = [];
this.selectedIndex = -1;
htmx.trigger(this.$refs.searchInput, 'keyup');
// Trigger search update if HTMX is available
if (typeof htmx !== 'undefined' && this.$refs.searchInput) {
htmx.trigger(this.$refs.searchInput, 'keyup');
}
},
selectSuggestion(suggestion) {
this.search = suggestion.name || suggestion;
this.open = false;
this.selectedIndex = -1;
htmx.trigger(this.$refs.searchInput, 'keyup');
// Trigger search update if HTMX is available
if (typeof htmx !== 'undefined' && this.$refs.searchInput) {
htmx.trigger(this.$refs.searchInput, 'keyup');
}
},
handleKeydown(event) {
if (!this.open) return;
@@ -260,4 +266,4 @@ Features:
`${suggestions.length} suggestion${suggestions.length !== 1 ? 's' : ''} available. Use arrow keys to navigate.` :
(search.length >= 2 && !loading && suggestions.length === 0 ? 'No suggestions found.' : '')">
</div>
</div>
</div>