monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

upd: rework threading ui 2/2

Browse source 
Co-authored-by: daph <d@waal.me>
Co-authored-by: Marie <marie@kaifa.ch>
This commit is contained in:
Insert5StarName 2023-12-02 20:28:22 +01:00
parent 419bde43a6
commit 5db163bc67
1 changed files with 92 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
packages/frontend/src/components/SkNoteSub.vue
View file

@ -8,7 +8,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<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>
<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"> <div :class="$style.body">
<SkNoteHeader :class="$style.header" :note="note" :classic="true" :mini="true"/> <SkNoteHeader :class="$style.header" :note="note" :classic="true" :mini="true"/>
<div :class="$style.content"> <div :class="$style.content">
@ -66,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" :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>
@ -444,9 +451,9 @@ if (props.detail) {
color: var(--fgHighlighted); color: var(--fgHighlighted);
} }
} }
// Responsible for Reply borders 448 and 508
.reply, .more { .reply, .more {
border-left: solid 0.5px var(--divider); //border-left: solid 0.5px var(--divider);
margin-top: 10px; margin-top: 10px;
} }
@ -505,8 +512,9 @@ if (props.detail) {
padding: 0; padding: 0;
} }
.reply, .more { .reply, .more {
border-left: solid 0.5px var(--divider); //border-left: solid 0.5px var(--divider);
margin-top: 10px; margin-top: 10px;
} }
@ -542,4 +550,83 @@ if (props.detail) {
margin: 8px 8px 0 8px; margin: 8px 8px 0 8px;
border-radius: var(--radius-sm); 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> </style>