this repo has no description
Beautify 'Show more' button on status page
+46
-5
+28
src/app.css
+28
src/app.css
···
642
642
background-image: none;
643
643
}
644
644
645
+
.timeline .show-more {
646
+
padding-left: calc(var(--line-end) + var(--line-margin-end)) !important;
647
+
text-align: left;
648
+
background-color: transparent !important;
649
+
backdrop-filter: none !important;
650
+
position: relative;
651
+
border-radius: 0;
652
+
padding-block: 16px !important;
653
+
}
654
+
.timeline .show-more:hover {
655
+
filter: none !important;
656
+
color: var(--text-color) !important;
657
+
background-color: var(--bg-faded-blur-color) !important;
658
+
}
659
+
.timeline .show-more:before {
660
+
content: '';
661
+
position: absolute;
662
+
top: 10px;
663
+
left: var(--line-start);
664
+
width: var(--line-diameter);
665
+
height: var(--line-diameter);
666
+
border-radius: var(--line-radius);
667
+
border-style: solid;
668
+
border-width: var(--line-width);
669
+
border-color: transparent transparent var(--comment-line-color) transparent;
670
+
transform: rotate(45deg);
671
+
}
672
+
645
673
.status-loading {
646
674
text-align: center;
647
675
color: var(--text-insignificant-color);
+18
-5
src/pages/status.jsx
+18
-5
src/pages/status.jsx
···
337
337
},
338
338
...nestedDescendants.map((s) => ({
339
339
id: s.id,
340
+
account: s.account,
340
341
accountID: s.account.id,
341
342
descendant: true,
342
343
thread: s.account.id === heroStatus.account.id,
···
974
975
<li>
975
976
<button
976
977
type="button"
977
-
class="plain block"
978
+
class="plain block show-more"
978
979
disabled={uiState === 'loading'}
979
980
onClick={() => setLimit((l) => l + LIMIT)}
980
981
style={{ marginBlockEnd: '6em' }}
981
982
>
982
-
Show more…{' '}
983
-
<span class="tag">
984
-
{showMore > LIMIT ? `${LIMIT}+` : showMore}
985
-
</span>
983
+
<div class="ib">
984
+
{/* show avatars for first 5 statuses */}
985
+
{statuses.slice(limit, limit + 5).map((status) => (
986
+
<Avatar
987
+
key={status.id}
988
+
url={status.account.avatarStatic}
989
+
// title={`${status.avatar.displayName} (@${status.avatar.acct})`}
990
+
/>
991
+
))}
992
+
</div>{' '}
993
+
<div class="ib">
994
+
Show more…{' '}
995
+
<span class="tag">
996
+
{showMore > LIMIT ? `${LIMIT}+` : showMore}
997
+
</span>
998
+
</div>
986
999
</button>
987
1000
</li>
988
1001
)}