# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1552033436 -3600
# Node ID 298087ae22b392d1bd8ead63fead678af796c39f
# Parent  dc42faf90e1dee941e4412b4198cfcb3460e2eca
client: splitscreen: fixed z-index and animation bug

diff -r dc42faf90e1d -r 298087ae22b3 client/src/components/Splitscreen.vue
--- a/client/src/components/Splitscreen.vue	Fri Mar 08 09:10:17 2019 +0100
+++ b/client/src/components/Splitscreen.vue	Fri Mar 08 09:23:56 2019 +0100
@@ -4,11 +4,10 @@
       'splitscreen bg-white d-flex flex-column ui-element',
       { show: showSplitscreen }
     ]"
-    v-if="splitscreen"
   >
     <UIBoxHeader
-      :icon="splitscreen.icon"
-      :title="splitscreen.title"
+      :icon="config.icon"
+      :title="config.title"
       :closeCallback="close"
       :collapseCallback="collapse"
     />
@@ -21,7 +20,7 @@
           <font-awesome-icon icon="spinner" spin />
         </div>
       </transition>
-      <component :is="splitscreen.component" />
+      <component :is="config.component" />
     </div>
   </div>
 </template>
@@ -34,7 +33,7 @@
   right: 0
   height: 50vh
   overflow: hidden
-  z-index: 3
+  z-index: 1
   transition: bottom 0.3s
   &.show
     bottom: 0
@@ -75,17 +74,19 @@
       "splitscreen",
       "showSplitscreen",
       "splitscreenLoading"
-    ])
+    ]),
+    config() {
+      return this.splitscreen || { title: "", icon: "", component: "" };
+    }
   },
   methods: {
     collapse() {
       this.$store.commit("application/showSplitscreen", false);
-      if (this.splitscreen.collapseCallback)
-        this.splitscreen.collapseCallback();
+      if (this.config.collapseCallback) this.config.collapseCallback();
     },
     close() {
       this.$store.commit("application/showSplitscreen", false);
-      if (this.splitscreen.closeCallback) this.splitscreen.closeCallback();
+      if (this.config.closeCallback) this.config.closeCallback();
     }
   }
 };