ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix embed list bullet to render at top of embed (#2221)

Browse Source 
* fix embed list bullet to render at top of embed

* make it work for images/video

* fix tweet skeleton and list horizontal scroll

---------

Co-authored-by: k00b <k00b@stacker.news>
This commit is contained in:
Bryan Mutai 2025-06-18 02:33:42 +03:00 committed by GitHub
parent a7f73fef90
commit 6d50f7c9fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/embed.js
View File

@ -125,19 +125,21 @@ const Embed = memo(function Embed ({ src, provider, id, meta, className, topLeve
// This Twitter embed could use similar logic to the video embeds below // This Twitter embed could use similar logic to the video embeds below
if (provider === 'twitter') { if (provider === 'twitter') {
return ( return (
<div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}> <>
<TwitterTweetEmbed <div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}>
tweetId={id} <TwitterTweetEmbed
options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }} tweetId={id}
key={darkMode ? '1' : '2'} options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }}
placeholder={<TweetSkeleton className={className} />} key={darkMode ? '1' : '2'}
onLoad={() => setOverflowing(true)} placeholder={<TweetSkeleton className={className} />}
/> onLoad={() => setOverflowing(true)}
{overflowing && !show && />
<Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}> {overflowing && !show &&
show full tweet <Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
</Button>} show full tweet
</div> </Button>}
</div>
</>
) )
} }

2
components/text.js
View File

@ -138,7 +138,7 @@ export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, child
return <Link id={props.id} target='_blank' rel={rel} href={href}>{children}</Link> return <Link id={props.id} target='_blank' rel={rel} href={href}>{children}</Link>
}, },
img: TextMediaOrLink, img: TextMediaOrLink,
embed: Embed embed: (props) => <Embed {...props} topLevel={topLevel} />
}), [outlawed, rel, TextMediaOrLink, topLevel]) }), [outlawed, rel, TextMediaOrLink, topLevel])
const carousel = useCarousel() const carousel = useCarousel()

7
components/text.module.css
View File

@ -252,11 +252,18 @@
margin-top: .25rem; margin-top: .25rem;
} }
.text li > :is(.twitterContainer, .nostrContainer, .wavlakeWrapper, .spotifyWrapper, .onlyImages) {
display: inline-flex;
vertical-align: top;
width: 100%;
}
.text ul, .text ul,
.text ol { .text ol {
margin-top: 0; margin-top: 0;
margin-bottom: 0rem; margin-bottom: 0rem;
padding-left: 2rem; padding-left: 2rem;
max-width: calc(100% - 1rem);
} }
.text ol ol, .text ol ol,