nostr
/
nostrweb
3
1
Fork 1
Code Issues 24 Pull Requests 3 Projects 1 Releases 27 Activity

feed: visually improve threads styling

Browse Source 
CSS is a bit messy and should be redone, but threads are now styled
a bit as branches.
pull/73/head
OFF0 1 year ago
parent 6910a4da4e
commit 7113bf1a4d
Signed by: offbyn
GPG Key ID: 94A2F643C51F37FA
6 changed files with 139 additions and 45 deletions
Show Stats Download Patch File Download Diff File

5
src/main.ts
Unescape Escape View File

@ -89,10 +89,11 @@ const renderReply = (evt: EventWithNip19AndReplyTo) => {
if (!parent) { // root article has not been rendered
return;
}
let replyContainer = parent.querySelector('.mobx-replies');
let replyContainer = parent.querySelector('.mbox-replies');
if (!replyContainer) {
replyContainer = elem('div', {className: 'mobx-replies'});
replyContainer = elem('div', {className: 'mbox-replies'});
parent.append(replyContainer);
parent.classList.add('mbox-has-replies');
}
const reply = createTextNote(evt, eventRelayMap[evt.id][0]);
replyContainer.append(reply);

130
src/styles/cards.css
Unescape Escape View File

@ -5,16 +5,13 @@
flex-direction: row;
flex-shrink: 0;
flex-wrap: wrap;
margin-bottom: 1rem;
/* margin-bottom: 1rem; */
max-width: var(--content-width);
padding: 0 var(--gap-half);
padding: 0 0 0 var(--gap-half);
}
.mbox:last-child {
margin-bottom: 0;
}
.mbox .mbox {
padding: 0;
}
.mbox-img {
align-self: start;
@ -42,10 +39,14 @@
}
.mbox-body {
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 1;
word-break: break-word;
}
.mbox-body div a {
text-decoration: underline;
}
.mbox-img + .mbox-body {
flex-basis: calc(100% - var(--profileimg-size) - var(--gap-half));
}
@ -82,7 +83,9 @@
overflow: clip;
}
.mbox .mbox {
max-width: 100%;
overflow: visible;
padding: 0;
position: relative;
}
.mbox .buttons {
@ -95,32 +98,23 @@
.mbox button img + small {
padding-left: .5rem;
}
.mobx-replies {
.mbox-replies {
box-sizing: border-box;
flex-basis: 100%;
flex-grow: 1;
flex-shrink: 0;
position: relative;
}
.mobx-replies .mobx-replies {
.mbox-replies .mbox-replies {
--reply-padding: 3rem;
margin-bottom: 2px;
padding: 0 1rem 0 var(--reply-padding);
padding: 0 0 0 var(--reply-padding);
}
.mobx-replies .mobx-replies .mobx-replies {
.mbox-replies .mbox-replies .mbox-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: -.1rem;
position: absolute;
top: -200vh;
width: .2rem;
}
.mobx-replies .mbox .mbox::before {
/* direct replies */
.mbox-replies .mbox-replies .mbox::before {
background: none;
border-color: var(--bgcolor-inactive);;
border-style: solid;
@ -134,24 +128,76 @@
top: 0;
width: .8rem;
}
.mobx-replies .mbox .mbox::after {
background-color: var(--bgcolor-inactive);
border: none;
.mbox-replies .mbox-replies .mbox-replies .mbox::before {
content: none;
display: none;
}
/* .mbox-replies .mbox-replies .mbox-replies .mbox::after, */
.mbox-replies .mbox-replies .mbox-replies::before {
content: none;
}
.mbox-body,
.mbox-has-replies:not(:last-child) {
position: relative;
}
.mbox-has-replies > .mbox-body::after,
.mbox-replies .mbox-has-replies:not(:last-child)::after,
.mbox-has-replies:not(:last-child) .mbox > .mbox-body::after,
.mbox-has-replies .mbox:not(:last-child) > .mbox-body::after {
bottom: 0;
content: "";
display: block;
height: 100vh;
left: calc(-1 * var(--profileimg-size-quarter));
margin-left: -.1rem;
position: absolute;
top: -100vh;
top: .2rem;
width: .2rem;
}
/* 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 {
.mbox-body::after,
.mbox-has-replies::after {
background: var(--bgcolor-inactive);
}
.mbox-has-replies .mbox:not(:last-child) > .mbox-body::after {
left: -33px;
}
.mbox-has-replies .mbox-has-replies .mbox:not(:last-child) > .mbox-body::after {
left: -36px;
}
.mbox-has-replies > .mbox-body::after {
left: -33px;
}
.mbox-has-replies:not(:last-child) .mbox > .mbox-body::after {
left: -33px;
}
.mbox-has-replies:not(:last-child)::after {
left: 18px;
}
.mbox-replies .mbox-has-replies:not(:last-child)::after {
left: 19px;
}
.mbox-replies .mbox-replies .mbox-has-replies:not(:last-child)::after {
left: -11px;
}
.mbox-replies .mbox-replies .mbox-has-replies > .mbox-body::after {
left: -18px;
}
.mbox-has-replies .mbox-has-replies .mbox-has-replies .mbox:not(:last-child) > .mbox-body::after {
left: -18px;
}
.mbox-replies .mbox:not(.mbox-has-replies):last-child > .mbox-body::after {
content: none;
display: none;
}
.mobx-replies .mbox .mbox .mbox-img {
.mbox-replies .mbox-replies .mbox-has-replies.mbox:not(:last-child) > .mbox-body::after {
left: -18px;
}
.mbox-replies .mbox .mbox .mbox-img {
--profileimg-size: 2rem;
left: -.2rem;
margin-right: .5rem;
@ -159,6 +205,22 @@
position: relative;
}
.mbox-replies .mbox .mbox .mbox-body {
display: flex;
flex-wrap: wrap;
font-size: var(--font-small);
padding-bottom: var(--gap-half);
padding-top: var(--gap-eight);
}
.mbox-replies .mbox .mbox .mbox-header a:last-of-type::after {
content: " ";
display: inline-block;
padding-right: var(--gap-half);
}
.mbox-replies .mbox .mbox .buttons {
display: none;
}
[data-append]::after {
color: var(--color-accent);
content: "…";

24
src/styles/debug.css
Unescape Escape View File

@ -0,0 +1,24 @@
.mbox-img {
opacity: .73;
}
.mbox-replies {
margin-bottom: 4px !important;
outline: 2px dashed rgba(0, 255, 0, 0.15);
outline-offset: -2px;
}
.mbox-replies .mbox-replies {
outline-color: rgba(0, 255, 0, .4);
outline-offset: -4px;
}
.mbox-replies .mbox-replies .mbox-replies {
outline-color: rgba(0, 255, 0, .7);
outline-offset: -6px;
}
.mbox-replies .mbox-replies .mbox-replies .mbox-replies {
outline-color: rgba(210, 255, 0, 1);
outline-offset: -8px;
}
.mbox-replies .mbox-replies .mbox-replies .mbox-replies .mbox-replies {
outline-color: rgb(187, 119, 9);
}

11
src/styles/main.css
Unescape Escape View File

@ -3,6 +3,7 @@
@import "form.css";
@import "write.css";
@import "error.css";
/* @import "debug.css"; */
:root {
--content-width: min(100% - 2.4rem, 96ch);
@ -17,6 +18,8 @@
--font-small: 1.2rem;
--gap: 2.4rem;
--gap-half: 1.2rem;
--gap-quarter: .6rem;
--gap-eight: .3rem;
--profileimg-size: 4rem;
--profileimg-size-half: 2rem;
--profileimg-size-quarter: 1rem;
@ -56,7 +59,7 @@
--bgcolor-inactive: #434343;
--bgcolor-textinput: #0e0e0e;
--color: #e3e3e3;
--color-accent: #7b7b7b;
--color-accent: #828282;
--color-danger: #e3e3e3;
}
@ -78,7 +81,7 @@ body {
background-color: var(--bgcolor);
color: var(--color);
font-size: 1.6rem;
line-height: 1.5;
line-height: 1.313;
word-break: break-all;
}
@ -101,6 +104,7 @@ textarea {
small,
time {
font-size: var(--font-small);
line-height: 1.25;
}
canvas,
@ -118,6 +122,7 @@ img {
a {
color: var(--color-accent);
text-decoration: none;
}
a:focus {
@ -126,7 +131,7 @@ a:focus {
outline-offset: 0;
}
a:visited {
color: darkslateblue;
color: #8377ce;
}
nav a:visited {
color: inherit;

4
src/styles/write.css
Unescape Escape View File

@ -2,11 +2,11 @@
background-color: darkmagenta;
border-color: darkmagenta;
border-radius: 10rem;
bottom: 8rem;
bottom: 5rem;
height: 10rem;
padding: 0;
position: fixed;
right: 8rem;
right: 5rem;
width: 10rem;
z-index: 1;
}

10
src/ui.ts
Unescape Escape View File

@ -21,7 +21,9 @@ export const createTextNote = (
relay: string,
) => {
const {host, img, name, time, userName} = getMetadata(evt, relay);
const replies = replyList.filter(({replyTo}) => replyTo === evt.id);
const replies = replyList.filter(({replyTo}) => replyTo === evt.id)
.sort(sortByCreatedAt)
.reverse();
// const isLongContent = evt.content.trimRight().length > 280;
// const content = isLongContent ? evt.content.slice(0, 280) : evt.content;
const reactions = getReactions(evt.id);
@ -44,7 +46,7 @@ export const createTextNote = (
if (localStorage.getItem('reply_to') === evt.id) {
openWriteInput(buttons, evt.id);
}
const replyFeed: Array<HTMLElement> = replies[0] ? replies.sort(sortByCreatedAt).map(e => setViewElem(e.id, createTextNote(e, relay))) : [];
const replyFeed: Array<HTMLElement> = replies[0] ? replies.map(e => setViewElem(e.id, createTextNote(e, relay))) : [];
return elemArticle([
elem('div', {className: 'mbox-img'}, img),
elem('div', {className: 'mbox-body'}, [
@ -64,8 +66,8 @@ export const createTextNote = (
]),
buttons,
]),
...(replies[0] ? [elem('div', {className: 'mobx-replies'}, replyFeed.reverse())] : []),
], {data: {id: evt.id, pubkey: evt.pubkey, relay}});
...(replies[0] ? [elem('div', {className: 'mbox-replies'}, replyFeed)] : []),
], {className: replies.length ? 'mbox-has-replies' : '', data: {id: evt.id, pubkey: evt.pubkey, relay}});
};
export const renderRecommendServer = (evt: Event, relay: string) => {

Write Preview
Loading…
Cancel
Save