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:
@@ -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, Upload, Star } from 'lucide-react';
|
import { X, Download, Filter, SortAsc, Search, Calendar, Type, HardDrive, Check, Star } 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,24 +139,6 @@ 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 - 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 */}
|
{/* 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 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;
|
const allowUploads = data?.event?.allow_user_uploads || event?.allow_user_uploads;
|
||||||
if (allowUploads && showSidebar && !isMobile) {
|
if (allowUploads && showSidebar) {
|
||||||
items.push(
|
items.push(
|
||||||
<Button
|
<Button
|
||||||
key="upload-button"
|
key="upload-button"
|
||||||
@@ -619,7 +619,8 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
|
|||||||
leftIcon={<Upload className="w-4 h-4" />}
|
leftIcon={<Upload className="w-4 h-4" />}
|
||||||
onClick={() => setShowUploadModal(true)}
|
onClick={() => setShowUploadModal(true)}
|
||||||
>
|
>
|
||||||
{t('upload.uploadPhotos')}
|
<span className="hidden sm:inline">{t('upload.uploadPhotos')}</span>
|
||||||
|
<span className="sm:hidden">{t('common.upload')}</span>
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user