wip

src/client/components/note.vue

@@ -79,7 +79,7 @@
 			<div class="deleted" v-if="appearNote.deletedAt != null">{{ $t('deleted') }}</div>
 		</div>
 	</article>
-	<x-sub v-for="note in replies" :key="note.id" :note="note"/>
+	<x-sub v-for="note in replies" :key="note.id" :note="note" class="reply"/>
 </div>
 </template>
 
@@ -935,5 +935,9 @@ export default Vue.extend({
 			}
 		}
 	}
+
+	> .reply {
+		border-top: solid 1px var(--divider);
+	}
 }
 </style>

src/client/components/notes.vue

@@ -7,22 +7,22 @@
 
 	<mk-error v-if="error" @retry="init()"/>
 
-	<div class="more" v-if="more && reversed" style="margin-bottom: var(--margin);">
+	<div v-if="more && reversed" style="margin-bottom: var(--margin);">
-		<div class="button _textButton" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
+		<button class="_panel _button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
-		</div>
+		</button>
 	</div>
 
 	<x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
 		<x-note :note="note" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
 	</x-list>
 
-	<div class="more" v-if="more && !reversed" style="margin-top: var(--margin);">
+	<div v-if="more && !reversed" style="margin-top: var(--margin);">
-		<div class="button _textButton" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
+		<button class="_panel _button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
-		</div>
+		</button>
 	</div>
 </div>
 </template>
@@ -116,12 +116,5 @@ export default Vue.extend({
 			}
 		}
 	}
-
-	> .more > .button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 48px;
-	}
 }
 </style>

src/client/components/notifications.vue

@@ -5,9 +5,9 @@
 		<x-notification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
 	</x-list>
 
-	<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
+	<button class="_panel _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
 		<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-		<template v-if="moreFetching"><fa :icon="faSpinner" pulse fixed-width/></template>
+		<template v-if="moreFetching"><mk-loading inline/></template>
 	</button>
 
 	<p class="empty" v-if="empty">{{ $t('noNotifications') }}</p>
@@ -18,7 +18,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import i18n from '../i18n';
 import paging from '../scripts/paging';
 import XNotification from './notification.vue';
@@ -55,7 +54,6 @@ export default Vue.extend({
 					includeTypes: this.type ? [this.type] : undefined
 				})
 			},
-			faSpinner
 		};
 	},
 
@@ -96,16 +94,6 @@ export default Vue.extend({
 		}
 	}
 
-	> .more {
-		display: block;
-		width: 100%;
-		padding: 16px;
-
-		> [data-icon] {
-			margin-right: 4px;
-		}
-	}
-
 	> .empty {
 		margin: 0;
 		padding: 16px;

src/client/pages/note.vue

@@ -8,22 +8,20 @@
 		/>
 	</portal>
 
-	<transition :name="$store.state.device.animation ? 'zoom' : ''" mode="out-in">
+	<div v-if="note">
-		<div v-if="note">
+		<button class="_panel _button" v-if="hasNext && !showNext" @click="showNext = true" style="margin: 0 auto var(--margin) auto;"><fa :icon="faChevronUp"/></button>
-			<mk-button v-if="hasNext && !showNext" @click="showNext = true" primary style="margin: 0 auto var(--margin) auto;"><fa :icon="faChevronUp"/></mk-button>
+		<x-notes v-if="showNext" ref="next" :pagination="next"/>
-			<x-notes v-if="showNext" ref="next" :pagination="next"/>
+		<hr v-if="showNext"/>
-			<hr v-if="showNext"/>
 
-			<x-note :note="note" :key="note.id" :detail="true"/>
+		<x-note :note="note" :key="note.id" :detail="true"/>
-			<div v-if="error">
+		<div v-if="error">
-				<mk-error @retry="fetch()"/>
+			<mk-error @retry="fetch()"/>
-			</div>
-
-			<mk-button v-if="hasPrev && !showPrev" @click="showPrev = true" primary style="margin: var(--margin) auto 0 auto;"><fa :icon="faChevronDown"/></mk-button>
-			<hr v-if="showPrev"/>
-			<x-notes v-if="showPrev" ref="prev" :pagination="prev" style="margin-top: var(--margin);"/>
 		</div>
-	</transition>
+
+		<button class="_panel _button" v-if="hasPrev && !showPrev" @click="showPrev = true" style="margin: var(--margin) auto 0 auto;"><fa :icon="faChevronDown"/></button>
+		<hr v-if="showPrev"/>
+		<x-notes v-if="showPrev" ref="prev" :pagination="prev" style="margin-top: var(--margin);"/>
+	</div>
 </div>
 </template>
 
@@ -34,7 +32,6 @@ import i18n from '../i18n';
 import Progress from '../scripts/loading';
 import XNote from '../components/note.vue';
 import XNotes from '../components/notes.vue';
-import MkButton from '../components/ui/button.vue';
 
 export default Vue.extend({
 	i18n,
@@ -46,7 +43,6 @@ export default Vue.extend({
 	components: {
 		XNote,
 		XNotes,
-		MkButton,
 	},
 	data() {
 		return {

src/client/style.scss

@@ -292,6 +292,14 @@ main ._panel {
 	box-shadow: 0 1px 0 0 var(--divider), 0 -1px 0 0 var(--divider);
 }
 
+._panel._button {
+	display: flex;
+	width: 100%;
+	min-height: 48px;
+	align-items: center;
+	justify-content: center;
+}
+
 ._card {
 	@extend ._panel;