mirror of
https://github.com/cheeaun/phanpy.git
synced 2024-11-25 18:55:44 +03:00
It's time to level up ALL replies
When reach level 4, horizontal scrolling will kick in!
This commit is contained in:
Lim Chee Aun
parent
4ba9f485b4
commit
347d288c83
2 changed files with 95 additions and 63 deletions
110
src/app.css
110
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;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
>
|
||||
<summary hidden={open}>
|
||||
<summary class="replies-summary" hidden={open}>
|
||||
<span class="avatars">
|
||||
{accounts.map((a) => (
|
||||
<Avatar
|
||||
|
|
@ -942,6 +945,7 @@ function SubComments({ hasManyStatuses, replies, instance, hasParentThread }) {
|
|||
instance={instance}
|
||||
hasManyStatuses={hasManyStatuses}
|
||||
replies={r.replies}
|
||||
level={level + 1}
|
||||
/>
|
||||
)}
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Reference in a new issue