From b95fef3eafdebc1ecc78fec96b045a9e8a209f0b Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 11 Apr 2021 00:03:31 +0900
Subject: [PATCH] Tweak UI

---
 src/client/components/page-preview.vue | 3 +--
 src/client/pages/pages.vue             | 5 +++--
 src/client/style.scss                  | 4 ++++
 src/client/ui/_common_/header.vue      | 7 ++++++-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/client/components/page-preview.vue b/src/client/components/page-preview.vue
index 2125ddc53..cd896445a 100644
--- a/src/client/components/page-preview.vue
+++ b/src/client/components/page-preview.vue
@@ -1,5 +1,5 @@
 <template>
-<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _panel" tabindex="-1">
+<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block _isolated" tabindex="-1">
 	<div class="thumbnail" v-if="page.eyeCatchingImage" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
 	<article>
 		<header>
@@ -35,7 +35,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .vhpxefrj {
 	display: block;
-	width: 100%;
 
 	&:hover {
 		text-decoration: none;
diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue
index d7e5f9a1d..8aea7e6b9 100644
--- a/src/client/pages/pages.vue
+++ b/src/client/pages/pages.vue
@@ -48,10 +48,11 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.pages,
 				icon: faStickyNote,
-				action: {
+				actions: [{
 					icon: faPlus,
+					text: this.$ts.create,
 					handler: this.create
-				}
+				}]
 			},
 			tab: 'featured',
 			featuredPagesPagination: {
diff --git a/src/client/style.scss b/src/client/style.scss
index 8f4dbe76d..a02cd1a48 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -359,6 +359,10 @@ hr {
 		margin: var(--margin);
 	}
 
+	._block._isolated {
+		border-radius: var(--radius);
+	}
+
 	@media (max-width: 500px) {
 		._root {
 			--root-margin: 0;
diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
index 8e547eba9..6b09e3122 100644
--- a/src/client/ui/_common_/header.vue
+++ b/src/client/ui/_common_/header.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="fdidabkb" :class="{ center }" :style="`--height:${height};`">
+<div class="fdidabkb" :class="{ center }" :style="`--height:${height};`" :key="key">
 	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
 		<button class="_button back" v-if="withBack && canBack" @click.stop="back()" v-tooltip="$ts.goBack"><Fa :icon="faChevronLeft"/></button>
 	</transition>
@@ -50,6 +50,7 @@ export default defineComponent({
 			canBack: false,
 			showActions: false,
 			height: 0,
+			key: 0,
 			faChevronLeft, faCircle, faShareAlt, faEllipsisH,
 		};
 	},
@@ -64,6 +65,10 @@ export default defineComponent({
 	},
 
 	watch: {
+		info() {
+			this.key++;
+		},
+
 		$route: {
 			handler(to, from) {
 				this.canBack = (window.history.length > 0 && !['index'].includes(to.name));