Make smaller statuses stand out in the carousel

This commit is contained in:
Lim Chee Aun 2023-02-19 01:10:06 +08:00
parent 65c1af2eac
commit 7e65d8be5d
3 changed files with 19 additions and 2 deletions

View file

@ -614,6 +614,15 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
counter-increment: index; counter-increment: index;
position: relative; position: relative;
} }
.status-carousel .content-container .content:only-child {
font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0));
}
.status-carousel
.content-container[style*='content-text-weight:1']
.media-container.media-eq1 {
/* LOL, this is madness, reading a value from the style attribute */
height: auto;
}
.status-carousel.boosts-carousel { .status-carousel.boosts-carousel {
--carousel-color: var(--reblog-color); --carousel-color: var(--reblog-color);
--carousel-faded-color: var(--reblog-faded-color); --carousel-faded-color: var(--reblog-faded-color);

View file

@ -43,6 +43,7 @@ function Status({
size = 'm', size = 'm',
skeleton, skeleton,
readOnly, readOnly,
contentTextWeight,
}) { }) {
if (skeleton) { if (skeleton) {
return ( return (
@ -160,7 +161,12 @@ function Status({
<NameText account={status.account} instance={instance} showAvatar />{' '} <NameText account={status.account} instance={instance} showAvatar />{' '}
boosted boosted
</div> </div>
<Status status={reblog} instance={instance} size={size} /> <Status
status={reblog}
instance={instance}
size={size}
contentTextWeight={contentTextWeight}
/>
</div> </div>
); );
} }
@ -320,7 +326,7 @@ function Status({
spoilerText || sensitive ? 'has-spoiler' : '' spoilerText || sensitive ? 'has-spoiler' : ''
} ${showSpoiler ? 'show-spoiler' : ''}`} } ${showSpoiler ? 'show-spoiler' : ''}`}
style={ style={
size === 'l' && { (size === 'l' || contentTextWeight) && {
'--content-text-weight': '--content-text-weight':
Math.round( Math.round(
(spoilerText.length + htmlContentLength(content)) / 140, (spoilerText.length + htmlContentLength(content)) / 140,

View file

@ -325,12 +325,14 @@ function Timeline({
statusID={statusID} statusID={statusID}
instance={instance} instance={instance}
size="s" size="s"
contentTextWeight
/> />
) : ( ) : (
<Status <Status
status={item} status={item}
instance={instance} instance={instance}
size="s" size="s"
contentTextWeight
/> />
)} )}
</Link> </Link>