Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 22:26:57 +01:00
Code Issues Projects Releases Packages Wiki Activity

Prevent infinite overlapping of Account & Accounts sheets

Browse source
This commit is contained in:
Lim Chee Aun 2023-09-12 18:00:19 +08:00
parent b57d8adf18
commit 3fc3641437
3 changed files with 33 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/account-info.css
View file

@ -152,7 +152,7 @@
[tabindex='0']:is(:hover, :focus) { [tabindex='0']:is(:hover, :focus) {
color: var(--text-color); color: var(--text-color);
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration-color: var(--text-insignificant-color);
} }
} }
.timeline-start .account-container .stats { .timeline-start .account-container .stats {
@ -164,6 +164,9 @@
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;
} }
.account-container .stats a:not(.insignificant) {
color: inherit;
}
.account-container .stats a:hover { .account-container .stats a:hover {
color: inherit; color: inherit;
} }

52
src/components/account-info.jsx
View file

@ -170,6 +170,9 @@ function AccountInfo({
return results; return results;
} }
const LinkOrDiv = standalone ? 'div' : Link;
const accountLink = instance ? `/${instance}/a/${id}` : `/a/${id}`;
return ( return (
<div <div
class={`account-container ${uiState === 'loading' ? 'skeleton' : ''}`} class={`account-container ${uiState === 'loading' ? 'skeleton' : ''}`}
@ -368,9 +371,11 @@ function AccountInfo({
</div> </div>
)} )}
<p class="stats"> <p class="stats">
<div <LinkOrDiv
tabIndex={0} tabIndex={0}
to={accountLink}
onClick={() => { onClick={() => {
states.showAccount = false;
states.showGenericAccounts = { states.showGenericAccounts = {
heading: 'Followers', heading: 'Followers',
fetchAccounts: fetchFollowers, fetchAccounts: fetchFollowers,
@ -381,11 +386,13 @@ function AccountInfo({
{shortenNumber(followersCount)} {shortenNumber(followersCount)}
</span>{' '} </span>{' '}
Followers Followers
</div> </LinkOrDiv>
<div <LinkOrDiv
class="insignificant" class="insignificant"
tabIndex={0} tabIndex={0}
to={accountLink}
onClick={() => { onClick={() => {
states.showAccount = false;
states.showGenericAccounts = { states.showGenericAccounts = {
heading: 'Following', heading: 'Following',
fetchAccounts: fetchFollowing, fetchAccounts: fetchFollowing,
@ -397,28 +404,23 @@ function AccountInfo({
</span>{' '} </span>{' '}
Following Following
<br /> <br />
</div> </LinkOrDiv>
{standalone ? ( <LinkOrDiv
<div class="insignificant"> class="insignificant"
<span title={statusesCount}> to={accountLink}
{shortenNumber(statusesCount)} onClick={
</span>{' '} standalone
Posts ? undefined
</div> : () => {
) : ( hideAllModals();
<Link }
class="insignificant" }
to={instance ? `/${instance}/a/${id}` : `/a/${id}`} >
onClick={() => { <span title={statusesCount}>
hideAllModals(); {shortenNumber(statusesCount)}
}} </span>{' '}
> Posts
<span title={statusesCount}> </LinkOrDiv>
{shortenNumber(statusesCount)}
</span>{' '}
Posts
</Link>
)}
{!!createdAt && ( {!!createdAt && (
<div class="insignificant"> <div class="insignificant">
Joined{' '} Joined{' '}

3
src/components/generic-accounts.jsx
View file

@ -29,6 +29,7 @@ export default function GenericAccounts({ onClose = () => {} }) {
const loadAccounts = (firstLoad) => { const loadAccounts = (firstLoad) => {
if (!fetchAccounts) return; if (!fetchAccounts) return;
setAccounts([]);
setUIState('loading'); setUIState('loading');
(async () => { (async () => {
try { try {
@ -57,7 +58,7 @@ export default function GenericAccounts({ onClose = () => {} }) {
} else { } else {
loadAccounts(true); loadAccounts(true);
} }
}, [staticAccounts]); }, [staticAccounts, fetchAccounts]);
return ( return (
<div id="generic-accounts-container" class="sheet" tabindex="-1"> <div id="generic-accounts-container" class="sheet" tabindex="-1">