mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-25 18:55:44 +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 {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 16px;
/* flex-wrap: wrap; */
column-gap: 24px;
row-gap: 8px;
opacity: 0.75;
font-size: 90%;
background-color: var(--bg-faded-color);
padding: 12px;
border-radius: 16px;
line-height: 1.25;
overflow-x: auto;
justify-content: flex-start;
position: relative;
}
.timeline-start .account-container .stats {
flex-wrap: wrap;
}
.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;
}
@ -169,10 +178,14 @@
.account-container .profile-metadata {
display: flex;
flex-wrap: wrap;
/* flex-wrap: wrap; */
gap: 2px;
border-radius: 16px;
overflow: hidden;
overflow-x: auto;
}
.timeline-start .account-container .profile-metadata {
flex-wrap: wrap;
}
.account-container .profile-field {
min-width: 0;
@ -183,6 +196,7 @@
border-radius: 4px;
filter: saturate(0.75);
line-height: 1.25;
flex-shrink: 0;
}
.account-container :is(.note, .profile-field) .invisible {

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

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