From 5db163bc67a928bb222af0472deaae73045f07cf Mon Sep 17 00:00:00 2001 From: Insert5StarName Date: Sat, 2 Dec 2023 20:28:22 +0100 Subject: [PATCH] upd: rework threading ui 2/2 Co-authored-by: daph Co-authored-by: Marie --- .../frontend/src/components/SkNoteSub.vue | 97 ++++++++++++++++++- 1 file changed, 92 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue index e11d7bc75d..629603738f 100644 --- a/packages/frontend/src/components/SkNoteSub.vue +++ b/packages/frontend/src/components/SkNoteSub.vue @@ -8,7 +8,14 @@ SPDX-License-Identifier: AGPL-3.0-only
- + +
+ + +
+
@@ -66,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.continueThread }} @@ -444,9 +451,9 @@ if (props.detail) { color: var(--fgHighlighted); } } - +// Responsible for Reply borders 448 and 508 .reply, .more { - border-left: solid 0.5px var(--divider); + //border-left: solid 0.5px var(--divider); margin-top: 10px; } @@ -505,8 +512,9 @@ if (props.detail) { padding: 0; } + .reply, .more { - border-left: solid 0.5px var(--divider); + //border-left: solid 0.5px var(--divider); margin-top: 10px; } @@ -542,4 +550,83 @@ if (props.detail) { margin: 8px 8px 0 8px; border-radius: var(--radius-sm); } + +// avatar container with line +.avatarContainer { + display: flex; + flex-direction: column; +} + +.threadLine { + width: 0; + flex-grow: 1; + border-left: 2.5px solid rgb(174, 174, 174); + margin-left: 29px; +} + +.reply { + margin-left: 29px; +} + +.reply:not(:last-child) { + border-left: 2.5px solid rgb(174, 174, 174); + + &::before { + left: -2px; + } +} + +.reply::before { + position: absolute; + content: ''; + left: 0px; + top: -10px; + height: 49px; + width: 15px; + border-left: 2.5px solid rgb(174, 174, 174); + border-bottom: 2.5px solid rgb(174, 174, 174); + border-bottom-left-radius: 15px; +} + +.single { + margin-left: 0; + padding-left: 0 !important; + + &::before { + left: 29px; + width: 0; + border-bottom: unset; + } +} + +@container (max-width: 580px) { + .threadLine, .reply { + margin-left: 25px; + } + .reply::before { + height: 45px; + } + .single::before { + left: 25px; + } + .single { + margin-left: 0; + } +} + +@container (max-width: 450px) { + .threadLine, .reply { + margin-left: 23px; + } + .reply::before { + height: 43px; + } + .single::before { + left: 23px; + width: 9px; + } + .single { + margin-left: 0; + } +}