From 07dc19523479b803c8606d700e71dcf903660757 Mon Sep 17 00:00:00 2001 From: shpuld Date: Sun, 12 Nov 2017 20:24:20 +0200 Subject: [PATCH] Add a hack to a hack to make it look much less hacky. --- src/App.js | 23 +++++++++++++++++++++++ src/App.scss | 7 +++++-- src/App.vue | 2 +- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 1da3ff7c..61ef91bb 100644 --- a/src/App.js +++ b/src/App.js @@ -23,6 +23,18 @@ export default { style () { return { 'background-image': `url(${this.background})` } }, sitename () { return this.$store.state.config.name } }, + created () { + // this is to detect user zooming mostly + window.addEventListener('resize', this.fixSidebarWidth) + }, + mounted () { + // for some reason, at least in dev mode, dom is not ready enough at this point + // in theory calling the function directly here should be enough, but it's not + setTimeout( () => { this.fixSidebarWidth() }, 500) + }, + destroyed () { + window.removeEventListener('resize', this.fixSidebarWidth) + }, methods: { activatePanel (panelName) { this.mobileActivePanel = panelName @@ -32,6 +44,17 @@ export default { }, logout () { this.$store.dispatch('logout') + }, + fixSidebarWidth () { + // firefox + let barwidth = window.innerWidth - document.body.offsetWidth + if (document.body.offsetWidth <= 0) { + // chromium + barwidth = window.innerWidth - document.body.scrollWidth + } + // adjust the sidebar size to fit the scrollbar width to keep the gap consistently sized + document.getElementById("sidebar-container").style.width = `${345 + barwidth}px` + document.getElementById("sidebar-container").style.paddingRight = `${barwidth}px` } } } diff --git a/src/App.scss b/src/App.scss index 0e89a429..2aac0cb8 100644 --- a/src/App.scss +++ b/src/App.scss @@ -210,16 +210,19 @@ nav { } @media all and (min-width: 960px) { + body { + overflow-y: scroll; + } .sidebar { overflow: hidden; max-height: 100vh; - width: 350px; + width: 345px; position: fixed; margin-top: -10px; .sidebar-container { height: 96vh; - width: 362px; + width: 365px; padding-top: 10px; padding-right: 20px; overflow-x: hidden; diff --git a/src/App.vue b/src/App.vue index 8e802a02..59cfcaa6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -19,7 +19,7 @@