トップページデザインを改修

3 files changed, 40 insertions, 160 deletions

diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 542c2942b9..d9d87ddbe3 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -18,6 +18,8 @@
 		</div>
 	</section>
 
+	<MkInput v-model:value="pinnedClipId">{{ $t('pinnedClipId') }}</MkInput>
+
 	<section class="_card _vMargin">
 		<div class="_content">
 			<MkInput v-model:value="maxNoteTextLength" type="number" :save="() => save()"><template #icon><Fa :icon="faPencilAlt"/></template>{{ $t('maxNoteTextLength') }}</MkInput>
@@ -285,6 +287,7 @@ export default defineComponent({
 			blockedHosts: '',
 			pinnedUsers: '',
 			pinnedPages: '',
+			pinnedClipId: null,
 			maintainerName: null,
 			maintainerEmail: null,
 			name: null,
@@ -373,6 +376,7 @@ export default defineComponent({
 		this.blockedHosts = this.meta.blockedHosts.join('\n');
 		this.pinnedUsers = this.meta.pinnedUsers.join('\n');
 		this.pinnedPages = this.meta.pinnedPages.join('\n');
+		this.pinnedClipId = this.meta.pinnedClipId;
 		this.enableServiceWorker = this.meta.enableServiceWorker;
 		this.swPublicKey = this.meta.swPublickey;
 		this.swPrivateKey = this.meta.swPrivateKey;
@@ -526,6 +530,7 @@ export default defineComponent({
 				blockedHosts: this.blockedHosts.split('\n') || [],
 				pinnedUsers: this.pinnedUsers ? this.pinnedUsers.split('\n') : [],
 				pinnedPages: this.pinnedPages ? this.pinnedPages.split('\n') : [],
+				pinnedClipId: (this.pinnedClipId && this.pinnedClipId) != '' ? this.pinnedClipId : null,
 				enableServiceWorker: this.enableServiceWorker,
 				swPublicKey: this.swPublicKey,
 				swPrivateKey: this.swPrivateKey,
diff --git a/src/client/pages/welcome.entrance.block.vue b/src/client/pages/welcome.entrance.block.vue
deleted file mode 100644
index b4f5881773..0000000000
--- a/src/client/pages/welcome.entrance.block.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-<div class="xyeqzsjl _panel">
-	<header>
-		<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
-		<XHeader class="title" :info="pageInfo" :with-back="false"/>
-	</header>
-	<div>
-		<component :is="component" v-bind="props" :ref="changePage"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
-import XWindow from '@/components/ui/window.vue';
-import XHeader from '@/ui/_common_/header.vue';
-import { popout } from '@/scripts/popout';
-import { resolve } from '@/router';
-import { url } from '@/config';
-
-export default defineComponent({
-	components: {
-		XWindow,
-		XHeader,
-	},
-
-	provide() {
-		return {
-			navHook: (path) => {
-				this.navigate(path);
-			}
-		};
-	},
-
-	props: {
-		initialPath: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			pageInfo: null,
-			path: this.initialPath,
-			component: null,
-			props: null,
-			history: [],
-			faChevronLeft,
-		};
-	},
-
-	computed: {
-		url(): string {
-			return url + this.path;
-		},
-	},
-
-	created() {
-		const { component, props } = resolve(this.initialPath);
-		this.component = component;
-		this.props = props;
-	},
-
-	methods: {
-		changePage(page) {
-			if (page == null) return;
-			if (page.INFO) {
-				this.pageInfo = page.INFO;
-			}
-		},
-
-		navigate(path, record = true) {
-			if (record) this.history.push(this.path);
-			this.path = path;
-			const { component, props } = resolve(path);
-			this.component = component;
-			this.props = props;
-		},
-
-		back() {
-			this.navigate(this.history.pop(), false);
-		},
-
-		expand() {
-			this.$router.push(this.path);
-			this.$refs.window.close();
-		},
-
-		popout() {
-			popout(this.path, this.$el);
-			this.$refs.window.close();
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.xyeqzsjl {
-	--section-padding: 16px;
-
-	display: flex;
-	flex-direction: column;
-	contain: content;
-
-	> header {
-		$height: 50px;
-		display: flex;
-		position: relative;
-		z-index: 1;
-		height: $height;
-		line-height: $height;
-		box-shadow: 0px 1px var(--divider);
-
-		> button {
-			height: $height;
-			width: $height;
-
-			&:hover {
-				color: var(--fgHighlighted);
-			}
-		}
-
-		> .title {
-			flex: 1;
-			position: relative;
-			line-height: $height;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			text-align: center;
-		}
-	}
-
-	> div {
-		flex: 1;
-		overflow: auto;
-		background: var(--bg);
-	}
-}
-</style>
diff --git a/src/client/pages/welcome.entrance.vue b/src/client/pages/welcome.entrance.vue
index d5ea47bb85..2ce357e205 100644
--- a/src/client/pages/welcome.entrance.vue
+++ b/src/client/pages/welcome.entrance.vue
@@ -1,8 +1,9 @@
 <template>
 <div class="rsqzvsbo _section" v-if="meta">
-	<div class="blocks">
-		<XBlock class="block" v-for="path in meta.pinnedPages" :initial-path="path" :key="path"/>
-	</div>
+	<h2># {{ $t('pinnedNotes') }}</h2>
+	<MkPagination :pagination="pagination" #default="{items}">
+		<XNote class="kmkqjgkl" v-for="note in items" :note="note" :key="note.id"/>
+	</MkPagination>
 </div>
 </template>
 
@@ -12,16 +13,16 @@ import { toUnicode } from 'punycode';
 import XSigninDialog from '@/components/signin-dialog.vue';
 import XSignupDialog from '@/components/signup-dialog.vue';
 import MkButton from '@/components/ui/button.vue';
-import XNotes from '@/components/notes.vue';
-import XBlock from './welcome.entrance.block.vue';
+import XNote from '@/components/note.vue';
+import MkPagination from '@/components/ui/pagination.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
 		MkButton,
-		XNotes,
-		XBlock,
+		XNote,
+		MkPagination,
 	},
 
 	data() {
@@ -29,6 +30,13 @@ export default defineComponent({
 			host: toUnicode(host),
 			instanceName,
 			meta: null,
+			pagination: {
+				endpoint: 'clips/notes',
+				limit: 10,
+				params: () => ({
+					clipId: this.meta.pinnedClipId,
+				})
+			},
 		};
 	},
 
@@ -62,19 +70,28 @@ export default defineComponent({
 .rsqzvsbo {
 	text-align: center;
 
-	> .blocks {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-		grid-gap: var(--margin);
-		text-align: left;
+	> h2 {
+		display: inline-block;
+		color: #fff;
+		margin: 16px;
+		padding: 8px 12px;
+		background: rgba(0, 0, 0, 0.5);
+	}
+}
 
-		> .block {
-			height: 600px;
-		}
+.kmkqjgkl {
+	display: inline-block;
+	vertical-align: middle;
+	width: 600px;
+	margin: 16px;
+	text-align: left;
+	box-shadow: 0 6px 46px rgb(0 0 0 / 30%);
+	border-radius: 12px;
 
-		@media (max-width: 800px) {
-			grid-template-columns: 1fr;
-		}
+	@media (max-width: 800px) {
+		display: block;
+		width: 100%;
+		margin: 12px 0;
 	}
 }
 </style>