From e5eb9aa35dc591100391fc977e0cb08dd99ab7ac Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Nov 2020 17:47:49 +0900
Subject: [PATCH] =?UTF-8?q?note/clip/page=20=E3=82=BF=E3=83=96=E3=82=92mob?=
=?UTF-8?q?ile=E3=81=A7=E3=82=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/client/pages/user/index.vue | 54 +++++++++++++++++++++++++++++++++
1 file changed, 54 insertions(+)
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 97435887f..5756599e2 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -177,6 +177,21 @@
</div>
</div>
+ <div class="nav _vMargin">
+ <MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
+ <Fa :icon="faCommentAlt" class="icon"/>
+ <span>{{ $t('notes') }}</span>
+ </MkA>
+ <MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
+ <Fa :icon="faPaperclip" class="icon"/>
+ <span>{{ $t('clips') }}</span>
+ </MkA>
+ <MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
+ <Fa :icon="faFileAlt" class="icon"/>
+ <span>{{ $t('pages') }}</span>
+ </MkA>
+ </div>
+
<template v-if="page === 'index'">
<div class="_content _vMargin">
<div v-if="user.pinnedNotes.length > 0" class="_vMargin">
@@ -191,6 +206,8 @@
</template>
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _vMargin"/>
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _vMargin"/>
+ <XClips v-else-if="page === 'clips'" :user="user" class="_vMargin"/>
+ <XPages v-else-if="page === 'pages'" :user="user" class="_vMargin"/>
</div>
<div v-else-if="error">
<MkError @retry="fetch()"/>
@@ -735,6 +752,39 @@ export default defineComponent({
}
}
+ > .nav {
+ display: flex;
+ align-items: center;
+ margin-top: var(--margin);
+ //font-size: 120%;
+ font-weight: bold;
+
+ > .link {
+ flex: 1;
+ display: inline-block;
+ padding: 16px;
+ text-align: center;
+ border-bottom: solid 3px transparent;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ &.active {
+ color: var(--accent);
+ border-bottom-color: var(--accent);
+ }
+
+ &:not(.active):hover {
+ color: var(--fgHighlighted);
+ }
+
+ > .icon {
+ margin-right: 6px;
+ }
+ }
+ }
+
> .content {
margin-bottom: var(--margin);
}
@@ -779,6 +829,10 @@ export default defineComponent({
padding: 16px;
}
}
+
+ > .nav {
+ font-size: 80%;
+ }
}
}
</style>