this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Beautify 'Show more' button on status page

+46 -5
+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
··· 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&hellip;{' '} 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&hellip;{' '} 995 + <span class="tag"> 996 + {showMore > LIMIT ? `${LIMIT}+` : showMore} 997 + </span> 998 + </div> 986 999 </button> 987 1000 </li> 988 1001 )}