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 photo display

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-02 14:03:03 +00:00
parent b43f794956
commit d00b0ba71a
1 changed files with 6 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/moderation/PhotoModal.tsx
View File

@@ -93,9 +93,11 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
{/* Header */} {/* Header */}
<div className={`absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent ${isMobile ? 'p-3' : 'p-4'}`}> <div className={`absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent ${isMobile ? 'p-3' : 'p-4'}`}>
<div className="text-white"> <div className="text-white">
{currentPhoto?.caption && (
<h3 className={`font-medium ${isMobile ? 'text-sm pr-12' : ''}`}> <h3 className={`font-medium ${isMobile ? 'text-sm pr-12' : ''}`}>
{currentPhoto?.filename || `Photo ${currentIndex + 1}`} {currentPhoto.caption}
</h3> </h3>
)}
{photos.length > 1 && ( {photos.length > 1 && (
<p className={`text-white/70 ${isMobile ? 'text-xs' : 'text-sm'}`}> <p className={`text-white/70 ${isMobile ? 'text-xs' : 'text-sm'}`}>
{currentIndex + 1} of {photos.length} {currentIndex + 1} of {photos.length}
@@ -140,7 +142,7 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
{/* Mobile navigation dots */} {/* Mobile navigation dots */}
{photos.length > 1 && isMobile && ( {photos.length > 1 && isMobile && (
<div className="absolute bottom-20 left-0 right-0 flex justify-center gap-2 px-4"> <div className="absolute bottom-4 left-0 right-0 flex justify-center gap-2 px-4">
{photos.map((_, idx) => ( {photos.map((_, idx) => (
<button <button
key={idx} key={idx}
@@ -155,13 +157,6 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
))} ))}
</div> </div>
)} )}
{/* Caption */}
{currentPhoto?.caption && (
<div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent ${isMobile ? 'p-3' : 'p-4'} ${isMobile && photos.length > 1 ? 'pb-14' : ''}`}>
<p className={`text-white ${isMobile ? 'text-xs' : 'text-sm'}`}>{currentPhoto.caption}</p>
</div>
)}
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>