misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

use responsive gaps between note toolbar items

Browse source
This commit is contained in:
Hazelnoot 2025-06-04 14:51:49 -04:00
parent dc35731589
commit 4d024d1165
8 changed files with 27 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

38
packages/frontend/src/components/SkNote.vue
View file

@ -114,7 +114,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA>
</template>
</MkReactionsViewer>
<footer :class="$style.footer">
<footer :class="$style.footer" class="_gaps _h_gaps">
<button :class="$style.footerButton" class="_button" @click.stop @click="reply()">
<i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
@ -947,10 +947,6 @@ function emitUpdReaction(emoji: string, delta: number) {
.footerButton {
font-size: 90%;
&:not(:last-child) {
margin-right: 0;
}
}
}
@ -1238,10 +1234,6 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 8px;
opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover {
color: var(--MI_THEME-fgHighlighted);
}
@ -1358,25 +1350,7 @@ function emitUpdReaction(emoji: string, delta: number) {
}
}
@container (max-width: 400px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.2em;
}
}
}
}
@container (max-width: 350px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
.colorBar {
top: 6px;
left: 6px;
@ -1385,16 +1359,6 @@ function emitUpdReaction(emoji: string, delta: number) {
}
}
@container (max-width: 300px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
}
@container (max-width: 250px) {
.quoteNote {
padding: 12px;