heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

upd: make avatars smaller on replies to allow more space for text

Browse source 
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.
This commit is contained in:
ShittyKopper 2024-01-28 18:20:59 +03:00
parent 1baec59efd
commit 1bc2da2bda
2 changed files with 13 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!repliesLoaded" style="padding: 16px"> <div v-if="!repliesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton> <MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
</div> </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>
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes"> <div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
<MkPagination :pagination="renotesPagination" :disableAutoLoad="true"> <MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@ -195,7 +195,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!quotesLoaded" style="padding: 16px"> <div v-if="!quotesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.loadReplies }}</MkButton> <MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.loadReplies }}</MkButton>
</div> </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>
<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions"> <div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
<div :class="$style.reactionTabs"> <div :class="$style.reactionTabs">

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

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <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 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>
@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
<template v-if="depth < numberOfReplies"> <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> </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>
@ -125,8 +125,11 @@ const props = withDefaults(defineProps<{
// how many notes are in between this one and the note being viewed in detail // how many notes are in between this one and the note being viewed in detail
depth?: number; depth?: number;
reply?: boolean;
}>(), { }>(), {
depth: 1, depth: 1,
reply: false,
}); });
const el = shallowRef<HTMLElement>(); const el = shallowRef<HTMLElement>();
@ -439,7 +442,11 @@ if (props.detail) {
--reply-indent: calc(.5 * var(--avatar)); --reply-indent: calc(.5 * var(--avatar));
&.children { &.children {
padding: 10px 0 0 16px; padding: 10px 0 0 8px;
}
&.replyRoot {
--avatar: 36px;
} }
} }
@ -610,10 +617,6 @@ if (props.detail) {
@container (max-width: 480px) { @container (max-width: 480px) {
.root { .root {
padding: 22px 24px; padding: 22px 24px;
&.children {
padding: 10px 0 0 8px;
}
} }
.line { .line {
@ -683,35 +686,4 @@ if (props.detail) {
border-bottom: unset; 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>