From f8ae631d8cf2f8f6383b4fe3a0a6bd4803350344 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 2 May 2019 08:21:02 -0400
Subject: [PATCH] fix notifications div scrolling issue on mobile
---
src/components/mobile_nav/mobile_nav.vue | 40 +++++++++++++-----------
1 file changed, 22 insertions(+), 18 deletions(-)
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 5fa41638..30b1715f 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -1,25 +1,26 @@
<template>
- <nav class='nav-bar container' id="nav">
- <div class='mobile-inner-nav' @click="scrollToTop()">
- <div class='item'>
- <a href="#" class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()">
- <i class="button-icon icon-menu"></i>
- </a>
- <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
+ <div>
+ <nav class='nav-bar container' id="nav">
+ <div class='mobile-inner-nav' @click="scrollToTop()">
+ <div class='item'>
+ <a href="#" class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()">
+ <i class="button-icon icon-menu"></i>
+ </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 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>
- <SideDrawer ref="sideDrawer" :logout="logout"/>
+ </nav>
<div v-if="currentUser"
class="mobile-notifications-drawer"
:class="{ 'closed': !notificationsOpen }"
- @touchstart="notificationsTouchStart"
- @touchmove="notificationsTouchMove"
+ @touchstart.stop="notificationsTouchStart"
+ @touchmove.stop="notificationsTouchMove"
>
<div class="mobile-notifications-header">
<span class="title">{{$t('notifications.notifications')}}</span>
@@ -31,8 +32,9 @@
<Notifications ref="notifications" noHeading="true"/>
</div>
</div>
+ <SideDrawer ref="sideDrawer" :logout="logout"/>
<MobilePostStatusModal />
- </nav>
+ </div>
</template>
<script src="./mobile_nav.js"></script>
@@ -79,6 +81,8 @@
transition-property: transform;
transition-duration: 0.25s;
transform: translateX(0);
+ z-index: 1001;
+ -webkit-overflow-scrolling: touch;
&.closed {
transform: translateX(100%);