From 21e704e12c51f5421a1afacf3be787e736aabf17 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Tue, 12 Jul 2022 16:11:23 -0500
Subject: [PATCH] Fix:Show toasts below appbar & toolbar #819

---
 client/assets/app.css      | 14 ++++++++++++++
 client/layouts/blank.vue   |  7 ++++++-
 client/layouts/default.vue | 14 ++++++++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

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 @@
 </template>
 
 <script>
-export default {}
+export default {
+  mounted() {
+    document.body.classList.remove('app-bar', 'app-bar-and-toolbar')
+    document.body.classList.add('no-bars')
+  }
+}
 </script>
\ 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)