paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix gallery mobile view issues

Browse Source 
- Make logout button show only icon on mobile (no text)
- Move upload button from top bar to sidebar menu on mobile
- Fix top bar layout with proper structure:
  - Logo on left
  - Gallery title centered
  - Event date and expiration date shown below title on mobile
- Improve responsive design for header elements
- Ensure upload button only appears in menu when uploads are enabled

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
paul
2025-07-11 08:30:07 +02:00
parent 5328b4f73a
commit 9006b754a8
11 changed files with 357 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/gallery/UserPhotoUpload.tsx
+36 -38
View File
@@ -113,22 +113,21 @@ export const UserPhotoUpload: React.FC<UserPhotoUploadProps> = ({
};
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-end sm:items-center justify-center z-50">
<Card className="w-full sm:max-w-2xl max-h-[100vh] sm:max-h-[90vh] overflow-hidden sm:mx-4 rounded-t-2xl sm:rounded-2xl">
<CardContent className="p-0">
{/* Header */}
<div className="flex items-center justify-between p-4 sm:p-6 border-b border-neutral-200">
<h2 className="text-lg sm:text-xl font-semibold text-neutral-900">{t('upload.uploadPhotos')}</h2>
<button
onClick={onClose}
className="p-1.5 sm:p-2 hover:bg-neutral-100 rounded-lg transition-colors"
>
<X className="w-5 h-5 text-neutral-500" />
</button>
</div>
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-end sm:items-center justify-center z-50 p-0 sm:p-4">
<div className="w-full sm:max-w-2xl bg-white flex flex-col max-h-[100vh] sm:max-h-[90vh] rounded-t-2xl sm:rounded-2xl shadow-xl">
{/* Fixed Header */}
<div className="flex items-center justify-between p-4 sm:p-6 border-b border-neutral-200 flex-shrink-0">
<h2 className="text-lg sm:text-xl font-semibold text-neutral-900">{t('upload.uploadPhotos')}</h2>
<button
onClick={onClose}
className="p-1.5 sm:p-2 hover:bg-neutral-100 rounded-lg transition-colors"
>
<X className="w-5 h-5 text-neutral-500" />
</button>
</div>
{/* Content */}
<div className="p-4 sm:p-6 overflow-y-auto" style={{ maxHeight: 'calc(100vh - 160px)', minHeight: '300px' }}>
{/* Scrollable Content */}
<div className="flex-1 p-4 sm:p-6 overflow-y-auto min-h-0">
{/* Upload Area */}
<div className="mb-4 sm:mb-6">
<label className="block">
@@ -199,30 +198,29 @@ export const UserPhotoUpload: React.FC<UserPhotoUploadProps> = ({
))}
</div>
)}
</div>
</div>
{/* Footer */}
<div className="flex items-center justify-end gap-2 sm:gap-3 p-4 sm:p-6 border-t border-neutral-200 bg-white">
<Button
variant="outline"
onClick={onClose}
disabled={uploading}
className="text-sm sm:text-base"
>
{t('common.cancel')}
</Button>
<Button
variant="primary"
onClick={handleUpload}
disabled={files.length === 0 || uploading}
isLoading={uploading}
className="text-sm sm:text-base"
>
{uploading ? t('upload.uploading') : t('common.upload')} ({files.length})
</Button>
</div>
</CardContent>
</Card>
{/* Fixed Footer */}
<div className="flex items-center justify-end gap-2 sm:gap-3 p-4 sm:p-6 border-t border-neutral-200 bg-white flex-shrink-0">
<Button
variant="outline"
onClick={onClose}
disabled={uploading}
className="text-sm sm:text-base"
>
{t('common.cancel')}
</Button>
<Button
variant="primary"
onClick={handleUpload}
disabled={files.length === 0 || uploading}
isLoading={uploading}
className="text-sm sm:text-base"
>
{uploading ? t('upload.uploading') : t('common.upload')} ({files.length})
</Button>
</div>
</div>
</div>
);
};