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

ui(gallery): feedback filter headline + horizontal compact icons (desktop+mobile); render only when feedback enabled

Browse Source
This commit is contained in:
paul
2025-09-16 09:11:32 +02:00
parent ff89f96e31
commit 4b64b80b20
1 changed files with 41 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/gallery/PhotoFilterBar.tsx
+15 -7
View File
@@ -174,15 +174,19 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
</div> </div>
</div> </div>
{/* Desktop: compact vertical feedback filter (icons only), outside the overflow area */} {/* Desktop: compact horizontal feedback filter with headline (icons only) */}
{feedbackEnabled && onFilterChange && ( {feedbackEnabled && onFilterChange && (
<div className="hidden lg:flex flex-col items-center gap-1 mx-2"> <div className="hidden lg:flex items-center gap-2 mx-2 flex-shrink-0">
<span className="text-sm text-neutral-600 whitespace-nowrap">
{t('gallery.feedbackFilter', 'Feedback Filter')}
</span>
<div className="flex items-center gap-1">
<Button <Button
variant={currentFilter === 'all' ? 'primary' : 'outline'} variant={currentFilter === 'all' ? 'primary' : 'outline'}
size="sm" size="sm"
onClick={() => onFilterChange('all')} onClick={() => onFilterChange('all')}
className="p-1 w-8 h-8 flex items-center justify-center" className="p-1 w-8 h-8 flex items-center justify-center"
aria-label={t('gallery.all')} aria-label={t('gallery.all', 'All')}
> >
<Grid className="w-3.5 h-3.5" /> <Grid className="w-3.5 h-3.5" />
</Button> </Button>
@@ -205,6 +209,7 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
<Star className="w-3.5 h-3.5" /> <Star className="w-3.5 h-3.5" />
</Button> </Button>
</div> </div>
</div>
)} )}
<p className="text-xs md:text-sm text-neutral-600 flex-shrink-0 ml-auto"> <p className="text-xs md:text-sm text-neutral-600 flex-shrink-0 ml-auto">
@@ -213,16 +218,19 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
</div> </div>
)} )}
{/* Mobile/Tablet: compact vertical icons below categories */} {/* Mobile/Tablet: compact horizontal icons with headline below categories */}
{feedbackEnabled && onFilterChange && ( {feedbackEnabled && onFilterChange && (
<div className="flex lg:hidden gap-2"> <div className="flex lg:hidden items-center gap-2">
<div className="flex flex-col gap-1"> <span className="text-xs text-neutral-600 whitespace-nowrap">
{t('gallery.feedbackFilter', 'Feedback Filter')}
</span>
<div className="flex items-center gap-1">
<Button <Button
variant={currentFilter === 'all' ? 'primary' : 'outline'} variant={currentFilter === 'all' ? 'primary' : 'outline'}
size="sm" size="sm"
onClick={() => onFilterChange('all')} onClick={() => onFilterChange('all')}
className="p-1 w-8 h-8 flex items-center justify-center" className="p-1 w-8 h-8 flex items-center justify-center"
aria-label={t('gallery.all')} aria-label={t('gallery.all', 'All')}
> >
<Grid className="w-3.5 h-3.5" /> <Grid className="w-3.5 h-3.5" />
</Button> </Button>