ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-09 03:03:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

scrollable photo list and fixed photo box

Browse Source
This commit is contained in:
Oliver Bryan
2026-02-08 08:55:08 +00:00
parent 492251bd47
commit f4e8f02924
1 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/App.tsx
View File

@@ -505,11 +505,18 @@ function Home() {
</div>
) : (
<div className="flex">
<div className="flex flex-col flex-1 ml-8">
<div
id={getTravelPhotoListId(location.id)}
className="flex flex-col flex-1 ml-8 max-h-128 overflow-y-auto gap-1"
>
{locationPhotos[location.id].map(
(photo, photoIndex) => (
<Button
key={photo}
id={getTravelPhotoItemId(
location.id,
photoIndex,
)}
onClick={() => {
const path = getTravelPhotoPath(
location,
@@ -541,22 +548,24 @@ function Home() {
),
)}
</div>
{previewPhotoPath ? (
<img
className={"flex-1 max-w-sm"}
src={previewPhotoPath}
alt={"active-photo"}
/>
) : (
<div
className={
"flex-1 max-w-sm border flex items-center justify-center text-sm gap-4"
}
>
<ImageDelete />
No photo selected
</div>
)}
<div
className={
"flex-1 max-w-sm border flex items-center h-128 justify-center text-sm gap-4"
}
>
{previewPhotoPath ? (
<img
className={"flex-1 max-w-sm"}
src={previewPhotoPath}
alt={"active-photo"}
/>
) : (
<span>
<ImageDelete />
No photo selected
</span>
)}
</div>
</div>
))}
</div>