From 07dc19523479b803c8606d700e71dcf903660757 Mon Sep 17 00:00:00 2001 From: shpuld Date: Sun, 12 Nov 2017 20:24:20 +0200 Subject: Add a hack to a hack to make it look much less hacky. --- src/App.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) (limited to 'src/App.js') 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` } } } -- cgit v1.2.3-70-g09d2