Make gallery page fully mobile responsive
GalleryLayout improvements: - Stack header elements vertically on mobile - Hide company branding on small screens - Make dates stack vertically - Responsive text sizes and padding - Icon-only logout button on mobile - Improved button layout with proper wrapping PhotoFilterBar improvements: - Stack search and sort vertically on mobile - Full-width sort button on mobile - Horizontally scrollable category filters - Responsive text sizes - Mobile-friendly dropdown positioning PhotoGrid improvements: - Responsive selection controls - Touch-friendly photo overlays - Larger selection checkboxes on mobile - Improved button text for small screens - Responsive gaps between photos Gallery grid CSS: - Smaller gaps on mobile devices - Maintains 2 columns on smallest screens GalleryPage login: - Responsive padding and margins - Smaller text and icon sizes on mobile - Better card spacing - Responsive form elements UserPhotoUpload modal: - Full-screen modal on mobile (slides up from bottom) - Responsive padding and text sizes - Mobile-optimized upload area - Sticky footer on mobile 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -227,37 +227,37 @@ export const GalleryPage: React.FC = () => {
|
||||
// Show login form
|
||||
return (
|
||||
<div className="min-h-screen" style={{ backgroundColor: 'var(--color-background, #fafafa)' }}>
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Logo/Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="text-center mb-6 sm:mb-8">
|
||||
{settingsData?.branding_logo_url ? (
|
||||
<img
|
||||
src={`${import.meta.env.VITE_API_URL || 'http://localhost:3001'}${settingsData.branding_logo_url}`}
|
||||
alt={settingsData.branding_company_name || 'Company Logo'}
|
||||
className="h-20 w-auto object-contain mx-auto mb-4"
|
||||
className="h-16 sm:h-20 w-auto object-contain mx-auto mb-4"
|
||||
/>
|
||||
) : (
|
||||
<div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl mb-4" style={{ backgroundColor: 'var(--color-primary, #5C8762)' }}>
|
||||
<Camera className="w-10 h-10 text-white" />
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-2xl mb-4" style={{ backgroundColor: 'var(--color-primary, #5C8762)' }}>
|
||||
<Camera className="w-8 h-8 sm:w-10 sm:h-10 text-white" />
|
||||
</div>
|
||||
)}
|
||||
<h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--color-text, #171717)' }}>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold mb-2 px-4" style={{ color: 'var(--color-text, #171717)' }}>
|
||||
{galleryInfo?.event_name}
|
||||
</h1>
|
||||
<div className="flex items-center justify-center text-sm" style={{ color: 'var(--color-text, #171717)', opacity: 0.7 }}>
|
||||
<Calendar className="w-4 h-4 mr-1" />
|
||||
{format(parseISO(galleryInfo!.event_date), 'PP')}
|
||||
<div className="flex items-center justify-center text-xs sm:text-sm" style={{ color: 'var(--color-text, #171717)', opacity: 0.7 }}>
|
||||
<Calendar className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
|
||||
<span className="truncate">{format(parseISO(galleryInfo!.event_date), 'PP')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expiration Warning */}
|
||||
{daysUntilExpiration !== null && daysUntilExpiration <= 7 && (
|
||||
<div className="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-lg">
|
||||
<div className="mb-4 sm:mb-6 p-3 sm:p-4 bg-amber-50 border border-amber-200 rounded-lg mx-4 sm:mx-0">
|
||||
<div className="flex items-start">
|
||||
<AlertCircle className="w-5 h-5 text-amber-600 mt-0.5 mr-2 flex-shrink-0" />
|
||||
<AlertCircle className="w-4 h-4 sm:w-5 sm:h-5 text-amber-600 mt-0.5 mr-2 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-amber-800">
|
||||
<p className="text-xs sm:text-sm font-medium text-amber-800">
|
||||
{t('gallery.expiresIn', { count: daysUntilExpiration })}
|
||||
</p>
|
||||
<p className="text-xs text-amber-700 mt-1">
|
||||
@@ -269,9 +269,9 @@ export const GalleryPage: React.FC = () => {
|
||||
)}
|
||||
|
||||
{/* Login Card */}
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h2 className="text-xl font-semibold mb-6">{t('auth.enterPassword')}</h2>
|
||||
<Card className="mx-4 sm:mx-0">
|
||||
<CardContent className="p-5 sm:p-6">
|
||||
<h2 className="text-lg sm:text-xl font-semibold mb-4 sm:mb-6">{t('auth.enterPassword')}</h2>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<Input
|
||||
@@ -282,6 +282,7 @@ export const GalleryPage: React.FC = () => {
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
error={loginError || undefined}
|
||||
autoFocus
|
||||
className="text-sm sm:text-base"
|
||||
/>
|
||||
|
||||
<ReCaptcha
|
||||
@@ -293,7 +294,7 @@ export const GalleryPage: React.FC = () => {
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="w-full"
|
||||
className="w-full text-sm sm:text-base"
|
||||
isLoading={isLoggingIn}
|
||||
disabled={isLoggingIn}
|
||||
>
|
||||
@@ -301,14 +302,14 @@ export const GalleryPage: React.FC = () => {
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="text-xs text-neutral-500 text-center mt-6">
|
||||
<p className="text-xs text-neutral-500 text-center mt-4 sm:mt-6">
|
||||
{t('auth.passwordHint')}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Legal Links */}
|
||||
<div className="text-center mt-6">
|
||||
<div className="text-center mt-4 sm:mt-6">
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<Link
|
||||
to="/impressum"
|
||||
|
||||
Reference in New Issue
Block a user