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
if (provider === 'twitter') {
return (
<div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}>
<TwitterTweetEmbed
tweetId={id}
options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }}
key={darkMode ? '1' : '2'}
placeholder={<TweetSkeleton className={className} />}
onLoad={() => setOverflowing(true)}
/>
{overflowing && !show &&
<Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
show full tweet
</Button>}
</div>
<>
<div className={classNames(styles.twitterContainer, !show && styles.twitterContained, className)}>
<TwitterTweetEmbed
tweetId={id}
options={{ theme: darkMode ? 'dark' : 'light', width: topLevel ? '550px' : '350px' }}
key={darkMode ? '1' : '2'}
placeholder={<TweetSkeleton className={className} />}
onLoad={() => setOverflowing(true)}
/>
{overflowing && !show &&
<Button size='lg' variant='info' className={styles.twitterShowFull} onClick={() => setShow(true)}>
show full tweet
</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>
},
img: TextMediaOrLink,
embed: Embed
embed: (props) => <Embed {...props} topLevel={topLevel} />
}), [outlawed, rel, TextMediaOrLink, topLevel])
const carousel = useCarousel()

7
components/text.module.css
View File

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