this repo has no description
Add more data-read-more UIs
+35
-2
+32
-2
src/components/status.css
+32
-2
src/components/status.css
···
93
93
text-decoration: none;
94
94
color: var(--text-color);
95
95
}
96
+
.status-card-link:not(.status-card-link .status-card-link):has(.truncated) {
97
+
position: relative;
98
+
99
+
&:after {
100
+
content: attr(data-read-more);
101
+
line-height: 1;
102
+
display: inline-block;
103
+
position: absolute;
104
+
--inset-offset: 16px;
105
+
inset-block-end: var(--inset-offset);
106
+
inset-inline-end: var(--inset-offset);
107
+
color: var(--link-color);
108
+
background-color: var(--bg-faded-blur-color);
109
+
backdrop-filter: blur(8px);
110
+
border: 1px solid var(--outline-color);
111
+
padding: 0.5em 0.75em;
112
+
border-radius: 10em;
113
+
font-size: 90%;
114
+
white-space: nowrap;
115
+
transition: all 0.2s ease-out;
116
+
}
117
+
118
+
&:is(:hover, :focus):after {
119
+
border-color: var(--link-color);
120
+
background-color: var(--bg-color);
121
+
transform: translate(2px, 0);
122
+
}
123
+
}
96
124
.status-card-link:is(:hover, :focus) .status-card {
97
125
border-color: var(--outline-hover-color);
98
126
box-shadow: inset 0 0 0 4px var(--bg-faded-blur-color);
···
131
159
:is(.content, .poll, .media-container) {
132
160
max-height: 80px !important;
133
161
}
134
-
.status-card :is(.content, .poll) {
162
+
.status-card :is(.content.truncated, .poll, .media-container.truncated) {
135
163
font-size: inherit !important;
136
164
mask-image: linear-gradient(to bottom, #000 80px, transparent);
137
165
}
138
-
.status.small .status-card :is(.content, .poll) {
166
+
.status.small
167
+
.status-card
168
+
:is(.content.truncated, .poll, .media-container.truncated) {
139
169
mask-image: linear-gradient(to bottom, #000 40px, transparent);
140
170
}
141
171
.status-card .card {
+3
src/components/status.jsx
+3
src/components/status.jsx
···
321
321
322
322
const spoilerContentRef = useTruncated();
323
323
const contentRef = useTruncated();
324
+
const mediaContainerRef = useTruncated();
324
325
const readMoreText = 'Read more →';
325
326
326
327
const statusRef = useRef(null);
···
1248
1249
)}
1249
1250
{!!mediaAttachments.length && (
1250
1251
<div
1252
+
ref={mediaContainerRef}
1251
1253
class={`media-container media-eq${mediaAttachments.length} ${
1252
1254
mediaAttachments.length > 2 ? 'media-gt2' : ''
1253
1255
} ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
···
2185
2187
key={q.instance + q.id}
2186
2188
to={`${q.instance ? `/${q.instance}` : ''}/s/${q.id}`}
2187
2189
class="status-card-link"
2190
+
data-read-more="Read more →"
2188
2191
>
2189
2192
<Status
2190
2193
statusID={q.id}