diff options
Diffstat (limited to 'packages/frontend/src/components/MkNote.vue')
| -rw-r--r-- | packages/frontend/src/components/MkNote.vue | 49 |
1 files changed, 21 insertions, 28 deletions
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 869164273e..4da8f16df1 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -47,14 +47,11 @@ SPDX-License-Identifier: AGPL-3.0-only <Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/> </div> <article v-else :class="$style.article" @contextmenu.stop="onContextmenu"> - <div style="display: flex; padding-bottom: 10px;"> - <div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div> - <MkAvatar :class="[$style.avatar, { [$style.avatarReplyTo]: appearNote.reply }]" :user="appearNote.user" :link="!mock" :preview="!mock"/> - <div :class="$style.main"> - <MkNoteHeader :note="appearNote" :mini="true"/> - </div> - </div> - <div :class="[{ [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined"> + <div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div> + <MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/> + <div :class="[$style.main, { [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined"> + <MkNoteHeader :note="appearNote" :mini="true" v-on:click.stop/> + <MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/> <div style="container-type: inline-size;"> <p v-if="appearNote.cw != null" :class="$style.cw"> <Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/> @@ -63,6 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only <div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]" > <div :class="$style.text"> <span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span> + <MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ph-arrow-bend-left-up ph-bold ph-lg"></i></MkA> <Mfm v-if="appearNote.text" :parsedNodes="parsed" @@ -178,6 +176,7 @@ import MkCwButton from '@/components/MkCwButton.vue'; import MkPoll from '@/components/MkPoll.vue'; import MkUsersTooltip from '@/components/MkUsersTooltip.vue'; import MkUrlPreview from '@/components/MkUrlPreview.vue'; +import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; import MkButton from '@/components/MkButton.vue'; import { pleaseLogin } from '@/scripts/please-login.js'; import { focusPrev, focusNext } from '@/scripts/focus.js'; @@ -831,7 +830,7 @@ function emitUpdReaction(emoji: string, delta: number) { position: relative; display: flex; align-items: center; - padding: 24px 38px 16px; + padding: 16px 32px 8px 32px; line-height: 28px; white-space: pre; color: var(--renote); @@ -883,7 +882,7 @@ function emitUpdReaction(emoji: string, delta: number) { align-items: center; line-height: 28px; white-space: pre; - padding: 8px 38px 24px; + padding: 0 32px 18px; } .collapsedRenoteTargetAvatar { @@ -910,6 +909,7 @@ function emitUpdReaction(emoji: string, delta: number) { .article { position: relative; + display: flex; padding: 28px 32px; } @@ -926,19 +926,12 @@ function emitUpdReaction(emoji: string, delta: number) { .avatar { flex-shrink: 0; display: block !important; - position: sticky !important; margin: 0 14px 0 0; width: 58px; height: 58px; position: sticky !important; top: calc(22px + var(--stickyTop, 0px)); left: 0; - transition: top 0.5s; - - &.avatarReplyTo { - position: relative !important; - top: 0 !important; - } } .main { @@ -1001,6 +994,7 @@ function emitUpdReaction(emoji: string, delta: number) { .text { overflow-wrap: break-word; + overflow: hidden; } .replyIcon { @@ -1033,8 +1027,7 @@ function emitUpdReaction(emoji: string, delta: number) { .quoteNote { padding: 16px; - // Made border solid, stylistic choice - border: solid 1px var(--renote); + border: dashed 1px var(--renote); border-radius: var(--radius-sm); overflow: clip; } @@ -1074,11 +1067,7 @@ function emitUpdReaction(emoji: string, delta: number) { } .renote { - padding: 24px 28px 16px; - } - - .collapsedRenoteTarget { - padding: 8px 28px 24px; + padding: 12px 26px 0 26px; } .article { @@ -1096,8 +1085,12 @@ function emitUpdReaction(emoji: string, delta: number) { font-size: 0.9em; } + .renote { + padding: 10px 22px 0 22px; + } + .article { - padding: 23px 25px; + padding: 20px 22px; } .footer { @@ -1107,7 +1100,7 @@ function emitUpdReaction(emoji: string, delta: number) { @container (max-width: 480px) { .renote { - padding: 20px 24px 8px; + padding: 8px 16px 0 16px; } .tip { @@ -1115,12 +1108,12 @@ function emitUpdReaction(emoji: string, delta: number) { } .collapsedRenoteTarget { - padding: 8px 24px 20px; + padding: 0 16px 9px; margin-top: 4px; } .article { - padding: 22px 24px; + padding: 14px 16px; } } |