forked from FoundKeyGang/FoundKey
✌️
This commit is contained in:
syuilo
parent
cbdabc5bb4
commit
10994c2361
3 changed files with 59 additions and 37 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue