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 (
<ItemComponent item={item} toc showFwdUser {...props}>
{item.text && <div className='mb-2'><ItemText item={item} /></div>}
{item.url && <ItemEmbed item={item} />}
{item.poll && <Poll item={item} />}
{item.bounty &&
<div className='font-weight-bold my-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>)
: (
<div className='px-3 py-1 d-inline-block bg-grey-darkmode rounded text-light'>
{item.bounty} sats bounty
</div>)}
</div>}
<div className={styles.fullItemContainer}>
{item.text && <ItemText item={item} />}
{item.url && <ItemEmbed item={item} />}
{item.poll && <Poll item={item} />}
{item.bounty &&
<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>)
: (
<div className='px-3 py-1 d-inline-block bg-grey-darkmode rounded text-light'>
{item.bounty} sats bounty
</div>)}
</div>}
</div>
{!noReply &&
<>
<Reply item={item} replyOpen />

17
styles/item.module.css
View File

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