From bffcfd92da0c3db09b900dd63ce09575fdedd6f1 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 2125ddc534..cd896445a7 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 d7e5f9a1df..8aea7e6b95 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 8f4dbe76d2..a02cd1a48a 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 8e547eba92..6b09e3122a 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));