From 1bc2da2bda00c802efd85421f51884a075e059e5 Mon Sep 17 00:00:00 2001
From: ShittyKopper <shittykopper@w.on-t.work>
Date: Sun, 28 Jan 2024 18:20:59 +0300
Subject: [PATCH] upd: make avatars smaller on replies to allow more space for
text
i'm unsure about the batch of @container blocks at the end of the CSS,
they seem like leftovers from a previous implementation. removing them
didn't seem to change anything but i may be overlooking something.
---
.../src/components/SkNoteDetailed.vue | 4 +-
.../frontend/src/components/SkNoteSub.vue | 50 ++++---------------
2 files changed, 13 insertions(+), 41 deletions(-)
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index 0681ddc6c8..cf54d9d50e 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!repliesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
</div>
- <SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
+ <SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :reply="true"/>
</div>
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@@ -195,7 +195,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!quotesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.loadReplies }}</MkButton>
</div>
- <SkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws"/>
+ <SkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :reply="true"/>
</div>
<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
<div :class="$style.reactionTabs">
diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index 363dcef348..164f4e883a 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/packages/frontend/src/components/SkNoteSub.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
+<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1, [$style.replyRoot]: props.reply }]">
<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>
@@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<template v-if="depth < numberOfReplies">
- <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" :onDeleteCallback="removeReply"/>
+ <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" :onDeleteCallback="removeReply" :reply="props.reply"/>
</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>
@@ -125,8 +125,11 @@ const props = withDefaults(defineProps<{
// how many notes are in between this one and the note being viewed in detail
depth?: number;
+
+ reply?: boolean;
}>(), {
depth: 1,
+ reply: false,
});
const el = shallowRef<HTMLElement>();
@@ -439,7 +442,11 @@ if (props.detail) {
--reply-indent: calc(.5 * var(--avatar));
&.children {
- padding: 10px 0 0 16px;
+ padding: 10px 0 0 8px;
+ }
+
+ &.replyRoot {
+ --avatar: 36px;
}
}
@@ -478,7 +485,7 @@ if (props.detail) {
transition: opacity .2s, background .2s;
z-index: -1;
}
-
+
&:hover::after,
&:focus-within::after {
opacity: 1;
@@ -610,10 +617,6 @@ if (props.detail) {
@container (max-width: 480px) {
.root {
padding: 22px 24px;
-
- &.children {
- padding: 10px 0 0 8px;
- }
}
.line {
@@ -683,35 +686,4 @@ if (props.detail) {
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>