From 955b3e313bbf311dd565d96bc04545c9be96e6bb Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Oct 2021 18:51:15 +0900
Subject: [PATCH] :art:
---
src/client/components/global/header.vue | 5 +-
src/client/components/modal-page-window.vue | 3 +-
src/client/components/page-window.vue | 3 +-
src/client/components/post-form.vue | 14 ++-
src/client/pages/page.vue | 112 +++++++++++---------
src/client/pages/timeline.vue | 4 +
src/client/ui/deck/column.vue | 14 +--
7 files changed, 89 insertions(+), 66 deletions(-)
diff --git a/src/client/components/global/header.vue b/src/client/components/global/header.vue
index 176a1b47ea..a283e1656c 100644
--- a/src/client/components/global/header.vue
+++ b/src/client/components/global/header.vue
@@ -1,5 +1,5 @@
<template>
-<div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }" @click="onClick" ref="el">
+<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick" ref="el">
<template v-if="info">
<div class="titleContainer" @click="showTabsPopup">
<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -37,7 +37,7 @@
</template>
<script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue';
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, inject } from 'vue';
import * as tinycolor from 'tinycolor2';
import { popupMenu } from '@client/os';
import { url } from '@client/config';
@@ -182,6 +182,7 @@ export default defineComponent({
showTabsPopup,
preventDrag,
onClick,
+ thin_: props.thin || inject('shouldHeaderThin', false)
};
},
});
diff --git a/src/client/components/modal-page-window.vue b/src/client/components/modal-page-window.vue
index c20e2b3087..cea92b9cb3 100644
--- a/src/client/components/modal-page-window.vue
+++ b/src/client/components/modal-page-window.vue
@@ -44,7 +44,8 @@ export default defineComponent({
return {
navHook: (path) => {
this.navigate(path);
- }
+ },
+ shouldHeaderThin: true,
};
},
diff --git a/src/client/components/page-window.vue b/src/client/components/page-window.vue
index ec4c03c3d8..620d288b14 100644
--- a/src/client/components/page-window.vue
+++ b/src/client/components/page-window.vue
@@ -46,7 +46,8 @@ export default defineComponent({
return {
navHook: (path) => {
this.navigate(path);
- }
+ },
+ shouldHeaderThin: true,
};
},
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 4ec09e76db..3ff1dfe0df 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -1,6 +1,6 @@
<template>
<div class="gafaadew" :class="{ modal, _popup: modal }"
- v-size="{ max: [500] }"
+ v-size="{ max: [310, 500] }"
@dragover.stop="onDragover"
@dragenter="onDragenter"
@dragleave="onDragleave"
@@ -914,5 +914,17 @@ export default defineComponent({
}
}
}
+
+ &.max-width_310px {
+ > .form {
+ > footer {
+ > button {
+ font-size: 14px;
+ width: 44px;
+ height: 44px;
+ }
+ }
+ }
+ }
}
</style>
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index 47a458df9c..b8d7507363 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -1,61 +1,65 @@
<template>
-<div class="_root">
- <transition name="fade" mode="out-in">
- <div v-if="page" class="xcukqgmh" :key="page.id" v-size="{ max: [450] }">
- <div class="_block main">
- <!--
- <div class="header">
- <h1>{{ page.title }}</h1>
- </div>
- -->
- <div class="banner">
- <img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/>
- </div>
- <div class="content">
- <XPage :page="page"/>
- </div>
- <div class="actions">
- <div class="like">
- <MkButton class="button" @click="unlike()" v-if="page.isLiked" v-tooltip="$ts._pages.unlike" primary><i class="fas fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
- <MkButton class="button" @click="like()" v-else v-tooltip="$ts._pages.like"><i class="far fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
+<div>
+ <MkHeader :info="header"/>
+
+ <div class="_root">
+ <transition name="fade" mode="out-in">
+ <div v-if="page" class="xcukqgmh" :key="page.id" v-size="{ max: [450] }">
+ <div class="_block main">
+ <!--
+ <div class="header">
+ <h1>{{ page.title }}</h1>
</div>
- <div class="other">
- <button class="_button" @click="shareWithNote" v-tooltip="$ts.shareWithNote" v-click-anime><i class="fas fa-retweet fa-fw"></i></button>
- <button class="_button" @click="share" v-tooltip="$ts.share" v-click-anime><i class="fas fa-share-alt fa-fw"></i></button>
+ -->
+ <div class="banner">
+ <img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/>
+ </div>
+ <div class="content">
+ <XPage :page="page"/>
+ </div>
+ <div class="actions">
+ <div class="like">
+ <MkButton class="button" @click="unlike()" v-if="page.isLiked" v-tooltip="$ts._pages.unlike" primary><i class="fas fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
+ <MkButton class="button" @click="like()" v-else v-tooltip="$ts._pages.like"><i class="far fa-heart"></i><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
+ </div>
+ <div class="other">
+ <button class="_button" @click="shareWithNote" v-tooltip="$ts.shareWithNote" v-click-anime><i class="fas fa-retweet fa-fw"></i></button>
+ <button class="_button" @click="share" v-tooltip="$ts.share" v-click-anime><i class="fas fa-share-alt fa-fw"></i></button>
+ </div>
+ </div>
+ <div class="user">
+ <MkAvatar :user="page.user" class="avatar"/>
+ <div class="name">
+ <MkUserName :user="page.user" style="display: block;"/>
+ <MkAcct :user="page.user"/>
+ </div>
+ <MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
+ </div>
+ <div class="links">
+ <MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
+ <template v-if="$i && $i.id === page.userId">
+ <MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
+ <button v-if="$i.pinnedPageId === page.id" @click="pin(false)" class="link _textButton">{{ $ts.unpin }}</button>
+ <button v-else @click="pin(true)" class="link _textButton">{{ $ts.pin }}</button>
+ </template>
</div>
</div>
- <div class="user">
- <MkAvatar :user="page.user" class="avatar"/>
- <div class="name">
- <MkUserName :user="page.user" style="display: block;"/>
- <MkAcct :user="page.user"/>
- </div>
- <MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
- </div>
- <div class="links">
- <MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
- <template v-if="$i && $i.id === page.userId">
- <MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
- <button v-if="$i.pinnedPageId === page.id" @click="pin(false)" class="link _textButton">{{ $ts.unpin }}</button>
- <button v-else @click="pin(true)" class="link _textButton">{{ $ts.pin }}</button>
- </template>
+ <div class="footer">
+ <div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+ <div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
</div>
+ <MkAd :prefer="['horizontal', 'horizontal-big']"/>
+ <MkContainer :max-height="300" :foldable="true" class="other">
+ <template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
+ <MkPagination :pagination="otherPostsPagination" #default="{items}">
+ <MkPagePreview v-for="page in items" :page="page" :key="page.id" class="_gap"/>
+ </MkPagination>
+ </MkContainer>
</div>
- <div class="footer">
- <div><i class="far fa-clock"></i> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
- <div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
- </div>
- <MkAd :prefer="['horizontal', 'horizontal-big']"/>
- <MkContainer :max-height="300" :foldable="true" class="other">
- <template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
- <MkPagination :pagination="otherPostsPagination" #default="{items}">
- <MkPagePreview v-for="page in items" :page="page" :key="page.id" class="_gap"/>
- </MkPagination>
- </MkContainer>
- </div>
- <MkError v-else-if="error" @retry="fetch()"/>
- <MkLoading v-else/>
- </transition>
+ <MkError v-else-if="error" @retry="fetch()"/>
+ <MkLoading v-else/>
+ </transition>
+ </div>
</div>
</template>
@@ -97,6 +101,10 @@ export default defineComponent({
[symbols.PAGE_INFO]: computed(() => this.page ? {
title: computed(() => this.page.title || this.page.name),
avatar: this.page.user,
+ } : null),
+ header: computed(() => this.page ? {
+ title: computed(() => this.page.title || this.page.name),
+ avatar: this.page.user,
path: `/@${this.page.user.username}/pages/${this.page.name}`,
share: {
title: this.page.title || this.page.name,
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index abe9ccd7e0..dfabcbf84b 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -215,6 +215,10 @@ export default defineComponent({
}
}
+ > .post-form {
+ border-radius: var(--radius);
+ }
+
> .tl {
background: var(--bg);
border-radius: var(--radius);
diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue
index 842a6ff59f..59729e09f7 100644
--- a/src/client/ui/deck/column.vue
+++ b/src/client/ui/deck/column.vue
@@ -37,6 +37,10 @@ import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownCo
import { deckStore } from './deck-store';
export default defineComponent({
+ provide: {
+ shouldHeaderThin: true
+ },
+
props: {
column: {
type: Object,
@@ -267,6 +271,7 @@ export default defineComponent({
height: 100%;
overflow: hidden;
contain: content;
+ box-shadow: 0 0 8px 0 var(--shadow);
&.draghover {
box-shadow: 0 0 0 2px var(--focus);
@@ -320,15 +325,6 @@ export default defineComponent({
&.paged {
background: var(--bg) !important;
-
- > header {
- background: transparent;
- box-shadow: none;
-
- > button {
- color: var(--fg);
- }
- }
}
> header {