emma/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix notifications div scrolling issue on mobile

Browse source
This commit is contained in:
taehoon 2019-05-02 08:21:02 -04:00
parent 2d07f26dd7
commit f8ae631d8c
1 changed files with 22 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/mobile_nav/mobile_nav.vue
View file

@ -1,25 +1,26 @@
<template> <template>
<nav class='nav-bar container' id="nav"> <div>
<div class='mobile-inner-nav' @click="scrollToTop()"> <nav class='nav-bar container' id="nav">
<div class='item'> <div class='mobile-inner-nav' @click="scrollToTop()">
<a href="#" class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()"> <div class='item'>
<i class="button-icon icon-menu"></i> <a href="#" class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()">
</a> <i class="button-icon icon-menu"></i>
<router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link> </a>
<router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
</div>
<div class='item right'>
<a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="openMobileNotifications()">
<i class="button-icon icon-bell-alt"></i>
<div class="alert-dot" v-if="unseenNotificationsCount"></div>
</a>
</div>
</div> </div>
<div class='item right'> </nav>
<a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="openMobileNotifications()">
<i class="button-icon icon-bell-alt"></i>
<div class="alert-dot" v-if="unseenNotificationsCount"></div>
</a>
</div>
</div>
<SideDrawer ref="sideDrawer" :logout="logout"/>
<div v-if="currentUser" <div v-if="currentUser"
class="mobile-notifications-drawer" class="mobile-notifications-drawer"
:class="{ 'closed': !notificationsOpen }" :class="{ 'closed': !notificationsOpen }"
@touchstart="notificationsTouchStart" @touchstart.stop="notificationsTouchStart"
@touchmove="notificationsTouchMove" @touchmove.stop="notificationsTouchMove"
> >
<div class="mobile-notifications-header"> <div class="mobile-notifications-header">
<span class="title">{{$t('notifications.notifications')}}</span> <span class="title">{{$t('notifications.notifications')}}</span>
@ -31,8 +32,9 @@
<Notifications ref="notifications" noHeading="true"/> <Notifications ref="notifications" noHeading="true"/>
</div> </div>
</div> </div>
<SideDrawer ref="sideDrawer" :logout="logout"/>
<MobilePostStatusModal /> <MobilePostStatusModal />
</nav> </div>
</template> </template>
<script src="./mobile_nav.js"></script> <script src="./mobile_nav.js"></script>
@ -79,6 +81,8 @@
transition-property: transform; transition-property: transform;
transition-duration: 0.25s; transition-duration: 0.25s;
transform: translateX(0); transform: translateX(0);
z-index: 1001;
-webkit-overflow-scrolling: touch;
&.closed { &.closed {
transform: translateX(100%); transform: translateX(100%);