use native scrollbar

This commit is contained in:
taehoon 2019-04-29 14:37:08 -04:00
parent abad528dd4
commit 220a7e89d5
7 changed files with 5 additions and 68 deletions

View file

@ -35,7 +35,6 @@
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.3.4",
"vue-timeago": "^3.1.2",
"vuebar": "^0.0.20",
"vuelidate": "^0.7.4",
"vuex": "^3.0.1",
"whatwg-fetch": "^2.0.3"

View file

@ -39,14 +39,7 @@ 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

View file

@ -795,53 +795,3 @@ nav {
}
}
}
// Vuebar default style
.vb > .vb-dragger {
z-index: 5;
width: 12px;
right: 0;
}
.vb > .vb-dragger > .vb-dragger-styler {
backface-visibility: hidden;
transform: rotate3d(0,0,0,0);
background-color: $fallback--text;
background-color: var(--text, $fallback--text);
opacity: .1;
margin: 5px 5px 5px 0;
border-radius: 20px;
height: calc(100% - 10px);
display: block;
}
.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
opacity: .3;
}
.vb > .vb-dragger:hover > .vb-dragger-styler {
opacity: .5;
margin: 0px;
height: 100%;
}
.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
opacity: .5;
margin: 0px;
height: 100%;
}
.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;
}
}

View file

@ -1,5 +1,5 @@
<template>
<div id="app" v-bind:style="bgAppStyle" v-bind:class="{ mobile: isMobile }">
<div id="app" v-bind:style="bgAppStyle">
<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">

View file

@ -27,7 +27,7 @@
</div>
</div>
</div>
<div class="user-reporting-panel-right" v-bar="{preventParentScroll: true}">
<div class="user-reporting-panel-right">
<List :items="statuses">
<template slot="item" slot-scope="{item}">
<div class="status-fadein user-reporting-panel-sitem">
@ -113,12 +113,12 @@
&-right {
display: flex;
flex-direction: column;
overflow-y: auto;
}
&-sitem {
display: flex;
justify-content: space-between;
padding-right: 15px;
> .status-el {
flex: 1;
@ -150,6 +150,7 @@
&-right {
width: 50%;
flex: 1 1 auto;
margin-bottom: 12px;
}
}
}

View file

@ -16,7 +16,6 @@ import reportsModule from './modules/reports.js'
import VueTimeago from 'vue-timeago'
import VueI18n from 'vue-i18n'
import Vuebar from 'vuebar'
import createPersistedState from './lib/persisted_state.js'
import pushNotifications from './lib/push_notifications_plugin.js'
@ -43,7 +42,6 @@ Vue.use(VueTimeago, {
Vue.use(VueI18n)
Vue.use(VueChatScroll)
Vue.use(VueClickOutside)
Vue.use(Vuebar)
const i18n = new VueI18n({
// By default, use the browser locale, we will update it if neccessary

View file

@ -6491,10 +6491,6 @@ vue@^2.5.13:
version "2.5.21"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.21.tgz#3d33dcd03bb813912ce894a8303ab553699c4a85"
vuebar@^0.0.20:
version "0.0.20"
resolved "https://registry.yarnpkg.com/vuebar/-/vuebar-0.0.20.tgz#fd6313c2d3a2202c49e42419fe1d9ef126134200"
vuelidate@^0.7.4:
version "0.7.4"
resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.4.tgz#5a0e54be09ac0192f1aa3387d74b92e0945bf8aa"