mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-29 12:48:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

Experiment more minimalistic account sheet

Browse source
This commit is contained in:
Lim Chee Aun 2023-07-14 14:36:13 +08:00
parent 42633f87ea
commit 3192c319ee
2 changed files with 46 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -136,20 +136,29 @@
.account-container .stats { .account-container .stats {
display: flex; display: flex;
flex-wrap: wrap; /* flex-wrap: wrap; */
justify-content: space-around; column-gap: 24px;
gap: 16px; row-gap: 8px;
opacity: 0.75; opacity: 0.75;
font-size: 90%; font-size: 90%;
background-color: var(--bg-faded-color); background-color: var(--bg-faded-color);
padding: 12px; padding: 12px;
border-radius: 16px; border-radius: 16px;
line-height: 1.25; line-height: 1.25;
overflow-x: auto;
justify-content: flex-start;
position: relative;
}
.timeline-start .account-container .stats {
flex-wrap: wrap;
} }
.account-container .stats > * { .account-container .stats > * {
text-align: center; /* text-align: center; */
flex-shrink: 0;
display: flex;
gap: 0.5em;
} }
.account-container .stats a { .account-container .stats a:hover {
color: inherit; color: inherit;
} }
@ -169,10 +178,14 @@
.account-container .profile-metadata { .account-container .profile-metadata {
display: flex; display: flex;
flex-wrap: wrap; /* flex-wrap: wrap; */
gap: 2px; gap: 2px;
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
overflow-x: auto;
}
.timeline-start .account-container .profile-metadata {
flex-wrap: wrap;
} }
.account-container .profile-field { .account-container .profile-field {
min-width: 0; min-width: 0;
@ -183,6 +196,7 @@
border-radius: 4px; border-radius: 4px;
filter: saturate(0.75); filter: saturate(0.75);
line-height: 1.25; line-height: 1.25;
flex-shrink: 0;
} }
.account-container :is(.note, .profile-field) .invisible { .account-container :is(.note, .profile-field) .invisible {

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

@ -316,54 +316,50 @@ function AccountInfo({
</div> </div>
)} )}
<p class="stats"> <p class="stats">
<span> <div>
Followers <span title={followersCount}>
<br />
<b title={followersCount}>
{shortenNumber(followersCount)} {shortenNumber(followersCount)}
</b>{' '} </span>{' '}
</span> Followers
<span> </div>
<div class="insignificant">
<span title={followingCount}>
{shortenNumber(followingCount)}
</span>{' '}
Following Following
<br /> <br />
<b title={followingCount}> </div>
{shortenNumber(followingCount)}
</b>{' '}
</span>
{standalone ? ( {standalone ? (
<span> <div class="insignificant">
Posts <span title={statusesCount}>
<br />
<b title={statusesCount}>
{shortenNumber(statusesCount)} {shortenNumber(statusesCount)}
</b>{' '} </span>{' '}
</span> Posts
</div>
) : ( ) : (
<Link <Link
class="insignificant"
to={instance ? `/${instance}/a/${id}` : `/a/${id}`} to={instance ? `/${instance}/a/${id}` : `/a/${id}`}
onClick={() => { onClick={() => {
hideAllModals(); hideAllModals();
}} }}
> >
Posts <span title={statusesCount}>
<br />
<b title={statusesCount}>
{shortenNumber(statusesCount)} {shortenNumber(statusesCount)}
</b>{' '} </span>{' '}
Posts
</Link> </Link>
)} )}
{!!createdAt && ( {!!createdAt && (
<span> <div class="insignificant">
Joined Joined
<br /> <br />
<b>
<time datetime={createdAt}> <time datetime={createdAt}>
{niceDateTime(createdAt, { {niceDateTime(createdAt, {
hideTime: true, hideTime: true,
})} })}
</time> </time>
</b> </div>
</span>
)} )}
</p> </p>
<RelatedActions <RelatedActions