clone/afilmory
1
0
Fork 0
mirror of https://github.com/Afilmory/afilmory synced 2026-04-25 07:15:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: hide EXIF grid for short photo items fixed #21

Browse Source 
- Implemented a height check to hide the EXIF information grid when the photo item height is less than 300px.
- Ensured that other information such as title, description, and tags remain visible regardless of the photo height.
- Updated the PhotoMasonryItem component to conditionally render the EXIF grid based on the calculated height.

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei
2025-06-26 21:17:53 +08:00
parent ebd6b391e9
commit 9e0b584ca3
2 changed files with 143 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
.specstory/history/2025-06-26_12-49-hide-exif-grid-for-short-items.md Normal file
View File

@@ -0,0 +1,97 @@
<!-- Generated by SpecStory -->
# Hide exif grid for short items (2025-06-26 20:49:48)
_**User**_
判断 item 高度，在少于 300px 时，不显示 exif 网格
---
_**Assistant**_
我将帮你在照片项目高度少于 300px 时隐藏 EXIF 网格。
---
```diff
{/* EXIF 信息网格 */}
- <div className="grid grid-cols-2 gap-2 text-xs">
- {exifData.focalLength35mm && (
- <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
- <StreamlineImageAccessoriesLensesPhotosCameraShutterPicturePhotographyPicturesPhotoLens className="text-white/70" />
- <span className="text-white/90">
- {exifData.focalLength35mm}mm
- </span>
- </div>
- )}
+ {calculatedHeight >= 300 && (
+ <div className="grid grid-cols-2 gap-2 text-xs">
+ {exifData.focalLength35mm && (
+ <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
+ <StreamlineImageAccessoriesLensesPhotosCameraShutterPicturePhotographyPicturesPhotoLens className="text-white/70" />
+ <span className="text-white/90">
+ {exifData.focalLength35mm}mm
+ </span>
+ </div>
+ )}
- {exifData.aperture && (
- <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
- <TablerAperture className="text-white/70" />
- <span className="text-white/90">{exifData.aperture}</span>
- </div>
- )}
+ {exifData.aperture && (
+ <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
+ <TablerAperture className="text-white/70" />
+ <span className="text-white/90">{exifData.aperture}</span>
+ </div>
+ )}
- {exifData.shutterSpeed && (
- <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
- <MaterialSymbolsShutterSpeed className="text-white/70" />
- <span className="text-white/90">{exifData.shutterSpeed}</span>
- </div>
- )}
+ {exifData.shutterSpeed && (
+ <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
+ <MaterialSymbolsShutterSpeed className="text-white/70" />
+ <span className="text-white/90">{exifData.shutterSpeed}</span>
+ </div>
+ )}
- {exifData.iso && (
- <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
- <CarbonIsoOutline className="text-white/70" />
- <span className="text-white/90">ISO {exifData.iso}</span>
- </div>
- )}
- </div>
+ {exifData.iso && (
+ <div className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 opacity-0 backdrop-blur-md transition-opacity duration-300 group-hover:opacity-100">
+ <CarbonIsoOutline className="text-white/70" />
+ <span className="text-white/90">ISO {exifData.iso}</span>
+ </div>
+ )}
+ </div>
+ )}
</div>
</div>
```
---
完成！我已经添加了高度判断条件 `calculatedHeight >= 300`，现在只有当照片项目的高度大于等于 300px 时才会显示 EXIF 信息网格。
修改的逻辑是：
- 使用 `calculatedHeight >= 300` 条件包裹整个 EXIF 网格部分
- 当照片高度小于 300px 时，EXIF 网格将被完全隐藏
- 其他信息（标题、描述、基本信息、标签）仍然会正常显示
这样可以确保在较小的照片项目中不会因为显示过多信息而造成界面拥挤。
---