モバイル版のユーザーページの表示切り変えnavを上についてくるように

This commit is contained in:
rinsuki 2018-03-26 15:56:31 +09:00
parent 8d6356c565
commit fd0e63c12e

View File

@ -40,12 +40,14 @@
</a> </a>
</div> </div>
</div> </div>
</header>
<nav> <nav>
<div class="nav-container">
<a :data-is-active=" page == 'home' " @click="page = 'home'">%i18n:mobile.tags.mk-user.overview%</a> <a :data-is-active=" page == 'home' " @click="page = 'home'">%i18n:mobile.tags.mk-user.overview%</a>
<a :data-is-active=" page == 'posts' " @click="page = 'posts'">%i18n:mobile.tags.mk-user.timeline%</a> <a :data-is-active=" page == 'posts' " @click="page = 'posts'">%i18n:mobile.tags.mk-user.timeline%</a>
<a :data-is-active=" page == 'media' " @click="page = 'media'">%i18n:mobile.tags.mk-user.media%</a> <a :data-is-active=" page == 'media' " @click="page = 'media'">%i18n:mobile.tags.mk-user.media%</a>
</div>
</nav> </nav>
</header>
<div class="body"> <div class="body">
<x-home v-if="page == 'home'" :user="user"/> <x-home v-if="page == 'home'" :user="user"/>
<mk-user-timeline v-if="page == 'posts'" :user="user"/> <mk-user-timeline v-if="page == 'posts'" :user="user"/>
@ -109,7 +111,6 @@ export default Vue.extend({
main main
> header > header
box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
> .banner > .banner
padding-bottom 33.3% padding-bottom 33.3%
@ -208,6 +209,12 @@ main
font-size 14px font-size 14px
> nav > nav
position sticky
top 48px
box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
background-color #313a42
z-index 1
> .nav-container
display flex display flex
justify-content center justify-content center
margin 0 auto margin 0 auto