Tweak UI

src/client/components/date-separated-list.vue

@@ -18,7 +18,12 @@ export default defineComponent({
 			type: Boolean,
 			required: false,
 			default: false
-		}
+		},
+		noGap: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
 
 	methods: {
@@ -37,18 +42,16 @@ export default defineComponent({
 	},
 
 	render() {
-		const noGap = [...document.querySelectorAll('._noGap_')].some(el => el.contains(this.$parent.$el));
-
 		if (this.items.length === 0) return;
 
 		return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
-			class: 'sqadhkmv' + (noGap ? ' _block' : ''),
+			class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
 			name: 'list',
 			tag: 'div',
 			'data-direction': this.direction,
 			'data-reversed': this.reversed ? 'true' : 'false',
 		} : {
-			class: 'sqadhkmv',
+			class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
 		}, this.items.map((item, i) => {
 			const el = this.$slots.default({
 				item: item
@@ -154,9 +157,8 @@ export default defineComponent({
 			}
 		}
 	}
-}
 
-._noGap_ .sqadhkmv {
+	&.noGap {
 		> * {
 			margin: 0 !important;
 			border: none;
@@ -167,6 +169,7 @@ export default defineComponent({
 				border-bottom: solid 0.5px var(--divider);
 			}
 		}
+	}
 }
 
 ._inContainer_ .sqadhkmv > * {

src/client/components/form/suspense.vue

@@ -80,7 +80,6 @@ export default defineComponent({
 .fade-leave-active {
 	transition: opacity 0.125s ease;
 }
-
 .fade-enter-from,
 .fade-leave-to {
 	opacity: 0;

src/client/components/global/loading.vue

@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import * as os from '@client/os';
 
 export default defineComponent({
 	props: {

src/client/components/notes.vue

@@ -1,14 +1,15 @@
 <template>
-<div>
+<transition name="fade" mode="out-in">
-	<div class="_fullinfo" v-if="empty">
+	<MkLoading v-if="fetching"/>
+
+	<MkError v-else-if="error" @retry="init()"/>
+
+	<div class="_fullinfo" v-else-if="empty">
 		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 		<div>{{ $ts.noNotes }}</div>
 	</div>
 
-	<MkLoading v-if="fetching"/>
+	<div v-else>
-
-	<MkError v-if="error" @retry="init()"/>
-
 		<div v-show="more && reversed" style="margin-bottom: var(--margin);">
 			<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
@@ -16,7 +17,7 @@
 			</MkButton>
 		</div>
 
-	<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
+		<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap">
 			<XNote :note="note" class="_block" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
 		</XList>
 
@@ -26,7 +27,8 @@
 				<template v-if="moreFetching"><MkLoading inline/></template>
 			</MkButton>
 		</div>
-</div>
+	</div>
+</transition>
 </template>
 
 <script lang="ts">
@@ -57,11 +59,15 @@ export default defineComponent({
 		pagination: {
 			required: true
 		},
-
 		prop: {
 			type: String,
 			required: false
-		}
+		},
+		noGap: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
 
 	emits: ['before', 'after'],
@@ -92,3 +98,14 @@ export default defineComponent({
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>

src/client/components/notifications.vue

@@ -1,8 +1,13 @@
 <template>
-<div class="mfcuwfyp _noGap_ _magnetParent">
+<transition name="fade" mode="out-in">
 	<MkLoading v-if="fetching"/>
 
-	<XList class="notifications _magnetChild" :items="items" v-slot="{ item: notification }">
+	<MkError v-else-if="error" @retry="init()"/>
+
+	<p class="mfcuwfyp" v-else-if="empty">{{ $ts.noNotifications }}</p>
+
+	<div v-else class="_magnetParent">
+		<XList class="notifications _magnetChild" :items="items" v-slot="{ item: notification }" :no-gap="true">
 			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
 			<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
 		</XList>
@@ -11,11 +16,8 @@
 			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 			<template v-if="moreFetching"><MkLoading inline/></template>
 		</button>
-
+	</div>
-	<p class="empty" v-if="empty">{{ $ts.noNotifications }}</p>
+</transition>
-
-	<MkError v-if="error" @retry="init()"/>
-</div>
 </template>
 
 <script lang="ts">
@@ -122,17 +124,19 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
 .mfcuwfyp {
-	> .empty {
 	margin: 0;
 	padding: 16px;
 	text-align: center;
 	color: var(--fg);
-	}
-
-	> .placeholder {
-		padding: 32px;
-		opacity: 0.3;
-	}
 }
 </style>

src/client/components/timeline.vue

@@ -1,5 +1,5 @@
 <template>
-<XNotes :class="{ _noGap_: !$store.state.showGapBetweenNotesInTimeline }" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
+<XNotes :no-gap="!$store.state.showGapBetweenNotesInTimeline" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
 </template>
 
 <script lang="ts">

src/client/pages/channel.vue

@@ -22,7 +22,7 @@
 
 	<XPostForm :channel="channel" class="post-form _content _panel _gap" fixed v-if="$i"/>
 
-	<XTimeline class="_content _gap _noGap_" src="channel" :key="channelId" :channel="channelId" @before="before" @after="after"/>
+	<XTimeline class="_content _gap" src="channel" :key="channelId" :channel="channelId" @before="before" @after="after"/>
 </div>
 </template>
 

src/client/pages/note.vue

@@ -2,7 +2,7 @@
 <div class="fcuexfpr _root">
 	<div v-if="note" class="note" v-anim>
 		<div class="_gap" v-if="showNext">
-			<XNotes class="_content _noGap_" :pagination="next"/>
+			<XNotes class="_content" :pagination="next" :no-gap="true"/>
 		</div>
 
 		<div class="main _gap">
@@ -25,7 +25,7 @@
 		</div>
 
 		<div class="_gap" v-if="showPrev">
-			<XNotes class="_content _noGap_" :pagination="prev"/>
+			<XNotes class="_content" :pagination="prev" :no-gap="true"/>
 		</div>
 	</div>
 

src/client/pages/user/index.timeline.vue

@@ -5,7 +5,7 @@
 		<option value="replies">{{ $ts.notesAndReplies }}</option>
 		<option value="files">{{ $ts.withFiles }}</option>
 	</MkTab>
-	<XNotes ref="timeline" class="_noGap_" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
+	<XNotes ref="timeline" :no-gap="true" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
 </div>
 </template>