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 <div v-if="!hideLine" :class="$style.line"></div> <div :class="$style.main"> <div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div> - <MkAvatar :class="$style.avatar" :user="note.user" link preview/> + <!-- new avatar container with line (post section) --> + <div :class="$style.avatarContainer"> + <MkAvatar :class="$style.avatar" :user="note.user" link preview/> + <template v-if="note.repliesCount > 0"> + <div v-if="hideLine" :class="$style.threadLine"></div> + </template> + </div> + <!-- end new avatar container --> <div :class="$style.body"> <SkNoteHeader :class="$style.header" :note="note" :classic="true" :mini="true"/> <div :class="$style.content"> @@ -66,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </div> <template v-if="depth < 5"> - <SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="$style.reply" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws"/> + <SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws"/> </template> <div v-else :class="$style.more"> <MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA> @@ -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; + } +} </style>