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 */} {/* Right side - Action buttons */}
<div className="flex items-center gap-2 sm:gap-3 flex-shrink-0"> <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
{/* Extra header items (upload button, etc.) */} {/* Extra header items (upload button, etc.) */}
{headerExtra && (
<div className="hidden sm:block">
{headerExtra} {headerExtra}
</div>
)}
{/* Download all button - hidden on mobile when sidebar is shown */} {/* Download all button - hidden on mobile when sidebar is shown */}
{showDownloadAll && onDownloadAll && ( {showDownloadAll && onDownloadAll && (
@@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react'; 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 { Button } from '../common';
import { PhotoCategory } from '../../types'; import { PhotoCategory } from '../../types';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@@ -139,6 +139,24 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
{/* Content */} {/* Content */}
<div className="gallery-sidebar-content flex-1 overflow-y-auto"> <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 */} {/* Search Section - Hidden for carousel layout */}
{galleryLayout !== 'carousel' && ( {galleryLayout !== 'carousel' && (
<div className="gallery-sidebar-section gallery-sidebar-search p-4 border-b border-neutral-200"> <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; const allowUploads = data?.event?.allow_user_uploads || event?.allow_user_uploads;
if (allowUploads && showSidebar) { if (allowUploads) {
items.push( items.push(
<Button <Button
key="upload-button" key="upload-button"
@@ -618,23 +618,7 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
size="sm" size="sm"
leftIcon={<Upload className="w-4 h-4" />} leftIcon={<Upload className="w-4 h-4" />}
onClick={() => setShowUploadModal(true)} onClick={() => setShowUploadModal(true)}
> className={!showSidebar ? 'flex-1 sm:flex-initial' : ''}
<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"
> >
<span className="hidden sm:inline">{t('upload.uploadPhotos')}</span> <span className="hidden sm:inline">{t('upload.uploadPhotos')}</span>
<span className="sm:hidden">{t('common.upload')}</span> <span className="sm:hidden">{t('common.upload')}</span>