forked from srxl/akkoma-fe
use native scrollbar
This commit is contained in:
parent
abad528dd4
commit
220a7e89d5
7 changed files with 5 additions and 68 deletions
|
@ -35,7 +35,6 @@
|
||||||
"vue-router": "^3.0.1",
|
"vue-router": "^3.0.1",
|
||||||
"vue-template-compiler": "^2.3.4",
|
"vue-template-compiler": "^2.3.4",
|
||||||
"vue-timeago": "^3.1.2",
|
"vue-timeago": "^3.1.2",
|
||||||
"vuebar": "^0.0.20",
|
|
||||||
"vuelidate": "^0.7.4",
|
"vuelidate": "^0.7.4",
|
||||||
"vuex": "^3.0.1",
|
"vuex": "^3.0.1",
|
||||||
"whatwg-fetch": "^2.0.3"
|
"whatwg-fetch": "^2.0.3"
|
||||||
|
|
|
@ -39,14 +39,7 @@ export default {
|
||||||
window.CSS.supports('-moz-mask-size', 'contain') ||
|
window.CSS.supports('-moz-mask-size', 'contain') ||
|
||||||
window.CSS.supports('-ms-mask-size', 'contain') ||
|
window.CSS.supports('-ms-mask-size', 'contain') ||
|
||||||
window.CSS.supports('-o-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 () {
|
created () {
|
||||||
// Load the locale from the storage
|
// Load the locale from the storage
|
||||||
|
|
50
src/App.scss
50
src/App.scss
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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>
|
<div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
|
||||||
<MobileNav v-if="isMobileLayout" />
|
<MobileNav v-if="isMobileLayout" />
|
||||||
<nav v-else class='nav-bar container' @click="scrollToTop()" id="nav">
|
<nav v-else class='nav-bar container' @click="scrollToTop()" id="nav">
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="user-reporting-panel-right" v-bar="{preventParentScroll: true}">
|
<div class="user-reporting-panel-right">
|
||||||
<List :items="statuses">
|
<List :items="statuses">
|
||||||
<template slot="item" slot-scope="{item}">
|
<template slot="item" slot-scope="{item}">
|
||||||
<div class="status-fadein user-reporting-panel-sitem">
|
<div class="status-fadein user-reporting-panel-sitem">
|
||||||
|
@ -113,12 +113,12 @@
|
||||||
&-right {
|
&-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-sitem {
|
&-sitem {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding-right: 15px;
|
|
||||||
|
|
||||||
> .status-el {
|
> .status-el {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
@ -150,6 +150,7 @@
|
||||||
&-right {
|
&-right {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,7 +16,6 @@ import reportsModule from './modules/reports.js'
|
||||||
|
|
||||||
import VueTimeago from 'vue-timeago'
|
import VueTimeago from 'vue-timeago'
|
||||||
import VueI18n from 'vue-i18n'
|
import VueI18n from 'vue-i18n'
|
||||||
import Vuebar from 'vuebar'
|
|
||||||
|
|
||||||
import createPersistedState from './lib/persisted_state.js'
|
import createPersistedState from './lib/persisted_state.js'
|
||||||
import pushNotifications from './lib/push_notifications_plugin.js'
|
import pushNotifications from './lib/push_notifications_plugin.js'
|
||||||
|
@ -43,7 +42,6 @@ Vue.use(VueTimeago, {
|
||||||
Vue.use(VueI18n)
|
Vue.use(VueI18n)
|
||||||
Vue.use(VueChatScroll)
|
Vue.use(VueChatScroll)
|
||||||
Vue.use(VueClickOutside)
|
Vue.use(VueClickOutside)
|
||||||
Vue.use(Vuebar)
|
|
||||||
|
|
||||||
const i18n = new VueI18n({
|
const i18n = new VueI18n({
|
||||||
// By default, use the browser locale, we will update it if neccessary
|
// By default, use the browser locale, we will update it if neccessary
|
||||||
|
|
|
@ -6491,10 +6491,6 @@ vue@^2.5.13:
|
||||||
version "2.5.21"
|
version "2.5.21"
|
||||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.21.tgz#3d33dcd03bb813912ce894a8303ab553699c4a85"
|
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:
|
vuelidate@^0.7.4:
|
||||||
version "0.7.4"
|
version "0.7.4"
|
||||||
resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.4.tgz#5a0e54be09ac0192f1aa3387d74b92e0945bf8aa"
|
resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.4.tgz#5a0e54be09ac0192f1aa3387d74b92e0945bf8aa"
|
||||||
|
|
Loading…
Reference in a new issue