ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-09 11:13:03 +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>
) : ( ) : (
<div className="flex"> <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( {locationPhotos[location.id].map(
(photo, photoIndex) => ( (photo, photoIndex) => (
<Button <Button
key={photo} key={photo}
id={getTravelPhotoItemId(
location.id,
photoIndex,
)}
onClick={() => { onClick={() => {
const path = getTravelPhotoPath( const path = getTravelPhotoPath(
location, location,
@@ -541,22 +548,24 @@ function Home() {
), ),
)} )}
</div> </div>
{previewPhotoPath ? ( <div
<img className={
className={"flex-1 max-w-sm"} "flex-1 max-w-sm border flex items-center h-128 justify-center text-sm gap-4"
src={previewPhotoPath} }
alt={"active-photo"} >
/> {previewPhotoPath ? (
) : ( <img
<div className={"flex-1 max-w-sm"}
className={ src={previewPhotoPath}
"flex-1 max-w-sm border flex items-center justify-center text-sm gap-4" alt={"active-photo"}
} />
> ) : (
<ImageDelete /> <span>
No photo selected <ImageDelete />
</div> No photo selected
)} </span>
)}
</div>
</div> </div>
))} ))}
</div> </div>