pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 09:11:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Improve mobile photo modal layout

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-02 13:55:30 +00:00
parent 60c6fa8be5
commit 3314b7b67a
1 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/upload/PhotoManagementDialog.tsx
View File

@@ -13,7 +13,7 @@ import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { ArrowUp, ArrowDown, Trash2, Star, StarOff } from 'lucide-react'; import { ArrowUp, ArrowDown, Trash2, Star, StarOff, Pencil } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
interface Photo { interface Photo {
@@ -294,9 +294,9 @@ export function PhotoManagementDialog({
<div className="space-y-4"> <div className="space-y-4">
{photos.map((photo, index) => ( {photos.map((photo, index) => (
<Card key={photo.id}> <Card key={photo.id}>
<CardContent className="p-2 sm:p-4"> <CardContent className="p-3 sm:p-4">
<div className="flex gap-2 sm:gap-4"> <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
<div className="w-20 h-20 sm:w-32 sm:h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div className="w-full aspect-video sm:w-32 sm:h-32 flex-shrink-0 overflow-hidden rounded-lg">
<img <img
src={photo.cloudflare_image_url} src={photo.cloudflare_image_url}
alt={photo.title || 'Photo'} alt={photo.title || 'Photo'}
@@ -323,47 +323,63 @@ export function PhotoManagementDialog({
)} )}
</div> </div>
<div className="flex items-center flex-wrap gap-1 sm:gap-2"> <div className="grid grid-cols-2 sm:flex sm:flex-wrap gap-2">
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
onClick={() => movePhoto(photo.id, 'up')} onClick={() => movePhoto(photo.id, 'up')}
disabled={index === 0} disabled={index === 0}
className="justify-start sm:justify-center"
> >
<ArrowUp className="w-4 h-4" /> <ArrowUp className="w-4 h-4 mr-2" />
<span className="sm:hidden">Move Up</span>
</Button> </Button>
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
onClick={() => movePhoto(photo.id, 'down')} onClick={() => movePhoto(photo.id, 'down')}
disabled={index === photos.length - 1} disabled={index === photos.length - 1}
className="justify-start sm:justify-center"
> >
<ArrowDown className="w-4 h-4" /> <ArrowDown className="w-4 h-4 mr-2" />
<span className="sm:hidden">Move Down</span>
</Button> </Button>
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
onClick={() => toggleFeatured(photo.id)} onClick={() => toggleFeatured(photo.id)}
className="justify-start sm:justify-center"
> >
{photo.is_featured ? ( {photo.is_featured ? (
<StarOff className="w-4 h-4" /> <>
<StarOff className="w-4 h-4 mr-2" />
<span className="sm:hidden">Remove Featured</span>
</>
) : ( ) : (
<Star className="w-4 h-4" /> <>
<Star className="w-4 h-4 mr-2" />
<span className="sm:hidden">Set Featured</span>
</>
)} )}
</Button> </Button>
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
onClick={() => setEditingPhoto(photo)} onClick={() => setEditingPhoto(photo)}
className="justify-start sm:justify-center"
> >
Edit <Pencil className="w-4 h-4 mr-2" />
<span className="sm:hidden">Edit Details</span>
<span className="hidden sm:inline">Edit</span>
</Button> </Button>
<Button <Button
size="sm" size="sm"
variant="destructive" variant="destructive"
onClick={() => deletePhoto(photo.id)} onClick={() => deletePhoto(photo.id)}
className="col-span-2 justify-start sm:justify-center"
> >
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4 mr-2" />
<span className="sm:hidden">Delete Photo</span>
</Button> </Button>
</div> </div>
</div> </div>