From 7e65d8be5d154aa1d39ab21825f1480031c3ad15 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 19 Feb 2023 01:10:06 +0800
Subject: [PATCH] Make smaller statuses stand out in the carousel
---
src/app.css | 9 +++++++++
src/components/status.jsx | 10 ++++++++--
src/components/timeline.jsx | 2 ++
3 files changed, 19 insertions(+), 2 deletions(-)
diff --git a/src/app.css b/src/app.css
index 6278357d..0ee21b03 100644
--- a/src/app.css
+++ b/src/app.css
@@ -614,6 +614,15 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
counter-increment: index;
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 {
--carousel-color: var(--reblog-color);
--carousel-faded-color: var(--reblog-faded-color);
diff --git a/src/components/status.jsx b/src/components/status.jsx
index a85ad1ed..046725f8 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -43,6 +43,7 @@ function Status({
size = 'm',
skeleton,
readOnly,
+ contentTextWeight,
}) {
if (skeleton) {
return (
@@ -160,7 +161,12 @@ function Status({
<NameText account={status.account} instance={instance} showAvatar />{' '}
boosted
</div>
- <Status status={reblog} instance={instance} size={size} />
+ <Status
+ status={reblog}
+ instance={instance}
+ size={size}
+ contentTextWeight={contentTextWeight}
+ />
</div>
);
}
@@ -320,7 +326,7 @@ function Status({
spoilerText || sensitive ? 'has-spoiler' : ''
} ${showSpoiler ? 'show-spoiler' : ''}`}
style={
- size === 'l' && {
+ (size === 'l' || contentTextWeight) && {
'--content-text-weight':
Math.round(
(spoilerText.length + htmlContentLength(content)) / 140,
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index 4ea25034..6692368e 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -325,12 +325,14 @@ function Timeline({
statusID={statusID}
instance={instance}
size="s"
+ contentTextWeight
/>
) : (
<Status
status={item}
instance={instance}
size="s"
+ contentTextWeight
/>
)}
</Link>