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

fix item spacing generically

This commit is contained in:
keyan 2023-01-27 15:01:32 -06:00
parent 82502e724f
commit 670f071177
2 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/item-full.js
View File

@ -96,21 +96,23 @@ function TopLevelItem ({ item, noReply, ...props }) {
return ( return (
<ItemComponent item={item} toc showFwdUser {...props}> <ItemComponent item={item} toc showFwdUser {...props}>
{item.text && <div className='mb-2'><ItemText item={item} /></div>} <div className={styles.fullItemContainer}>
{item.url && <ItemEmbed item={item} />} {item.text && <ItemText item={item} />}
{item.poll && <Poll item={item} />} {item.url && <ItemEmbed item={item} />}
{item.bounty && {item.poll && <Poll item={item} />}
<div className='font-weight-bold my-2'> {item.bounty &&
{item.bountyPaidTo?.length <div className='font-weight-bold mt-2'>
? ( {item.bountyPaidTo?.length
<div className='px-3 py-1 d-inline-block bg-grey-medium rounded text-success'> ? (
<Check className='fill-success' /> {item.bounty} sats paid <div className='px-3 py-1 d-inline-block bg-grey-medium rounded text-success'>
</div>) <Check className='fill-success' /> {item.bounty} sats paid
: ( </div>)
<div className='px-3 py-1 d-inline-block bg-grey-darkmode rounded text-light'> : (
{item.bounty} sats bounty <div className='px-3 py-1 d-inline-block bg-grey-darkmode rounded text-light'>
</div>)} {item.bounty} sats bounty
</div>} </div>)}
</div>}
</div>
{!noReply && {!noReply &&
<> <>
<Reply item={item} replyOpen /> <Reply item={item} replyOpen />

17
styles/item.module.css
View File

@ -50,30 +50,45 @@
width: 100%; width: 100%;
padding-right: 12px; padding-right: 12px;
} }
.tweetSkeleton { .tweetSkeleton {
width: 100%; width: 100%;
} }
.tweetSkeleton { .tweetSkeleton {
border: 0.05rem solid var(--theme-borderColor); border: 0.05rem solid var(--theme-borderColor);
border-radius: 12px; border-radius: 12px;
height: 200px; height: 200px;
padding: 1.5rem; padding: 1.5rem;
} }
.tweetSkeleton .img { .tweetSkeleton .img {
height: 48px; height: 48px;
width: 48px; width: 48px;
border-radius: 50%; border-radius: 50%;
} }
.tweetSkeleton .content1, .tweetSkeleton .content2 {
.tweetSkeleton .content1,
.tweetSkeleton .content2 {
height: 50%; height: 50%;
margin-top: 1rem; margin-top: 1rem;
} }
.tweetSkeleton .line { .tweetSkeleton .line {
height: 25%; height: 25%;
margin: 0.5rem 0; margin: 0.5rem 0;
width: 100%; width: 100%;
border-radius: .4rem; border-radius: .4rem;
} }
.tweetSkeleton .line:last-child { .tweetSkeleton .line:last-child {
width: 75%; width: 75%;
} }
.fullItemContainer {
margin-bottom: .5rem;
}
.fullItemContainer:empty {
margin: 0;
}