pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 18:11:12 -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 { Textarea } from '@/components/ui/textarea';
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';
interface Photo {
@@ -294,9 +294,9 @@ export function PhotoManagementDialog({
<div className="space-y-4">
{photos.map((photo, index) => (
<Card key={photo.id}>
<CardContent className="p-2 sm:p-4">
<div className="flex gap-2 sm:gap-4">
<div className="w-20 h-20 sm:w-32 sm:h-32 flex-shrink-0 overflow-hidden rounded-lg">
<CardContent className="p-3 sm:p-4">
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
<div className="w-full aspect-video sm:w-32 sm:h-32 flex-shrink-0 overflow-hidden rounded-lg">
<img
src={photo.cloudflare_image_url}
alt={photo.title || 'Photo'}
@@ -323,47 +323,63 @@ export function PhotoManagementDialog({
)}
</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
size="sm"
variant="outline"
onClick={() => movePhoto(photo.id, 'up')}
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
size="sm"
variant="outline"
onClick={() => movePhoto(photo.id, 'down')}
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
size="sm"
variant="outline"
onClick={() => toggleFeatured(photo.id)}
className="justify-start sm:justify-center"
>
{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
size="sm"
variant="outline"
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
size="sm"
variant="destructive"
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>
</div>
</div>