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:
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user