fix: mobile upload button visibility in gallery

- Remove hidden sm:block wrapper hiding upload button on mobile for Grid layout
- Add upload button to GallerySidebar using existing allowUploads/onUploadClick props
- Ensures upload button is visible in both header and sidebar on all devices

Closes #113
This commit is contained in:
Paul Nothaft
2026-01-16 14:49:37 +01:00
parent 2151147f2d
commit 2a2c23d116
3 changed files with 23 additions and 25 deletions
@@ -240,11 +240,7 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
{/* Right side - Action buttons */}
<div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
{/* Extra header items (upload button, etc.) */}
{headerExtra && (
<div className="hidden sm:block">
{headerExtra}
</div>
)}
{headerExtra}
{/* Download all button - hidden on mobile when sidebar is shown */}
{showDownloadAll && onDownloadAll && (
@@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react';
import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check, Star } from 'lucide-react';
import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check, Star, Upload } from 'lucide-react';
import { Button } from '../common';
import { PhotoCategory } from '../../types';
import { useTranslation } from 'react-i18next';
@@ -139,6 +139,24 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
{/* Content */}
<div className="gallery-sidebar-content flex-1 overflow-y-auto">
{/* Upload Section - Show prominently at top for mobile users */}
{allowUploads && onUploadClick && (
<div className="gallery-sidebar-section gallery-sidebar-upload p-4 border-b border-neutral-200">
<Button
variant="outline"
size="sm"
leftIcon={<Upload className="w-4 h-4" />}
onClick={() => {
onUploadClick();
if (isMobile) onClose();
}}
className="gallery-btn w-full"
>
{t('upload.uploadPhotos')}
</Button>
</div>
)}
{/* Search Section - Hidden for carousel layout */}
{galleryLayout !== 'carousel' && (
<div className="gallery-sidebar-section gallery-sidebar-search p-4 border-b border-neutral-200">
@@ -608,9 +608,9 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
);
}
// Upload button for sidebar layouts (shown on both mobile and desktop)
// Upload button - always show when uploads are allowed (regardless of layout/theme loading state)
const allowUploads = data?.event?.allow_user_uploads || event?.allow_user_uploads;
if (allowUploads && showSidebar) {
if (allowUploads) {
items.push(
<Button
key="upload-button"
@@ -618,23 +618,7 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
size="sm"
leftIcon={<Upload className="w-4 h-4" />}
onClick={() => setShowUploadModal(true)}
>
<span className="hidden sm:inline">{t('upload.uploadPhotos')}</span>
<span className="sm:hidden">{t('common.upload')}</span>
</Button>
);
}
// Upload button for non-sidebar layouts
if (allowUploads && !showSidebar) {
items.push(
<Button
key="upload-button"
variant="outline"
size="sm"
leftIcon={<Upload className="w-4 h-4" />}
onClick={() => setShowUploadModal(true)}
className="flex-1 sm:flex-initial"
className={!showSidebar ? 'flex-1 sm:flex-initial' : ''}
>
<span className="hidden sm:inline">{t('upload.uploadPhotos')}</span>
<span className="sm:hidden">{t('common.upload')}</span>