From 0bb82478229b19adae998b9a32b05bcaa4ed0a4f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 28 Mar 2019 15:50:53 -0400
Subject: [PATCH] fix double scrollbar display bug in mobile
---
src/App.js | 9 ++++++++-
src/App.scss | 11 +++++++++++
src/App.vue | 2 +-
.../user_reporting_modal/user_reporting_modal.vue | 4 ++--
4 files changed, 22 insertions(+), 4 deletions(-)
diff --git a/src/App.js b/src/App.js
index e72c73e35..87f00989e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -39,7 +39,14 @@ export default {
window.CSS.supports('-moz-mask-size', 'contain') ||
window.CSS.supports('-ms-mask-size', 'contain') ||
window.CSS.supports('-o-mask-size', 'contain')
- )
+ ),
+ isMobile: navigator.userAgent.match(/Android/i) ||
+ navigator.userAgent.match(/webOS/i) ||
+ navigator.userAgent.match(/iPhone/i) ||
+ navigator.userAgent.match(/iPad/i) ||
+ navigator.userAgent.match(/iPod/i) ||
+ navigator.userAgent.match(/BlackBerry/i) ||
+ navigator.userAgent.match(/Windows Phone/i)
}),
created () {
// Load the locale from the storage
diff --git a/src/App.scss b/src/App.scss
index 6d16c7c96..c72529acc 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -839,3 +839,14 @@ nav {
.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
opacity: .5;
}
+
+// Disable vuebar and use native scrollbar in mobile device
+#app.mobile {
+ .vb-content {
+ width: 100% !important;
+ padding-right: 0 !important;
+ }
+ .vb-dragger {
+ display: none;
+ }
+}
diff --git a/src/App.vue b/src/App.vue
index cb7e8d785..229bf62b0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
<template>
- <div id="app" v-bind:style="bgAppStyle">
+ <div id="app" v-bind:style="bgAppStyle" v-bind:class="{ mobile: isMobile }">
<div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
<MobileNav v-if="isMobileLayout" />
<nav v-else class='nav-bar container' @click="scrollToTop()" id="nav">
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index bf668efc5..41c01919a 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -102,8 +102,8 @@
}
&-right {
- overflow-y: auto;
- overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
}
&-sitem {
--
GitLab