this repo has no description
Prevent infinite overlapping of Account & Accounts sheets
+33
-27
+4
-1
src/components/account-info.css
+4
-1
src/components/account-info.css
···
152
152
[tabindex='0']:is(:hover, :focus) {
153
153
color: var(--text-color);
154
154
cursor: pointer;
155
-
text-decoration: underline;
155
+
text-decoration-color: var(--text-insignificant-color);
156
156
}
157
157
}
158
158
.timeline-start .account-container .stats {
···
163
163
flex-shrink: 0;
164
164
display: flex;
165
165
gap: 0.5em;
166
+
}
167
+
.account-container .stats a:not(.insignificant) {
168
+
color: inherit;
166
169
}
167
170
.account-container .stats a:hover {
168
171
color: inherit;
+27
-25
src/components/account-info.jsx
+27
-25
src/components/account-info.jsx
···
170
170
return results;
171
171
}
172
172
173
+
const LinkOrDiv = standalone ? 'div' : Link;
174
+
const accountLink = instance ? `/${instance}/a/${id}` : `/a/${id}`;
175
+
173
176
return (
174
177
<div
175
178
class={`account-container ${uiState === 'loading' ? 'skeleton' : ''}`}
···
368
371
</div>
369
372
)}
370
373
<p class="stats">
371
-
<div
374
+
<LinkOrDiv
372
375
tabIndex={0}
376
+
to={accountLink}
373
377
onClick={() => {
378
+
states.showAccount = false;
374
379
states.showGenericAccounts = {
375
380
heading: 'Followers',
376
381
fetchAccounts: fetchFollowers,
···
381
386
{shortenNumber(followersCount)}
382
387
</span>{' '}
383
388
Followers
384
-
</div>
385
-
<div
389
+
</LinkOrDiv>
390
+
<LinkOrDiv
386
391
class="insignificant"
387
392
tabIndex={0}
393
+
to={accountLink}
388
394
onClick={() => {
395
+
states.showAccount = false;
389
396
states.showGenericAccounts = {
390
397
heading: 'Following',
391
398
fetchAccounts: fetchFollowing,
···
397
404
</span>{' '}
398
405
Following
399
406
<br />
400
-
</div>
401
-
{standalone ? (
402
-
<div class="insignificant">
403
-
<span title={statusesCount}>
404
-
{shortenNumber(statusesCount)}
405
-
</span>{' '}
406
-
Posts
407
-
</div>
408
-
) : (
409
-
<Link
410
-
class="insignificant"
411
-
to={instance ? `/${instance}/a/${id}` : `/a/${id}`}
412
-
onClick={() => {
413
-
hideAllModals();
414
-
}}
415
-
>
416
-
<span title={statusesCount}>
417
-
{shortenNumber(statusesCount)}
418
-
</span>{' '}
419
-
Posts
420
-
</Link>
421
-
)}
407
+
</LinkOrDiv>
408
+
<LinkOrDiv
409
+
class="insignificant"
410
+
to={accountLink}
411
+
onClick={
412
+
standalone
413
+
? undefined
414
+
: () => {
415
+
hideAllModals();
416
+
}
417
+
}
418
+
>
419
+
<span title={statusesCount}>
420
+
{shortenNumber(statusesCount)}
421
+
</span>{' '}
422
+
Posts
423
+
</LinkOrDiv>
422
424
{!!createdAt && (
423
425
<div class="insignificant">
424
426
Joined{' '}
+2
-1
src/components/generic-accounts.jsx
+2
-1
src/components/generic-accounts.jsx
···
29
29
30
30
const loadAccounts = (firstLoad) => {
31
31
if (!fetchAccounts) return;
32
+
setAccounts([]);
32
33
setUIState('loading');
33
34
(async () => {
34
35
try {
···
57
58
} else {
58
59
loadAccounts(true);
59
60
}
60
-
}, [staticAccounts]);
61
+
}, [staticAccounts, fetchAccounts]);
61
62
62
63
return (
63
64
<div id="generic-accounts-container" class="sheet" tabindex="-1">