paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(gallery): feedback filter headline + horizontal icons in sidebar (compact variant); ensure sidebar content scrolls (flex-col container)

Browse Source
This commit is contained in:
paul
2025-09-16 09:15:47 +02:00
parent 4b64b80b20
commit 3a6d06192a
2 changed files with 34 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/gallery/GalleryFilter.tsx
+33 -28
View File
@@ -36,34 +36,39 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
if (variant === 'compact') { if (variant === 'compact') {
return ( return (
<div className={`${className}`}> <div className={`${className}`}>
<div className="flex flex-col items-start gap-1"> <div className="flex items-center gap-2">
<Button <span className="text-sm text-neutral-700 whitespace-nowrap">
variant={currentFilter === 'all' ? 'primary' : 'outline'} {t('gallery.feedbackFilter', 'Feedback Filter')}
size="sm" </span>
onClick={() => onFilterChange('all')} <div className="flex items-center gap-1">
className="p-1 w-8 h-8 flex items-center justify-center" <Button
aria-label={t('gallery.all', 'All')} variant={currentFilter === 'all' ? 'primary' : 'outline'}
> size="sm"
<svg viewBox="0 0 24 24" className="w-3.5 h-3.5 text-current"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 8v-8h8v8h-8z"/></svg> onClick={() => onFilterChange('all')}
</Button> className="p-1 w-8 h-8 flex items-center justify-center"
<Button aria-label={t('gallery.all', 'All')}
variant={currentFilter === 'liked' ? 'primary' : 'outline'} >
size="sm" <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 text-current"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 8v-8h8v8h-8z"/></svg>
onClick={() => onFilterChange('liked')} </Button>
className="p-1 w-8 h-8 flex items-center justify-center" <Button
aria-label={t('feedback.likes', 'Likes')} variant={currentFilter === 'liked' ? 'primary' : 'outline'}
> size="sm"
<Heart className="w-3.5 h-3.5" /> onClick={() => onFilterChange('liked')}
</Button> className="p-1 w-8 h-8 flex items-center justify-center"
<Button aria-label={t('feedback.likes', 'Likes')}
variant={currentFilter === 'favorited' ? 'primary' : 'outline'} >
size="sm" <Heart className="w-3.5 h-3.5" />
onClick={() => onFilterChange('favorited')} </Button>
className="p-1 w-8 h-8 flex items-center justify-center" <Button
aria-label={t('feedback.favorites', 'Favorites')} variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
> size="sm"
<Star className="w-3.5 h-3.5" /> onClick={() => onFilterChange('favorited')}
</Button> className="p-1 w-8 h-8 flex items-center justify-center"
aria-label={t('feedback.favorites', 'Favorites')}
>
<Star className="w-3.5 h-3.5" />
</Button>
</div>
</div> </div>
</div> </div>
); );
frontend/src/components/gallery/GallerySidebar.tsx
+1 -1
View File
@@ -114,7 +114,7 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
<div <div
ref={sidebarRef} ref={sidebarRef}
className={` className={`
fixed top-0 left-0 h-full bg-white shadow-xl z-50 transition-transform duration-300 ease-in-out fixed top-0 left-0 h-full bg-white shadow-xl z-50 transition-transform duration-300 ease-in-out flex flex-col
${isMobile ? 'w-full max-w-sm' : 'w-80'} ${isMobile ? 'w-full max-w-sm' : 'w-80'}
${isOpen ? 'translate-x-0' : '-translate-x-full'} ${isOpen ? 'translate-x-0' : '-translate-x-full'}
`} `}