Fix Android navigation and improve UI responsiveness
- Convert music category buttons from <button> to native <a> links for better Android compatibility - Convert artist/album nested buttons in TrackList to <a> links to fix HTML validation issues - Add event handlers with proper stopPropagation to maintain click behavior - Increase library overview card sizes from medium to large (50% bigger) - Increase thumbnail sizes in list view from 10x10 to 16x16 - Add console logging for debugging click events on mobile - Remove preventDefault() handlers that were blocking Android touch events These changes resolve navigation issues on Android devices where buttons weren't responding to taps. Native <a> links provide better cross-platform compatibility and allow SvelteKit to handle navigation more reliably. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -125,16 +125,19 @@
|
||||
|
||||
function handleItemClick(item: MediaItem) {
|
||||
// Navigate to detail page for browseable items
|
||||
goto(`/library/${item.id}`);
|
||||
console.log('Item clicked:', item.id, item.name);
|
||||
goto(`/library/${item.id}`).catch(err => {
|
||||
console.error('Navigation failed:', err);
|
||||
});
|
||||
}
|
||||
|
||||
function handleTrackClick(track: MediaItem, _index: number) {
|
||||
// For track lists, navigate to the track's album if available, otherwise detail page
|
||||
if (track.albumId) {
|
||||
goto(`/library/${track.albumId}`);
|
||||
} else {
|
||||
goto(`/library/${track.id}`);
|
||||
}
|
||||
console.log('Track clicked:', track.id, track.name);
|
||||
const targetId = track.albumId || track.id;
|
||||
goto(`/library/${targetId}`).catch(err => {
|
||||
console.error('Navigation failed:', err);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user