note-improvements (#9799)
Boop! Co-authored-by: Freeplay <Freeplay@duck.com> Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9799 Co-authored-by: Free <freeplay@duck.com> Co-committed-by: Free <freeplay@duck.com>
This commit is contained in:
parent
99a21e70de
commit
226e497e3b
6 changed files with 53 additions and 27 deletions
|
@ -1230,13 +1230,13 @@ _sfx:
|
|||
_ago:
|
||||
future: "Future"
|
||||
justNow: "Just now"
|
||||
secondsAgo: "{n} second(s) ago"
|
||||
minutesAgo: "{n} minute(s) ago"
|
||||
hoursAgo: "{n} hour(s) ago"
|
||||
daysAgo: "{n} day(s) ago"
|
||||
weeksAgo: "{n} week(s) ago"
|
||||
monthsAgo: "{n} month(s) ago"
|
||||
yearsAgo: "{n} year(s) ago"
|
||||
secondsAgo: "{n}s ago"
|
||||
minutesAgo: "{n}m ago"
|
||||
hoursAgo: "{n}h ago"
|
||||
daysAgo: "{n}d ago"
|
||||
weeksAgo: "{n}w ago"
|
||||
monthsAgo: "{n}mo ago"
|
||||
yearsAgo: "{n}y ago"
|
||||
_time:
|
||||
second: "Second(s)"
|
||||
minute: "Minute(s)"
|
||||
|
|
|
@ -10,16 +10,16 @@
|
|||
:class="{ renote: isRenote }"
|
||||
>
|
||||
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
|
||||
<div class="note-context">
|
||||
<div class="note-context" @click="noteClick">
|
||||
<div class="line"></div>
|
||||
<div v-if="appearNote._prId_" class="info"><i class="ph-megaphone-simple-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div>
|
||||
<div v-if="appearNote._prId_" class="info"><i class="ph-megaphone-simple-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click.stop="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div>
|
||||
<div v-if="appearNote._featuredId_" class="info"><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts.featured }}</div>
|
||||
<div v-if="pinned" class="info"><i class="ph-push-pin ph-bold ph-lg"></i>{{ i18n.ts.pinnedNote }}</div>
|
||||
<div v-if="isRenote" class="renote">
|
||||
<i class="ph-repeat ph-bold ph-lg"></i>
|
||||
<I18n :src="i18n.ts.renotedBy" tag="span">
|
||||
<template #user>
|
||||
<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
|
||||
<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)" @click.stop>
|
||||
<MkUserName :user="note.user"/>
|
||||
</MkA>
|
||||
</template>
|
||||
|
@ -93,7 +93,6 @@
|
|||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</footer>
|
||||
<!-- <MkNoteFooter :note="appearNote"></MkNoteFooter> -->
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
@ -418,7 +417,7 @@ function readPromo() {
|
|||
align-items: center;
|
||||
white-space: pre;
|
||||
color: var(--renote);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
|
@ -504,7 +503,7 @@ function readPromo() {
|
|||
width: 100%;
|
||||
margin-top: 1em;
|
||||
position: sticky;
|
||||
bottom: 1em;
|
||||
bottom: var(--stickyBottom);
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
|
@ -663,6 +662,9 @@ function readPromo() {
|
|||
}
|
||||
> .line {
|
||||
margin-right: 10px;
|
||||
&::before {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .article {
|
||||
|
|
|
@ -352,6 +352,7 @@ onUnmounted(() => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.lxwezrsl {
|
||||
font-size: 1.05em;
|
||||
position: relative;
|
||||
transition: box-shadow 0.1s ease;
|
||||
contain: content;
|
||||
|
@ -451,7 +452,7 @@ onUnmounted(() => {
|
|||
&:last-child {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
font-size: 1.2em;
|
||||
font-size: 1.1em;
|
||||
overflow: clip;
|
||||
outline: none;
|
||||
scroll-margin-top: calc(var(--stickyTop) + 20vh);
|
||||
|
|
|
@ -7,25 +7,25 @@
|
|||
<div v-if="conversation && depth > 1" class="line"></div>
|
||||
<div class="main" @click="noteClick">
|
||||
<div class="avatar-container">
|
||||
<MkAvatar class="avatar" :user="note.user"/>
|
||||
<MkAvatar class="avatar" :user="appearNote.user"/>
|
||||
<div v-if="(!conversation) || replies.length > 0" class="line"></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<XNoteHeader class="header" :note="note" :mini="true"/>
|
||||
<div class="body">
|
||||
<p v-if="note.cw != null" class="cw">
|
||||
<MkA v-if="note.replyId" :to="`/notes/${note.replyId}`" class="reply-icon" @click.stop>
|
||||
<p v-if="appearNote.cw != null" class="cw">
|
||||
<MkA v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`" class="reply-icon" @click.stop>
|
||||
<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
|
||||
</MkA>
|
||||
<MkA v-if="conversation && note.renoteId && note.renoteId != parentId && !note.replyId" :to="`/notes/${note.renoteId}`" class="reply-icon" @click.stop>
|
||||
<MkA v-if="conversation && appearNote.renoteId && appearNote.renoteId != parentId && !appearNote.replyId" :to="`/notes/${appearNote.renoteId}`" class="reply-icon" @click.stop>
|
||||
<i class="ph-quotes ph-bold ph-lg"></i>
|
||||
</MkA>
|
||||
<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
|
||||
<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
|
||||
<br/>
|
||||
<XCwButton v-model="showContent" :note="note"/>
|
||||
</p>
|
||||
<div v-show="note.cw == null || showContent" class="content">
|
||||
<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="note.parentId" :conversation="conversation"/>
|
||||
<div v-show="appearNote.cw == null || showContent" class="content">
|
||||
<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="appearNote.parentId" :conversation="conversation"/>
|
||||
</div>
|
||||
<div v-if="translating || translation" class="translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
|
@ -56,15 +56,14 @@
|
|||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</footer>
|
||||
<!-- <MkNoteFooter :note="note" :directReplies="replies.length"></MkNoteFooter> -->
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="conversation">
|
||||
<template v-if="replies.length == 1">
|
||||
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth" :parentId="note.replyId"/>
|
||||
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth" :parentId="appearNote.replyId"/>
|
||||
</template>
|
||||
<template v-else-if="depth < 5">
|
||||
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1" :parentId="note.replyId"/>
|
||||
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1" :parentId="appearNote.replyId"/>
|
||||
</template>
|
||||
<div v-else-if="replies.length > 0" class="more">
|
||||
<div class="line"></div>
|
||||
|
@ -457,6 +456,26 @@ function noteClick(e) {
|
|||
-webkit-mask: linear-gradient(to right, transparent 2px, black 2px);
|
||||
}
|
||||
}
|
||||
// End Reply Divider
|
||||
.children > .main:last-child {
|
||||
padding-bottom: 1em;
|
||||
&::before {
|
||||
bottom: 1em;
|
||||
}
|
||||
// &::after {
|
||||
// content: "";
|
||||
// border-top: 1px solid var(--X13);
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// margin-left: calc(var(--avatarSize) + 12px);
|
||||
// inset-inline: 0;
|
||||
// }
|
||||
}
|
||||
&.firstColumn > .children:last-child > .main {
|
||||
padding-bottom: 0 !important;
|
||||
&::before { bottom: 0 !important }
|
||||
// &::after { content: unset }
|
||||
}
|
||||
|
||||
&.max-width_500px {
|
||||
:not(.reply) > & {
|
||||
|
|
|
@ -130,7 +130,7 @@ const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : n
|
|||
width: 100%;
|
||||
margin-top: 1em;
|
||||
position: sticky;
|
||||
bottom: 1em;
|
||||
bottom: var(--stickyBottom);
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="dkgtipfy" :class="{ wallpaper }">
|
||||
<div class="dkgtipfy" :class="{ wallpaper, isMobile }">
|
||||
<XSidebar v-if="!isMobile" class="sidebar"/>
|
||||
|
||||
<MkStickyContainer class="contents">
|
||||
|
@ -319,6 +319,10 @@ console.log(mainRouter.currentRoute.value.name);
|
|||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
--stickyBottom: 1em;
|
||||
&.isMobile {
|
||||
--stickyBottom: 6rem;
|
||||
}
|
||||
&.wallpaper {
|
||||
background: var(--wallpaperOverlay);
|
||||
//backdrop-filter: var(--blur, blur(4px));
|
||||
|
@ -363,7 +367,7 @@ console.log(mainRouter.currentRoute.value.name);
|
|||
}
|
||||
|
||||
> .postButton, .widgetButton {
|
||||
bottom: 6rem;
|
||||
bottom: var(--stickyBottom);
|
||||
right: 1.5rem;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
|
|
Loading…
Reference in a new issue