this repo has no description
Collapse follow requests if > 5
+48
-14
+14
src/pages/notifications.css
+14
src/pages/notifications.css
···
159
159
.follow-requests {
160
160
padding-block-end: 16px;
161
161
}
162
+
.follow-requests summary {
163
+
padding: 8px 16px;
164
+
cursor: pointer;
165
+
}
166
+
.follow-requests summary::marker,
167
+
.follow-requests summary::-webkit-details-marker {
168
+
color: var(--text-insignificant-color);
169
+
}
170
+
.follow-requests details[open] summary {
171
+
color: var(--text-insignificant-color);
172
+
}
162
173
.follow-requests ul {
163
174
list-style: none;
164
175
padding: 0;
···
167
178
max-height: 50dvh;
168
179
overflow: auto;
169
180
border-bottom: var(--hairline-width) solid var(--outline-color);
181
+
}
182
+
.follow-requests summary + ul {
183
+
border-top: var(--hairline-width) solid var(--outline-color);
170
184
}
171
185
.follow-requests ul li {
172
186
display: flex;
+34
-14
src/pages/notifications.jsx
+34
-14
src/pages/notifications.jsx
···
286
286
{followRequests.length > 0 && (
287
287
<div class="follow-requests">
288
288
<h2 class="timeline-header">Follow requests</h2>
289
-
<ul>
290
-
{followRequests.map((account) => (
291
-
<li>
292
-
<AccountBlock account={account} />
293
-
<FollowRequestButtons
294
-
accountID={account.id}
295
-
onChange={() => {
296
-
loadFollowRequests();
297
-
loadNotifications(true);
298
-
}}
299
-
/>
300
-
</li>
301
-
))}
302
-
</ul>
289
+
{followRequests.length > 5 ? (
290
+
<details>
291
+
<summary>{followRequests.length} follow requests</summary>
292
+
<ul>
293
+
{followRequests.map((account) => (
294
+
<li>
295
+
<AccountBlock account={account} />
296
+
<FollowRequestButtons
297
+
accountID={account.id}
298
+
onChange={() => {
299
+
loadFollowRequests();
300
+
loadNotifications(true);
301
+
}}
302
+
/>
303
+
</li>
304
+
))}
305
+
</ul>
306
+
</details>
307
+
) : (
308
+
<ul>
309
+
{followRequests.map((account) => (
310
+
<li>
311
+
<AccountBlock account={account} />
312
+
<FollowRequestButtons
313
+
accountID={account.id}
314
+
onChange={() => {
315
+
loadFollowRequests();
316
+
loadNotifications(true);
317
+
}}
318
+
/>
319
+
</li>
320
+
))}
321
+
</ul>
322
+
)}
303
323
</div>
304
324
)}
305
325
<div id="mentions-option">