diff --git a/src/components/AuthorProfile.tsx b/src/components/AuthorProfile.tsx index 04c4998..6d8533a 100644 --- a/src/components/AuthorProfile.tsx +++ b/src/components/AuthorProfile.tsx @@ -22,8 +22,7 @@ const AuthorProfile = ({ src, author, npub, setViewMode }: AvatarImageProps) => npub && nav({ ...currentSettings, tags: [], npubs: [npub] }); }} > -
- {avatarLoaded && ( + {avatarLoaded && (
}} >
)} - {author} -
+ {author} ); }; diff --git a/src/components/GridView/DetailsView.css b/src/components/GridView/DetailsView.css index 26b1085..03e08da 100644 --- a/src/components/GridView/DetailsView.css +++ b/src/components/GridView/DetailsView.css @@ -195,6 +195,7 @@ } } + @media screen and (max-width: 768px) { .details { overflow-y: scroll; @@ -212,10 +213,7 @@ margin: 0px; } .details-author .author-name { - width: 17em; - text-overflow: ellipsis; - overflow: hidden; - max-height: 3em; + display: none; } .details-actions { position: fixed; diff --git a/src/components/GridView/GridView.css b/src/components/GridView/GridView.css index ec8446d..2babc7a 100644 --- a/src/components/GridView/GridView.css +++ b/src/components/GridView/GridView.css @@ -14,6 +14,7 @@ flex-direction: column; align-items: start; height: 100dvh; + overflow: scroll; } .imagegrid { @@ -22,7 +23,6 @@ grid-gap: 1rem; padding: 1rem; width: 100vw; - overflow: scroll; box-sizing: border-box; } @@ -62,3 +62,20 @@ filter: brightness(1.1); outline: 1px solid #fff; } + +.profile-header { + padding:2em; + padding-bottom: 1em; +} + +.profile-header .author-info { + position: relative; + bottom: initial; + left: initial; +} + +@media screen and (max-width: 768px) { + .profile-header .author-info .author-name { + display: block; + } +} diff --git a/src/components/GridView/ScrollView.tsx b/src/components/GridView/ScrollView.tsx index ea9980e..f9208bc 100644 --- a/src/components/GridView/ScrollView.tsx +++ b/src/components/GridView/ScrollView.tsx @@ -16,7 +16,6 @@ type ScrollViewProps = { }; const ScrollView = ({ settings, images, currentImage, setCurrentImage, setViewMode }: ScrollViewProps) => { - const sortedImages = useMemo( () => images.sort((a, b) => (b.timestamp && a.timestamp ? b.timestamp - a.timestamp : 0)), // sort by timestamp descending [images] // settings is not used here, but we need to include it to trigger a re-render when it changes @@ -29,17 +28,19 @@ const ScrollView = ({ settings, images, currentImage, setCurrentImage, setViewMo } }, []); - const activeImage = useMemo(() => currentImage ? sortedImages[currentImage] : undefined, [sortedImages, currentImage]); + const activeImage = useMemo( + () => (currentImage ? sortedImages[currentImage] : undefined), + [sortedImages, currentImage] + ); const { activeProfile, profileNpub, title } = useProfile(settings, activeImage); console.log(JSON.stringify(activeProfile)); return ( -
{title} - + {sortedImages.map((image, idx) => ( ) : null} */} + {activeProfile && ( +
+ + {/* + {activeProfile.banner} + {activeProfile.bio} + {activeProfile.website} + */} +
+ )} +
{sortedImages.map((image, idx) => ( ))}
- {activeProfile && ( - - )}
); }; diff --git a/src/components/SlideShow.css b/src/components/SlideShow.css index c081b52..33172ba 100644 --- a/src/components/SlideShow.css +++ b/src/components/SlideShow.css @@ -98,6 +98,8 @@ animation-name: showImage; } + + .slide video { max-height: 100dvh; max-width: 100vw; @@ -238,3 +240,9 @@ width: 80vw; } } + +@media screen and (max-width: 768px) { + .author-name { + display: none; + } +} \ No newline at end of file diff --git a/src/utils/globalState.tsx b/src/utils/globalState.tsx index 4c3196d..4b31403 100644 --- a/src/utils/globalState.tsx +++ b/src/utils/globalState.tsx @@ -1,3 +1,4 @@ +import { NostrImage } from '@/components/nostrImageDownload'; import { NDKUserProfile } from '@nostr-dev-kit/ndk'; import React, { createContext, useContext, useReducer } from 'react'; @@ -6,6 +7,7 @@ interface GlobalState { userNPub?: string; profile?: NDKUserProfile; showNavButtons: boolean; + activeImage?: NostrImage; } const initialState: GlobalState = { userNPub: undefined,