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

Beautify 'Show more' button on status page

Browse source
This commit is contained in:
Lim Chee Aun 2023-05-24 17:16:45 +08:00
parent efa4ba63eb
commit ddb64e3022
2 changed files with 46 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/app.css
View file

@ -642,6 +642,34 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
background-image: none; background-image: none;
} }
.timeline .show-more {
padding-left: calc(var(--line-end) + var(--line-margin-end)) !important;
text-align: left;
background-color: transparent !important;
backdrop-filter: none !important;
position: relative;
border-radius: 0;
padding-block: 16px !important;
}
.timeline .show-more:hover {
filter: none !important;
color: var(--text-color) !important;
background-color: var(--bg-faded-blur-color) !important;
}
.timeline .show-more:before {
content: '';
position: absolute;
top: 10px;
left: var(--line-start);
width: var(--line-diameter);
height: var(--line-diameter);
border-radius: var(--line-radius);
border-style: solid;
border-width: var(--line-width);
border-color: transparent transparent var(--comment-line-color) transparent;
transform: rotate(45deg);
}
.status-loading { .status-loading {
text-align: center; text-align: center;
color: var(--text-insignificant-color); color: var(--text-insignificant-color);

15
src/pages/status.jsx
View file

@ -337,6 +337,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
}, },
...nestedDescendants.map((s) => ({ ...nestedDescendants.map((s) => ({
id: s.id, id: s.id,
account: s.account,
accountID: s.account.id, accountID: s.account.id,
descendant: true, descendant: true,
thread: s.account.id === heroStatus.account.id, thread: s.account.id === heroStatus.account.id,
@ -974,15 +975,27 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
<li> <li>
<button <button
type="button" type="button"
class="plain block" class="plain block show-more"
disabled={uiState === 'loading'} disabled={uiState === 'loading'}
onClick={() => setLimit((l) => l + LIMIT)} onClick={() => setLimit((l) => l + LIMIT)}
style={{ marginBlockEnd: '6em' }} style={{ marginBlockEnd: '6em' }}
> >
<div class="ib">
{/* show avatars for first 5 statuses */}
{statuses.slice(limit, limit + 5).map((status) => (
<Avatar
key={status.id}
url={status.account.avatarStatic}
// title={`${status.avatar.displayName} (@${status.avatar.acct})`}
/>
))}
</div>{' '}
<div class="ib">
Show more&hellip;{' '} Show more&hellip;{' '}
<span class="tag"> <span class="tag">
{showMore > LIMIT ? `${LIMIT}+` : showMore} {showMore > LIMIT ? `${LIMIT}+` : showMore}
</span> </span>
</div>
</button> </button>
</li> </li>
)} )}