natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✌️

This commit is contained in:
syuilo 2018-02-23 23:30:30 +09:00
parent cbdabc5bb4
commit 10994c2361
3 changed files with 59 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/web/app/app.styl
View File

@ -124,15 +124,5 @@ pre
overflow auto overflow auto
tab-size 2 tab-size 2
mk-locker
display block
position fixed
top 0
left 0
z-index 65536
width 100%
height 100%
cursor wait
[data-fa] [data-fa]
display inline-block display inline-block

80
src/web/app/mobile/views/components/ui.nav.vue
View File

@ -1,30 +1,38 @@
<template> <template>
<div class="nav" :style="{ display: isOpen ? 'block' : 'none' }"> <div class="nav">
<div class="backdrop" @click="$parent.isDrawerOpening = false"></div> <transition name="back">
<div class="body"> <div class="backdrop"
<router-link class="me" v-if="os.isSignedIn" :to="`/${os.i.username}`"> v-if="isOpen"
<img class="avatar" :src="`${os.i.avatar_url}?thumbnail&size=128`" alt="avatar"/> @click="$parent.isDrawerOpening = false"
<p class="name">{{ os.i.name }}</p> @touchstart="$parent.isDrawerOpening = false"
</router-link> ></div>
<div class="links"> </transition>
<ul> <transition name="nav">
<li><router-link to="/">%fa:home%%i18n:mobile.tags.mk-ui-nav.home%%fa:angle-right%</router-link></li> <div class="body" v-if="isOpen">
<li><router-link to="/i/notifications">%fa:R bell%%i18n:mobile.tags.mk-ui-nav.notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li> <router-link class="me" v-if="os.isSignedIn" :to="`/${os.i.username}`">
<li><router-link to="/i/messaging">%fa:R comments%%i18n:mobile.tags.mk-ui-nav.messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li> <img class="avatar" :src="`${os.i.avatar_url}?thumbnail&size=128`" alt="avatar"/>
</ul> <p class="name">{{ os.i.name }}</p>
<ul> </router-link>
<li><a :href="chUrl" target="_blank">%fa:tv%%i18n:mobile.tags.mk-ui-nav.ch%%fa:angle-right%</a></li> <div class="links">
<li><router-link to="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-ui-nav.drive%%fa:angle-right%</router-link></li> <ul>
</ul> <li><router-link to="/">%fa:home%%i18n:mobile.tags.mk-ui-nav.home%%fa:angle-right%</router-link></li>
<ul> <li><router-link to="/i/notifications">%fa:R bell%%i18n:mobile.tags.mk-ui-nav.notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li>
<li><a @click="search">%fa:search%%i18n:mobile.tags.mk-ui-nav.search%%fa:angle-right%</a></li> <li><router-link to="/i/messaging">%fa:R comments%%i18n:mobile.tags.mk-ui-nav.messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li>
</ul> </ul>
<ul> <ul>
<li><router-link to="/i/settings">%fa:cog%%i18n:mobile.tags.mk-ui-nav.settings%%fa:angle-right%</router-link></li> <li><a :href="chUrl" target="_blank">%fa:tv%%i18n:mobile.tags.mk-ui-nav.ch%%fa:angle-right%</a></li>
</ul> <li><router-link to="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-ui-nav.drive%%fa:angle-right%</router-link></li>
</ul>
<ul>
<li><a @click="search">%fa:search%%i18n:mobile.tags.mk-ui-nav.search%%fa:angle-right%</a></li>
</ul>
<ul>
<li><router-link to="/i/settings">%fa:cog%%i18n:mobile.tags.mk-ui-nav.settings%%fa:angle-right%</router-link></li>
</ul>
</div>
<a :href="aboutUrl"><p class="about">%i18n:mobile.tags.mk-ui-nav.about%</p></a>
</div> </div>
<a :href="aboutUrl"><p class="about">%i18n:mobile.tags.mk-ui-nav.about%</p></a> </transition>
</div>
</div> </div>
</template> </template>
@ -197,4 +205,26 @@ export default Vue.extend({
a a
color #777 color #777
.nav-enter-active,
.nav-leave-active {
opacity: 1;
transform: translateX(0);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-enter,
.nav-leave-active {
opacity: 0;
transform: translateX(-240px);
}
.back-enter-active,
.back-leave-active {
opacity: 1;
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.back-enter,
.back-leave-active {
opacity: 0;
}
</style> </style>

6
src/web/style.styl
View File

@ -12,8 +12,8 @@
position relative position relative
box-sizing border-box box-sizing border-box
background-clip padding-box !important background-clip padding-box !important
tap-highlight-color rgba($theme-color, 0.7) tap-highlight-color transparent
-webkit-tap-highlight-color rgba($theme-color, 0.7) -webkit-tap-highlight-color transparent
html, body html, body
margin 0 margin 0
@ -26,6 +26,8 @@ a
text-decoration none text-decoration none
color $theme-color color $theme-color
cursor pointer cursor pointer
tap-highlight-color rgba($theme-color, 0.7) !important
-webkit-tap-highlight-color rgba($theme-color, 0.7) !important
&:hover &:hover
text-decoration underline text-decoration underline