diff --git a/client/assets/app.css b/client/assets/app.css index 5d67df53..f9999c7a 100644 --- a/client/assets/app.css +++ b/client/assets/app.css @@ -225,4 +225,18 @@ Bookshelf Label -webkit-line-clamp: 2; /* number of lines to show */ -webkit-box-orient: vertical; +} + + +/* Padding for toastification toasts in the top right to not cover appbar/toolbar */ +.app-bar-and-toolbar .Vue-Toastification__container.top-right { + padding-top: 104px; +} + +.app-bar .Vue-Toastification__container.top-right { + padding-top: 64px; +} + +.no-bars .Vue-Toastification__container.top-right { + padding-top: 8px; } \ No newline at end of file diff --git a/client/layouts/blank.vue b/client/layouts/blank.vue index 9d0e3bd6..3737881b 100644 --- a/client/layouts/blank.vue +++ b/client/layouts/blank.vue @@ -5,5 +5,10 @@ \ No newline at end of file diff --git a/client/layouts/default.vue b/client/layouts/default.vue index 71c96e24..bf398e3c 100644 --- a/client/layouts/default.vue +++ b/client/layouts/default.vue @@ -40,6 +40,7 @@ export default { if (this.$store.state.selectedLibraryItems) { this.$store.commit('setSelectedLibraryItems', []) } + this.updateBodyClass() } }, computed: { @@ -53,11 +54,23 @@ export default { if (!this.$route.name) return false return !this.$route.name.startsWith('config') && this.$store.state.libraries.currentLibraryId }, + isShowingToolbar() { + return this.isShowingSideRail && this.$route.name !== 'upload' && this.$route.name !== 'account' + }, appContentMarginLeft() { return this.isShowingSideRail ? 80 : 0 } }, methods: { + updateBodyClass() { + if (this.isShowingToolbar) { + document.body.classList.remove('no-bars', 'app-bar') + document.body.classList.add('app-bar-and-toolbar') + } else { + document.body.classList.remove('no-bars', 'app-bar-and-toolbar') + document.body.classList.add('app-bar') + } + }, updateSocketConnectionToast(content, type, timeout) { if (this.socketConnectionToastId !== null && this.socketConnectionToastId !== undefined) { this.$toast.update(this.socketConnectionToastId, { content: content, options: { timeout: timeout, type: type, closeButton: false, position: 'bottom-center', onClose: () => null, closeOnClick: timeout !== null } }, false) @@ -521,6 +534,7 @@ export default { this.initializeSocket() }, mounted() { + this.updateBodyClass() this.resize() window.addEventListener('resize', this.resize) window.addEventListener('keydown', this.keyDown)