From 347d288c83e2050530b47b262edc3f3eb92c70ea Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Thu, 30 Mar 2023 20:07:07 +0800 Subject: [PATCH] It's time to level up ALL replies When reach level 4, horizontal scrolling will kick in! --- src/app.css | 110 +++++++++++++++++++++++++++---------------- src/pages/status.jsx | 48 ++++++++++--------- 2 files changed, 95 insertions(+), 63 deletions(-) diff --git a/src/app.css b/src/app.css index d633c18d..f499a08f 100644 --- a/src/app.css +++ b/src/app.css @@ -216,21 +216,40 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { .timeline.contextual > li.descendant:not(.thread) > .status-link { padding-left: 40px; } +.timeline.contextual .replies[data-comments-level='4'] { + overflow: auto; +} +.timeline.contextual .replies[data-comments-level='4']:has(.replies) { + overflow: auto; + mask-image: linear-gradient(to left, transparent, black 32px); +} .timeline.contextual - > li.descendant.thread - > .status-link - + .replies - > summary { - margin-left: calc( - var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) - ); + .replies[data-comments-level='4']:has(.replies) + > .replies-summary { + border-top: 2px dashed var(--divider-color); +} +.timeline.contextual + .replies[data-comments-level='4'] + .replies[data-comments-level-overflow='true'] + .status { + min-width: min(15em, 75vw); } .timeline.contextual + > li.descendant.thread + > .status-link + + .replies + .replies-summary { + margin-left: calc( + var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + + (var(--line-margin-end) * (var(--comments-level) - 1)) + ); +} +/* .timeline.contextual > li.descendant.thread > .status-link + .replies .replies - > summary { + > .replies-summary { margin-left: calc( var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + var(--line-margin-end) @@ -242,22 +261,23 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { + .replies .replies .replies - > summary { + > .replies-summary { margin-left: calc( var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + (var(--line-margin-end) * 2) ); -} +} */ .timeline.contextual > li.descendant.thread > .status-link + .replies .status-link { padding-left: calc( - var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + + (var(--line-margin-end) * (var(--comments-level) - 1)) ); } -.timeline.contextual +/* .timeline.contextual > li.descendant.thread > .status-link + .replies @@ -279,20 +299,22 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + (var(--line-margin-end) * 2) ); -} +} */ .timeline.contextual > li.descendant:not(.thread) > .status-link + .replies - > summary { - margin-left: calc(var(--thread-start) + var(--line-margin-end)); + .replies-summary { + margin-left: calc( + var(--thread-start) + var(--line-margin-end) * var(--comments-level) + ); } -.timeline.contextual +/* .timeline.contextual > li.descendant:not(.thread) > .status-link + .replies .replies - > summary { + > .replies-summary { margin-left: calc( var(--thread-start) + var(--line-margin-end) + var(--line-margin-end) ); @@ -303,19 +325,21 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { + .replies .replies .replies - > summary { + > .replies-summary { margin-left: calc( var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2) ); -} +} */ .timeline.contextual > li.descendant:not(.thread) > .status-link + .replies .status-link { - padding-left: calc(var(--thread-start) + var(--line-margin-end)); + padding-left: calc( + var(--thread-start) + var(--line-margin-end) * var(--comments-level) + ); } -.timeline.contextual +/* .timeline.contextual > li.descendant:not(.thread) > .status-link + .replies @@ -331,7 +355,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { .replies .status-link { padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 3)); -} +} */ .timeline.contextual > li.descendant:not(.thread):before { content: ''; position: absolute; @@ -368,7 +392,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { padding: 0; list-style: none; } -.timeline.contextual > li .replies > summary { +.timeline.contextual > li .replies > .replies-summary { padding: 8px; background-color: var(--bg-faded-color); display: inline-block; @@ -384,17 +408,17 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { list-style: none; white-space: nowrap; } -.timeline.contextual > li .replies > summary::-webkit-details-marker { +.timeline.contextual > li .replies > .replies-summary::-webkit-details-marker { display: none; } -.timeline.contextual > li .replies > summary > * { +.timeline.contextual > li .replies > .replies-summary > * { vertical-align: middle; } -.timeline.contextual > li .replies > summary .avatars { +.timeline.contextual > li .replies > .replies-summary .avatars { margin-right: 8px; } -.timeline.contextual > li .replies > summary:active, -.timeline.contextual > li .replies[open] > summary { +.timeline.contextual > li .replies > .replies-summary:active, +.timeline.contextual > li .replies[open] > .replies-summary { color: var(--text-color); background-color: var(--comment-line-color); background-image: linear-gradient( @@ -403,17 +427,19 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { var(--bg-faded-color) ); } -.timeline.contextual > li .replies[open] > summary { +.timeline.contextual > li .replies[open] > .replies-summary { border-bottom-left-radius: 0; } -.timeline.contextual > li .replies summary[hidden] { +.timeline.contextual > li .replies .replies-summary[hidden] { display: none; } .timeline.contextual > li .replies li { position: relative; } .timeline.contextual > li .replies li { - --line-start: calc(var(--thread-start) + var(--line-margin-end)); + --line-start: calc( + var(--thread-start) + var(--line-margin-end) * var(--comments-level) + ); --line-end: calc(var(--line-start) + var(--line-width)); background-image: linear-gradient( to right, @@ -426,18 +452,19 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { ); background-repeat: no-repeat; } -.timeline.contextual > li .replies .replies li { +/* .timeline.contextual > li .replies .replies li { --line-start: calc(var(--thread-start) + (var(--line-margin-end) * 2)); } .timeline.contextual > li .replies .replies .replies li { --line-start: calc(var(--thread-start) + (var(--line-margin-end) * 3)); -} +} */ .timeline.contextual > li.thread .replies li { --line-start: calc( - var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + + (var(--line-margin-end) * (var(--comments-level) - 1)) ); } -.timeline.contextual > li.thread .replies .replies li { +/* .timeline.contextual > li.thread .replies .replies li { --line-start: calc( var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + var(--line-margin-end) @@ -448,7 +475,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + (var(--line-margin-end) * 2) ); -} +} */ .timeline.contextual > li .replies li:last-child { background-size: 100% 20px; } @@ -465,7 +492,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { border-color: transparent transparent var(--comment-line-color) transparent; transform: rotate(45deg); } -.timeline.contextual > li .replies .replies li:before { +/* .timeline.contextual > li .replies .replies li:before { --line-start: calc( var(--thread-start) + var(--line-margin-end) + var(--line-margin-end) ); @@ -474,13 +501,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { --line-start: calc( var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2) ); -} +} */ .timeline.contextual > li.thread .replies li:before { --line-start: calc( - var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + + (var(--line-margin-end) * (var(--comments-level) - 1)) ); } -.timeline.contextual > li.thread .replies .replies li:before { +/* .timeline.contextual > li.thread .replies .replies li:before { --line-start: calc( var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + var(--line-margin-end) @@ -491,7 +519,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) + (var(--line-margin-end) * 2) ); -} +} */ .timeline.contextual.loading > li:not(.hero) { /* opacity: 0.5; */ pointer-events: none; diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 2047d49e..be6aa0b8 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -170,6 +170,16 @@ function StatusPage() { console.log({ ancestors, descendants, nestedDescendants }); + function expandReplies(_replies) { + return _replies?.map((_r) => ({ + id: _r.id, + account: _r.account, + repliesCount: _r.repliesCount, + content: _r.content, + replies: expandReplies(_r.__replies), + })); + } + const allStatuses = [ ...ancestors.map((s) => ({ id: s.id, @@ -182,26 +192,7 @@ function StatusPage() { accountID: s.account.id, descendant: true, thread: s.account.id === heroStatus.account.id, - replies: s.__replies?.map((r) => ({ - id: r.id, - account: r.account, - repliesCount: r.repliesCount, - content: r.content, - replies: r.__replies?.map((r2) => ({ - // Level 3 - id: r2.id, - account: r2.account, - repliesCount: r2.repliesCount, - content: r2.content, - replies: r2.__replies?.map((r3) => ({ - // Level 4 - id: r3.id, - account: r3.account, - repliesCount: r3.repliesCount, - content: r3.content, - })), - })), - })), + replies: expandReplies(s.__replies), })), ]; @@ -754,6 +745,7 @@ function StatusPage() { hasManyStatuses={hasManyStatuses} replies={replies} hasParentThread={thread} + level={1} /> )} {uiState === 'loading' && @@ -833,7 +825,13 @@ function StatusPage() { ); } -function SubComments({ hasManyStatuses, replies, instance, hasParentThread }) { +function SubComments({ + hasManyStatuses, + replies, + instance, + hasParentThread, + level, +}) { // Set isBrief = true: // - if less than or 2 replies // - if replies have no sub-replies @@ -883,8 +881,13 @@ function SubComments({ hasManyStatuses, replies, instance, hasParentThread }) { // use first reply as ID cachedRepliesToggle[replies[0].id] = open; }} + style={{ + '--comments-level': level, + }} + data-comments-level={level} + data-comments-level-overflow={level > 4} > -