fix: show upload button in mobile topbar instead of sidebar

The upload button was hidden in the sidebar on mobile devices, requiring
users to open the menu to find it. Now it appears directly in the topbar
for easy access on all screen sizes.

- Remove !isMobile condition from header upload button
- Add responsive text (short on mobile, full on desktop)
- Remove duplicate upload button from sidebar

Fixes #113
This commit is contained in:
Paul Nothaft
2026-01-15 21:00:17 +01:00
parent 1be974afbb
commit ae181cf92f
2 changed files with 5 additions and 22 deletions
@@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react';
import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check, Upload, Star } from 'lucide-react';
import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check, Star } from 'lucide-react';
import { Button } from '../common';
import { PhotoCategory } from '../../types';
import { useTranslation } from 'react-i18next';
@@ -139,24 +139,6 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
{/* Content */}
<div className="gallery-sidebar-content flex-1 overflow-y-auto">
{/* Upload Section - Only show on mobile when uploads are allowed */}
{isMobile && allowUploads && onUploadClick && (
<div className="p-4 border-b border-neutral-200">
<Button
variant="outline"
size="sm"
leftIcon={<Upload className="w-4 h-4" />}
onClick={() => {
onUploadClick();
onClose();
}}
className="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 only on desktop when sidebar is shown
// Upload button for sidebar layouts (shown on both mobile and desktop)
const allowUploads = data?.event?.allow_user_uploads || event?.allow_user_uploads;
if (allowUploads && showSidebar && !isMobile) {
if (allowUploads && showSidebar) {
items.push(
<Button
key="upload-button"
@@ -619,7 +619,8 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
leftIcon={<Upload className="w-4 h-4" />}
onClick={() => setShowUploadModal(true)}
>
{t('upload.uploadPhotos')}
<span className="hidden sm:inline">{t('upload.uploadPhotos')}</span>
<span className="sm:hidden">{t('common.upload')}</span>
</Button>
);
}