note/clip/page タブをmobileでも
This commit is contained in:
parent
960c27375c
commit
fa550a2a78
|
@ -177,6 +177,21 @@
|
||||||
</div>
|
</div>
|
||||||
</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'">
|
<template v-if="page === 'index'">
|
||||||
<div class="_content _vMargin">
|
<div class="_content _vMargin">
|
||||||
<div v-if="user.pinnedNotes.length > 0" class="_vMargin">
|
<div v-if="user.pinnedNotes.length > 0" class="_vMargin">
|
||||||
|
@ -191,6 +206,8 @@
|
||||||
</template>
|
</template>
|
||||||
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _vMargin"/>
|
<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"/>
|
<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>
|
||||||
<div v-else-if="error">
|
<div v-else-if="error">
|
||||||
<MkError @retry="fetch()"/>
|
<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 {
|
> .content {
|
||||||
margin-bottom: var(--margin);
|
margin-bottom: var(--margin);
|
||||||
}
|
}
|
||||||
|
@ -779,6 +829,10 @@ export default defineComponent({
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .nav {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue