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 gallery view

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-02 13:34:30 +00:00
parent 9cd95951a2
commit 15a1925093
1 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/upload/EntityPhotoGallery.tsx
View File

@@ -102,9 +102,9 @@ export function EntityPhotoGallery({
if (showUpload) {
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold">Upload Photos for {entityName}</h3>
<Button variant="ghost" onClick={() => setShowUpload(false)}>
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-0">
<h3 className="text-base sm:text-lg font-semibold">Upload Photos for {entityName}</h3>
<Button variant="ghost" onClick={() => setShowUpload(false)} className="w-full sm:w-auto">
Back to Gallery
</Button>
</div>
@@ -120,10 +120,10 @@ export function EntityPhotoGallery({
if (loading) {
return (
<div className="flex items-center justify-center py-12">
<div className="flex items-center justify-center py-8 sm:py-12">
<div className="animate-pulse flex items-center gap-3">
<Camera className="w-8 h-8 text-muted-foreground" />
<span className="text-muted-foreground">Loading photos...</span>
<Camera className="w-6 h-6 sm:w-8 sm:h-8 text-muted-foreground" />
<span className="text-sm sm:text-base text-muted-foreground">Loading photos...</span>
</div>
</div>
);
@@ -132,30 +132,30 @@ export function EntityPhotoGallery({
return (
<div className="space-y-6">
{/* Header with Upload and Management Buttons */}
<div className="flex items-center justify-between">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-0 space-y-3 sm:space-y-0">
<div>
<h3 className="text-lg font-semibold">Photo Gallery</h3>
<p className="text-sm text-muted-foreground">
<h3 className="text-base sm:text-lg font-semibold">Photo Gallery</h3>
<p className="text-sm text-muted-foreground hidden sm:block">
Share your photos of {entityName}
</p>
</div>
<div className="flex gap-2">
<div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
{isModerator && photos.length > 0 && (
<Button onClick={() => setShowManagement(true)} variant="outline" className="gap-2">
<Button onClick={() => setShowManagement(true)} variant="outline" className="gap-2 w-full sm:w-auto">
<Settings className="w-4 h-4" />
Manage
<span className="sm:inline">Manage</span>
</Button>
)}
<Button onClick={handleUploadClick} className="gap-2">
<Button onClick={handleUploadClick} className="gap-2 w-full sm:w-auto">
{user ? (
<>
<Upload className="w-4 h-4" />
Upload Photos
<span className="sm:inline">Upload Photos</span>
</>
) : (
<>
<LogIn className="w-4 h-4" />
Sign in to Upload
<span className="sm:inline">Sign in to Upload</span>
</>
)}
</Button>
@@ -173,23 +173,23 @@ export function EntityPhotoGallery({
{/* Photo Grid */}
{photos.length > 0 ? (
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
{photos.map((photo, index) => (
<Card key={photo.id} className="overflow-hidden">
<CardContent className="p-0">
<img
src={photo.url}
alt={photo.title || photo.caption || `${entityName} photo`}
className="w-full h-48 object-cover hover:scale-105 transition-transform cursor-pointer"
className="w-full h-48 sm:h-56 md:h-48 object-cover transition-transform cursor-pointer touch-manipulation active:opacity-80 sm:hover:scale-105"
onClick={() => handlePhotoClick(index)}
/>
{(photo.title || photo.caption) && (
<div className="p-3">
<div className="p-2 sm:p-3">
{photo.title && (
<h4 className="font-medium text-sm truncate">{photo.title}</h4>
<h4 className="font-medium text-xs sm:text-sm line-clamp-2">{photo.title}</h4>
)}
{photo.caption && (
<p className="text-xs text-muted-foreground truncate mt-1">
<p className="text-[10px] sm:text-xs text-muted-foreground line-clamp-2 mt-1">
{photo.caption}
</p>
)}
@@ -200,22 +200,22 @@ export function EntityPhotoGallery({
))}
</div>
) : (
<div className="text-center py-12">
<Camera className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
<h3 className="text-xl font-semibold mb-2">No Photos Yet</h3>
<p className="text-muted-foreground mb-4">
<div className="text-center py-12 px-4">
<Camera className="w-12 h-12 sm:w-16 sm:h-16 text-muted-foreground mx-auto mb-4" />
<h3 className="text-lg sm:text-xl font-semibold mb-2">No Photos Yet</h3>
<p className="text-sm text-muted-foreground mb-4">
Be the first to share photos of {entityName}!
</p>
<Button onClick={handleUploadClick} className="gap-2">
<Button onClick={handleUploadClick} className="gap-2 w-full sm:w-auto">
{user ? (
<>
<Upload className="w-4 h-4" />
Upload First Photo
<span>Upload First Photo</span>
</>
) : (
<>
<LogIn className="w-4 h-4" />
Sign in to Upload
<span>Sign in to Upload</span>
</>
)}
</Button>