Compare commits
2 commits
develop
...
upd/thread
Author | SHA1 | Date | |
---|---|---|---|
|
e49607b225 | ||
|
6bb6c60589 |
3 changed files with 134 additions and 6 deletions
|
@ -1198,4 +1198,31 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||||
.clickToOpen {
|
.clickToOpen {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// thread line
|
||||||
|
.avatarReplyTo::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
width: 0px;
|
||||||
|
height: 28px;
|
||||||
|
left: 29px;
|
||||||
|
border-left: 2.5px solid rgb(174, 174, 174);
|
||||||
|
top: -28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@container (max-width: 580px) {
|
||||||
|
.avatarReplyTo::before {
|
||||||
|
height: 24px;
|
||||||
|
top: -24px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@container (max-width: 450px) {
|
||||||
|
.avatarReplyTo::before {
|
||||||
|
height: 22px;
|
||||||
|
top: -22px;
|
||||||
|
left: 23px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -768,7 +768,7 @@ function animatedMFM() {
|
||||||
.renote {
|
.renote {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 16px 32px 8px 32px;
|
padding: 16px 32px 8px 47px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
color: var(--renote);
|
color: var(--renote);
|
||||||
|
@ -1079,4 +1079,48 @@ function animatedMFM() {
|
||||||
margin-left: 0.2em;
|
margin-left: 0.2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// thread line
|
||||||
|
[class*="threadAncestor"] + .note .noteHeader::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
width: 0px;
|
||||||
|
height: 32px;
|
||||||
|
left: 29px;
|
||||||
|
border-left: 2.5px solid rgb(174, 174, 174);
|
||||||
|
top: -32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@container (max-width: 580px) {
|
||||||
|
.renote {
|
||||||
|
padding-left: 37px;
|
||||||
|
}
|
||||||
|
[class*="threadAncestor"] + .note .noteHeader::before {
|
||||||
|
left: 19px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@container (max-width: 500px) {
|
||||||
|
.renote {
|
||||||
|
padding-left: 36px;
|
||||||
|
}
|
||||||
|
[class*="threadAncestor"] + .note .noteHeader::before {
|
||||||
|
left: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@container (max-width: 480px) {
|
||||||
|
.renote {
|
||||||
|
padding-left: 35px;
|
||||||
|
}
|
||||||
|
[class*="threadAncestor"] + .note .noteHeader::before {
|
||||||
|
left: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@container (max-width: 450px) {
|
||||||
|
.renote {
|
||||||
|
padding-left: 33px;
|
||||||
|
}
|
||||||
|
[class*="threadAncestor"] + .note .noteHeader::before {
|
||||||
|
left: 31px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -4,15 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
|
<div v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }, { [$style.threadAncestor]: !hideLine }]">
|
||||||
<div v-if="!hideLine" :class="$style.line"></div>
|
<!-- <div v-if="!hideLine" :class="$style.line"></div> -->
|
||||||
<div :class="$style.main">
|
<div :class="$style.main">
|
||||||
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
|
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
|
||||||
<!-- new avatar container with line (post section) -->
|
<!-- new avatar container with line (post section) -->
|
||||||
<div :class="$style.avatarContainer">
|
<div :class="$style.avatarContainer">
|
||||||
<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
|
<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
|
||||||
<template v-if="note.repliesCount > 0">
|
<template v-if="note.repliesCount > 0">
|
||||||
<div v-if="hideLine" :class="$style.threadLine"></div>
|
<div :class="[$style.threadLine, {[$style.threadAncestorLine]: !hideLine}]"></div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<!-- end new avatar container -->
|
<!-- end new avatar container -->
|
||||||
|
@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="depth < 5">
|
<template v-if="depth < 5">
|
||||||
<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"/>
|
<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>
|
</template>
|
||||||
<div v-else :class="$style.more">
|
<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>
|
<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
|
||||||
|
@ -599,6 +599,23 @@ if (props.detail) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.threadAncestor + .threadAncestor::before,
|
||||||
|
[class*="renote"] + .threadAncestor::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
width: 0px;
|
||||||
|
height: 56px;
|
||||||
|
left: 61px;
|
||||||
|
border-left: 2.5px solid rgb(174, 174, 174);
|
||||||
|
top: -28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO FIX specificity issue
|
||||||
|
[class*="renote"] + .threadAncestor::before {
|
||||||
|
height: 36px;
|
||||||
|
top: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
@container (max-width: 580px) {
|
@container (max-width: 580px) {
|
||||||
.threadLine, .reply {
|
.threadLine, .reply {
|
||||||
margin-left: 25px;
|
margin-left: 25px;
|
||||||
|
@ -613,7 +630,18 @@ if (props.detail) {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@container (max-width: 500px) {
|
||||||
|
[class*="renote"] + .threadAncestor::before {
|
||||||
|
height: 31px;
|
||||||
|
top: -8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@container (max-width: 480px) {
|
||||||
|
[class*="renote"] + .threadAncestor::before {
|
||||||
|
height: 0px;
|
||||||
|
top: -8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@container (max-width: 450px) {
|
@container (max-width: 450px) {
|
||||||
.threadLine, .reply {
|
.threadLine, .reply {
|
||||||
margin-left: 23px;
|
margin-left: 23px;
|
||||||
|
@ -628,5 +656,34 @@ if (props.detail) {
|
||||||
.single {
|
.single {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
[class*="renote"] + .threadAncestor::before {
|
||||||
|
height: 22px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@container (max-width: 580px) {
|
||||||
|
.threadAncestor:not(:first-of-type)::before {
|
||||||
|
left: 51px;
|
||||||
|
height: 28px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@container (max-width: 500px) {
|
||||||
|
.threadAncestor:not(:first-of-type)::before {
|
||||||
|
left: 50px;
|
||||||
|
height: 46px;
|
||||||
|
top: -23px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@container (max-width: 480px) {
|
||||||
|
.threadAncestor:not(:first-of-type)::before {
|
||||||
|
left: 49px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@container (max-width: 450px) {
|
||||||
|
.threadAncestor:not(:first-of-type)::before {
|
||||||
|
left: 47px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue