Tabbed content in detailed notes page
This commit is contained in:
Freeplay
parent
e921e2dce3
commit
d013b351e2
6 changed files with 251 additions and 187 deletions
|
|
@ -5,7 +5,7 @@
|
|||
ref="el"
|
||||
v-hotkey="keymap"
|
||||
v-size="{ max: [500, 450, 350, 300] }"
|
||||
class="tkcbzcuz"
|
||||
class="tkcbzcuz note-container"
|
||||
:tabindex="!isDeleted ? '-1' : null"
|
||||
:class="{ renote: isRenote }"
|
||||
>
|
||||
|
|
@ -104,6 +104,11 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="detailedView" class="info">
|
||||
<MkA class="created-at" :to="notePage(appearNote)">
|
||||
<MkTime :time="appearNote.createdAt" mode="absolute" />
|
||||
</MkA>
|
||||
<MkA
|
||||
v-if="appearNote.channel && !inChannel"
|
||||
class="channel"
|
||||
|
|
@ -113,11 +118,6 @@
|
|||
{{ appearNote.channel.name }}</MkA
|
||||
>
|
||||
</div>
|
||||
<div v-if="detailedView" class="info">
|
||||
<MkA class="created-at" :to="notePage(appearNote)">
|
||||
<MkTime :time="appearNote.createdAt" mode="absolute" />
|
||||
</MkA>
|
||||
</div>
|
||||
<footer ref="footerEl" class="footer" @click.stop tabindex="-1">
|
||||
<XReactionsViewer
|
||||
v-if="enableEmojiReactions"
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
@click="reply()"
|
||||
>
|
||||
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
|
||||
<template v-if="appearNote.repliesCount > 0">
|
||||
<template v-if="appearNote.repliesCount > 0 && !detailedView">
|
||||
<p class="count">{{ appearNote.repliesCount }}</p>
|
||||
</template>
|
||||
</button>
|
||||
|
|
@ -139,6 +139,7 @@
|
|||
class="button"
|
||||
:note="appearNote"
|
||||
:count="appearNote.renoteCount"
|
||||
:detailedView="detailedView"
|
||||
/>
|
||||
<XStarButtonNoEmoji
|
||||
v-if="!enableEmojiReactions"
|
||||
|
|
@ -450,6 +451,10 @@ function focusAfter() {
|
|||
focusNext(el.value);
|
||||
}
|
||||
|
||||
function scrollIntoView() {
|
||||
el.value.scrollIntoView();
|
||||
}
|
||||
|
||||
function noteClick(e) {
|
||||
if (document.getSelection().type === "Range" || props.detailedView) {
|
||||
e.stopPropagation();
|
||||
|
|
@ -464,6 +469,12 @@ function readPromo() {
|
|||
});
|
||||
isDeleted.value = true;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
focus,
|
||||
blur,
|
||||
scrollIntoView,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -656,14 +667,13 @@ function readPromo() {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .channel {
|
||||
opacity: 0.7;
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
> .info {
|
||||
margin-block: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: .7em;
|
||||
margin-top: 16px;
|
||||
opacity: 0.7;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,17 +25,51 @@
|
|||
:detailedView="true"
|
||||
/>
|
||||
|
||||
<div ref="noteEl" class="article" tabindex="-1" :id="appearNote.id">
|
||||
<MkNote
|
||||
@contextmenu.stop="onContextmenu"
|
||||
tabindex="-1"
|
||||
:note="appearNote"
|
||||
detailedView
|
||||
></MkNote>
|
||||
</div>
|
||||
<MkNote
|
||||
ref="noteEl"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
tabindex="-1"
|
||||
:note="appearNote"
|
||||
detailedView
|
||||
></MkNote>
|
||||
|
||||
<MkTab
|
||||
v-model="tab"
|
||||
:style="'chips'"
|
||||
@update:modelValue="loadTab"
|
||||
>
|
||||
<option value="replies">
|
||||
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
|
||||
<template v-if="appearNote.repliesCount > 0">
|
||||
<span class="count">{{ appearNote.repliesCount }}</span>
|
||||
</template>
|
||||
{{ i18n.ts._notification._types.reply }}
|
||||
</option>
|
||||
<option value="renotes">
|
||||
<i class="ph-repeat ph-bold ph-lg"></i>
|
||||
<template v-if="appearNote.renoteCount > 0">
|
||||
<span class="count">{{ appearNote.renoteCount }}</span>
|
||||
</template>
|
||||
{{ i18n.ts._notification._types.renote }}
|
||||
</option>
|
||||
<option value="quotes">
|
||||
<i class="ph-quotes ph-bold ph-lg"></i>
|
||||
<template v-if="directQuotes?.length > 0">
|
||||
<span class="count">{{ directQuotes.length }}</span>
|
||||
</template>
|
||||
{{ i18n.ts._notification._types.quote }}
|
||||
</option>
|
||||
<option value="clips">
|
||||
<i class="ph-paperclip ph-bold ph-lg"></i>
|
||||
<template v-if="clips.length > 0">
|
||||
<span class="count">{{ clips.length }}</span>
|
||||
</template>
|
||||
{{ i18n.ts.clips }}
|
||||
</option>
|
||||
</MkTab>
|
||||
|
||||
<MkNoteSub
|
||||
v-if="directReplies"
|
||||
v-if="directReplies && tab === 'replies'"
|
||||
v-for="note in directReplies"
|
||||
:key="note.id"
|
||||
:note="note"
|
||||
|
|
@ -43,7 +77,66 @@
|
|||
:conversation="replies"
|
||||
:detailedView="true"
|
||||
/>
|
||||
<MkLoading v-else-if="appearNote.repliesCount > 0" />
|
||||
<MkLoading v-else-if="tab === 'replies' && appearNote.repliesCount > 0" />
|
||||
|
||||
<MkNoteSub
|
||||
v-if="directQuotes && tab === 'quotes'"
|
||||
v-for="note in directQuotes"
|
||||
:key="note.id"
|
||||
:note="note"
|
||||
class="reply"
|
||||
:conversation="directQuotes"
|
||||
:detailedView="true"
|
||||
/>
|
||||
<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
|
||||
|
||||
<!-- <MkPagination
|
||||
v-if="tab === 'renotes'"
|
||||
v-slot="{ items }"
|
||||
ref="pagingComponent"
|
||||
:pagination="pagination"
|
||||
> -->
|
||||
<MkUserCardMini
|
||||
v-if="tab === 'renotes' && appearNote.renoteCount > 0"
|
||||
v-for="item in renotes"
|
||||
:key="item.user.id"
|
||||
:user="item.user"
|
||||
:with-chart="false"
|
||||
/>
|
||||
<!-- </MkPagination> -->
|
||||
<MkLoading v-else-if="tab === 'renotes' && appearNote.renoteCount > 0" />
|
||||
|
||||
<div
|
||||
v-if="tab === 'clips' && clips.length > 0"
|
||||
class="_content clips"
|
||||
>
|
||||
<MkA
|
||||
v-for="item in clips"
|
||||
:key="item.id"
|
||||
:to="`/clips/${item.id}`"
|
||||
class="item _panel"
|
||||
>
|
||||
<b>{{ item.name }}</b>
|
||||
<div
|
||||
v-if="item.description"
|
||||
class="description"
|
||||
>
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<div class="user">
|
||||
<MkAvatar
|
||||
:user="item.user"
|
||||
class="avatar"
|
||||
:show-indicator="true"
|
||||
/>
|
||||
<MkUserName
|
||||
:user="item.user"
|
||||
:nowrap="false"
|
||||
/>
|
||||
</div>
|
||||
</MkA>
|
||||
</div>
|
||||
<MkLoading v-else-if="tab === 'clips' && clips.length > 0" />
|
||||
</div>
|
||||
<div v-else class="_panel muted" @click="muted.muted = false">
|
||||
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
|
||||
|
|
@ -73,15 +166,17 @@ import {
|
|||
reactive,
|
||||
ref,
|
||||
} from "vue";
|
||||
import type * as misskey from "calckey-js";
|
||||
import * as misskey from "calckey-js";
|
||||
import MkTab from "@/components/MkTab.vue";
|
||||
import MkNote from "@/components/MkNote.vue";
|
||||
import MkNoteSub from "@/components/MkNoteSub.vue";
|
||||
import XStarButton from "@/components/MkStarButton.vue";
|
||||
import XRenoteButton from "@/components/MkRenoteButton.vue";
|
||||
import MkPagination from "@/components/MkPagination.vue";
|
||||
import MkUserCardMini from "@/components/MkUserCardMini.vue";
|
||||
import { pleaseLogin } from "@/scripts/please-login";
|
||||
import { getWordSoftMute } from "@/scripts/check-word-mute";
|
||||
import { userPage } from "@/filters/user";
|
||||
import { useRouter } from "@/router";
|
||||
import * as os from "@/os";
|
||||
import { defaultStore, noteViewInterruptors } from "@/store";
|
||||
import { reactionPicker } from "@/scripts/reaction-picker";
|
||||
|
|
@ -92,12 +187,15 @@ import { useNoteCapture } from "@/scripts/use-note-capture";
|
|||
import { deepClone } from "@/scripts/clone";
|
||||
import { stream } from "@/stream";
|
||||
import { NoteUpdatedEvent } from "calckey-js/built/streaming.types";
|
||||
import appear from "@/directives/appear";
|
||||
|
||||
const props = defineProps<{
|
||||
note: misskey.entities.Note;
|
||||
pinned?: boolean;
|
||||
}>();
|
||||
|
||||
let tab = $ref("replies");
|
||||
|
||||
let note = $ref(deepClone(props.note));
|
||||
|
||||
const softMuteReasonI18nSrc = (what?: string) => {
|
||||
|
|
@ -146,6 +244,9 @@ const translating = ref(false);
|
|||
let conversation = $ref<null | misskey.entities.Note[]>([]);
|
||||
const replies = ref<misskey.entities.Note[]>([]);
|
||||
let directReplies = $ref<null | misskey.entities.Note[]>([]);
|
||||
let directQuotes = $ref<null | misskey.entities.Note[]>([]);
|
||||
let clips = $ref();
|
||||
let renotes = $ref();
|
||||
let isScrolling;
|
||||
|
||||
const keymap = {
|
||||
|
|
@ -259,10 +360,14 @@ os.api("notes/children", {
|
|||
directReplies = res
|
||||
.filter(
|
||||
(note) =>
|
||||
note.replyId === appearNote.id ||
|
||||
note.renoteId === appearNote.id
|
||||
note.replyId === appearNote.id
|
||||
)
|
||||
.reverse();
|
||||
directQuotes = res
|
||||
.filter(
|
||||
(note) =>
|
||||
note.renoteId === appearNote.id
|
||||
);
|
||||
});
|
||||
|
||||
conversation = null;
|
||||
|
|
@ -276,6 +381,33 @@ if (appearNote.replyId) {
|
|||
});
|
||||
}
|
||||
|
||||
clips = null;
|
||||
os.api("notes/clips", {
|
||||
noteId: appearNote.id,
|
||||
}).then((res) => {
|
||||
clips = res;
|
||||
});
|
||||
|
||||
// const pagination = {
|
||||
// endpoint: "notes/renotes",
|
||||
// noteId: appearNote.id,
|
||||
// limit: 10,
|
||||
// };
|
||||
|
||||
// const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
|
||||
|
||||
renotes = null;
|
||||
function loadTab() {
|
||||
if (tab === "renotes" && !renotes) {
|
||||
os.api("notes/renotes", {
|
||||
noteId: appearNote.id,
|
||||
limit: 100,
|
||||
}).then((res) => {
|
||||
renotes = res;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function onNoteUpdated(noteData: NoteUpdatedEvent): Promise<void> {
|
||||
const { type, id, body } = noteData;
|
||||
|
||||
|
|
@ -326,12 +458,12 @@ document.addEventListener("wheel", () => {
|
|||
onMounted(() => {
|
||||
stream.on("noteUpdated", onNoteUpdated);
|
||||
isScrolling = false;
|
||||
noteEl?.scrollIntoView();
|
||||
noteEl.scrollIntoView();
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
if (!isScrolling) {
|
||||
noteEl?.scrollIntoView();
|
||||
noteEl.scrollIntoView();
|
||||
if (location.hash) {
|
||||
location.replace(location.hash); // Jump to highlighted reply
|
||||
}
|
||||
|
|
@ -372,80 +504,36 @@ onUnmounted(() => {
|
|||
}
|
||||
}
|
||||
|
||||
&:hover > .article > .main > .footer > .button {
|
||||
opacity: 1;
|
||||
}
|
||||
> .reply-to {
|
||||
margin-bottom: -16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
> .renote {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 32px 8px 32px;
|
||||
line-height: 28px;
|
||||
white-space: pre;
|
||||
color: var(--renote);
|
||||
|
||||
> .avatar {
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 0 8px 0 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
> span {
|
||||
overflow: hidden;
|
||||
flex-shrink: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
> .name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
> .info {
|
||||
margin-left: auto;
|
||||
font-size: 0.9em;
|
||||
|
||||
> .time {
|
||||
flex-shrink: 0;
|
||||
color: inherit;
|
||||
|
||||
> .dropdownIcon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .renote + .article {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
> .article {
|
||||
padding-block: 28px 6px;
|
||||
> :deep(.note-container) {
|
||||
padding-block: 28px 0;
|
||||
padding-top: 12px;
|
||||
font-size: 1.1rem;
|
||||
overflow: clip;
|
||||
outline: none;
|
||||
scroll-margin-top: calc(var(--stickyTop) + 20vh);
|
||||
:deep(.article) {
|
||||
.article {
|
||||
cursor: unset;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&:first-of-type {
|
||||
padding-top: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
> :deep(.chips) {
|
||||
padding: 6px 32px 12px;
|
||||
}
|
||||
> :deep(.user-card-mini) {
|
||||
padding-inline: 32px;
|
||||
border-top: 1px solid var(--divider);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
> .reply {
|
||||
border-top: solid 0.5px var(--divider);
|
||||
cursor: pointer;
|
||||
|
|
@ -532,46 +620,20 @@ onUnmounted(() => {
|
|||
> .reply-to:first-child {
|
||||
padding-top: 14px;
|
||||
}
|
||||
> .renote {
|
||||
padding: 8px 16px 0 16px;
|
||||
}
|
||||
|
||||
> .article {
|
||||
> :deep(.note-container) {
|
||||
padding: 6px 0 0 0;
|
||||
> .header > .body {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_350px {
|
||||
> .article {
|
||||
> .main {
|
||||
> .footer {
|
||||
> .button {
|
||||
&:not(:last-child) {
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .clips, > .chips, > :deep(.user-card-mini) {
|
||||
padding-inline: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_300px {
|
||||
font-size: 0.825em;
|
||||
|
||||
> .article {
|
||||
> .main {
|
||||
> .footer {
|
||||
> .button {
|
||||
&:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -580,4 +642,36 @@ onUnmounted(() => {
|
|||
text-align: center;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.clips { // want to redesign at some point
|
||||
padding: 24px 32px;
|
||||
padding-top: 0;
|
||||
> .item {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
// background: var(--buttonBg);
|
||||
border: 1px solid var(--divider);
|
||||
margin-bottom: var(--margin);
|
||||
transition: background .2s;
|
||||
&:hover, &:focus-within {
|
||||
background: var(--panelHighlight);
|
||||
}
|
||||
|
||||
> .description {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
> .user {
|
||||
$height: 32px;
|
||||
padding-top: 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
line-height: $height;
|
||||
|
||||
> .avatar {
|
||||
width: $height;
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@click="renote(false, $event)"
|
||||
>
|
||||
<i class="ph-repeat ph-bold ph-lg"></i>
|
||||
<p v-if="count > 0" class="count">{{ count }}</p>
|
||||
<p v-if="count > 0 && !detailedView" class="count">{{ count }}</p>
|
||||
</button>
|
||||
<button v-else class="eddddedb _button">
|
||||
<i class="ph-prohibit ph-bold ph-lg"></i>
|
||||
|
|
@ -30,6 +30,7 @@ import { MenuItem } from "@/types/menu";
|
|||
const props = defineProps<{
|
||||
note: misskey.entities.Note;
|
||||
count: number;
|
||||
detailedView?;
|
||||
}>();
|
||||
|
||||
const buttonRef = ref<HTMLElement>();
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@ export default defineComponent({
|
|||
modelValue: {
|
||||
required: true,
|
||||
},
|
||||
style: {
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const options = this.$slots.default();
|
||||
|
|
@ -13,7 +16,10 @@ export default defineComponent({
|
|||
return h(
|
||||
"div",
|
||||
{
|
||||
class: "pxhvhrfw",
|
||||
class: [
|
||||
"pxhvhrfw",
|
||||
{ chips: this.style === "chips" },
|
||||
],
|
||||
},
|
||||
options.map((option) =>
|
||||
withDirectives(
|
||||
|
|
@ -66,7 +72,7 @@ export default defineComponent({
|
|||
|
||||
&.active {
|
||||
color: var(--accent);
|
||||
background: var(--accentedBg);
|
||||
background: var(--accentedBg) !important;
|
||||
}
|
||||
|
||||
&:not(.active):hover {
|
||||
|
|
@ -83,6 +89,26 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
&.chips {
|
||||
padding: 12px 32px;
|
||||
font-size: .85em;
|
||||
overflow-x: auto;
|
||||
> button {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
flex: unset;
|
||||
margin: 0;
|
||||
margin-right: 8px;
|
||||
padding: .5em 1em;
|
||||
border-radius: 100px;
|
||||
background: var(--buttonBg);
|
||||
> i {
|
||||
margin-top: -.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_500px {
|
||||
font-size: 80%;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div
|
||||
class="user-card-mini"
|
||||
:class="[
|
||||
$style.root,
|
||||
{ yellow: user.isSilenced, red: user.isSuspended, gray: false },
|
||||
|
|
|
|||
|
|
@ -41,37 +41,6 @@
|
|||
class="note"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="clips && clips.length > 0"
|
||||
class="_content clips _gap"
|
||||
>
|
||||
<div class="title">{{ i18n.ts.clip }}</div>
|
||||
<MkA
|
||||
v-for="item in clips"
|
||||
:key="item.id"
|
||||
:to="`/clips/${item.id}`"
|
||||
class="item _panel _gap"
|
||||
>
|
||||
<b>{{ item.name }}</b>
|
||||
<div
|
||||
v-if="item.description"
|
||||
class="description"
|
||||
>
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<div class="user">
|
||||
<MkAvatar
|
||||
:user="item.user"
|
||||
class="avatar"
|
||||
:show-indicator="true"
|
||||
/>
|
||||
<MkUserName
|
||||
:user="item.user"
|
||||
:nowrap="false"
|
||||
/>
|
||||
</div>
|
||||
</MkA>
|
||||
</div>
|
||||
<MkButton
|
||||
v-if="!showPrev && hasPrev"
|
||||
class="load prev"
|
||||
|
|
@ -114,7 +83,6 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
let note = $ref<null | misskey.entities.Note>();
|
||||
let clips = $ref();
|
||||
let hasPrev = $ref(false);
|
||||
let hasNext = $ref(false);
|
||||
let showPrev = $ref(false);
|
||||
|
|
@ -160,9 +128,6 @@ function fetchNote() {
|
|||
.then((res) => {
|
||||
note = res;
|
||||
Promise.all([
|
||||
os.api("notes/clips", {
|
||||
noteId: note.id,
|
||||
}),
|
||||
os.api("users/notes", {
|
||||
userId: note.userId,
|
||||
untilId: note.id,
|
||||
|
|
@ -173,8 +138,7 @@ function fetchNote() {
|
|||
sinceId: note.id,
|
||||
limit: 1,
|
||||
}),
|
||||
]).then(([_clips, prev, next]) => {
|
||||
clips = _clips;
|
||||
]).then(([prev, next]) => {
|
||||
hasPrev = prev.length !== 0;
|
||||
hasNext = next.length !== 0;
|
||||
});
|
||||
|
|
@ -220,10 +184,6 @@ definePageMetadata(
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
:global(html, body) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.fcuexfpr {
|
||||
#calckey_app > :not(.wallpaper) & {
|
||||
background: var(--bg);
|
||||
|
|
@ -251,34 +211,6 @@ definePageMetadata(
|
|||
background: var(--panel);
|
||||
}
|
||||
}
|
||||
|
||||
> .clips {
|
||||
> .title {
|
||||
font-weight: bold;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
> .item {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
|
||||
> .description {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
> .user {
|
||||
$height: 32px;
|
||||
padding-top: 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
line-height: $height;
|
||||
|
||||
> .avatar {
|
||||
width: $height;
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue