offbyn
/
nostrweb
forked from nostr/nostrweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feed: style 3 levels of nested threads 

instead of just adding 1 line for all replies to point to the
original note, using smaller profile pic for replies of replies
help to understand the context of the replies.

this is done without increasing indentation as heavy nesting can
mess up the layout so only indentation is visible and the space
for the actual content gets to small.

if needed users can inspect replies and navigate to the deeplink
to see how the next 3 levels are nested.
OFF0 2023-01-22 15:37:49 +01:00
parent e94c9c92da
commit 339e1ed97c
Signed by: offbyn
GPG Key ID: 94A2F643C51F37FA
1 changed files with 50 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/cards.css
View File

@ -1,6 +1,8 @@
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */
.mbox {
--profileimg-size: 4rem;
--profileimg-size-half: 2rem;
--profileimg-size-quarter: 1rem;
align-items: center;
display: flex;
flex-direction: row;
@ -24,14 +26,11 @@
align-self: start;
background-color: var(--bgcolor-textinput);
border-radius: var(--profileimg-size);
border: 1px solid transparent;
flex-basis: var(--profileimg-size);
height: var(--profileimg-size);
margin-right: 1rem;
/* padding-top: .5ch; */
margin-right: 1.5rem;
max-height: var(--profileimg-size);
max-width: var(--profileimg-size);
outline: .5rem solid var(--bgcolor);
overflow: hidden;
position: relative;
z-index: 2;
@ -111,19 +110,65 @@
flex-grow: 1;
position: relative;
}
.mobx-replies .mobx-replies {
--reply-padding: 3rem;
margin-bottom: 2px;
padding: 0 1rem 0 var(--reply-padding);
}
.mobx-replies .mobx-replies .mobx-replies {
--reply-padding: 0;
}
.mbox .mbox::before,
.mobx-replies::before {
background-color: var(--bgcolor-inactive);
border: none;
content: "";
display: block;
height: 200vh;
left: var(--profileimg-size-half);
margin-left: -.2rem;
position: absolute;
top: -200vh;
width: .4rem;
}
.mobx-replies .mbox .mbox::before {
background: none;
border-color: var(--bgcolor-inactive);;
border-style: solid;
border-width: 0 0 .4rem .4rem;
content: "";
display: block;
height: var(--profileimg-size-quarter);
left: calc(-1 * var(--profileimg-size-quarter));
margin-left: -.2rem;
position: absolute;
top: 0;
width: .8rem;
}
.mobx-replies .mbox .mbox::after {
background-color: var(--bgcolor-inactive);
border: none;
content: "";
display: block;
height: 100vh;
left: calc(.5 * var(--profileimg-size));
left: calc(-1 * var(--profileimg-size-quarter));
margin-left: -.2rem;
position: absolute;
top: -100vh;
width: .4rem;
}
/* support visualisation of 3 levels of thread nesting, rest render flat without line */
.mbox .mobx-replies .mobx-replies::before,
.mobx-replies .mobx-replies .mbox .mbox::before {
content: none;
}
.mobx-replies .mbox .mbox .mbox-img {
--profileimg-size: 2rem;
left: -.2rem;
margin-right: .5rem;
margin-top: .2rem;
position: relative;
}
[data-append]::after {
color: var(--color-accent);