🎨

src/client/components/loading.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="yxspomdl">
+<div class="yxspomdl" :class="{ inline }">
 	<div class="ring"></div>
 </div>
 </template>
@@ -8,6 +8,13 @@
 import Vue from 'vue';
 
 export default Vue.extend({
+	props: {
+		inline: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	}
 });
 </script>
 
@@ -25,6 +32,16 @@ export default Vue.extend({
 	padding: 32px;
 	text-align: center;
 
+	&.inline {
+		display: inline;
+		padding: 0;
+
+		> .ring:after {
+			width: 32px;
+			height: 32px;
+		}
+	}
+
 	> .ring {
 		display: inline-block;
 		opacity: 0.7;

src/client/components/notes.vue

@@ -11,28 +11,28 @@
 		<x-note :note="note" :detail="detail" :key="note.id"/>
 	</x-list>
 
-	<footer v-if="more">
+	<footer class="more" v-if="more">
-		<button @click="fetchMore()" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" class="_buttonPrimary">
+		<mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
 			<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>
+		</mk-button>
 	</footer>
 </div>
 </template>
 
 <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 XNote from './note.vue';
 import XList from './date-separated-list.vue';
+import MkButton from './ui/button.vue';
 
 export default Vue.extend({
 	i18n,
 
 	components: {
-		XNote, XList
+		XNote, XList, MkButton
 	},
 
 	mixins: [
@@ -63,12 +63,6 @@ export default Vue.extend({
 		}
 	},
 
-	data() {
-		return {
-			faSpinner
-		};
-	},
-
 	computed: {
 		notes(): any[] {
 			return this.extract ? this.extract(this.items) : this.items;
@@ -113,23 +107,11 @@ export default Vue.extend({
 		}
 	}
 
-	> footer {
+	> .more > .button {
-		text-align: center;
+		margin-left: auto;
-
+		margin-right: auto;
-		&:empty {
+		height: 48px;
-			display: none;
-		}
-
-		> button {
-			margin: 0;
-			padding: 16px;
 		width: 100%;
-			border-radius: var(--radius);
-
-			&:disabled {
-				opacity: 0.7;
-			}
-		}
 	}
 }
 </style>

src/client/components/ui/pagination.vue

@@ -5,9 +5,9 @@
 		<slot name="empty"></slot>
 	</div>
 	<div class="more" v-if="more" key="_more_">
-		<mk-button :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()">
+		<mk-button class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore()" primary>
 			<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>
 		</mk-button>
 	</div>
 </sequential-entrance>
@@ -15,7 +15,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import MkButton from './button.vue';
 import paging from '../../scripts/paging';
 
@@ -37,12 +36,6 @@ export default Vue.extend({
 			default: true
 		}
 	},
-
-	data() {
-		return {
-			faSpinner
-		};
-	},
 });
 </script>
 
@@ -55,5 +48,12 @@ export default Vue.extend({
 			margin-bottom: 8px;
 		}
 	}
+
+	> .more > .button {
+		margin-left: auto;
+		margin-right: auto;
+		height: 48px;
+		min-width: 150px;
+	}
 }
 </style>