@afeefa/vue-app 0.0.154 → 0.0.156

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.154
+0.0.156

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.154",
+  "version": "0.0.156",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src-admin/components/FlyingContext.vue

@@ -47,7 +47,7 @@ export default class FlyingContext extends Mixins(CancelOnEscMixin) {
       if (this.width) {
         containerContainer.style.width = this.width
       } else {
-        containerContainer.style.width = '50vw'
+        containerContainer.style.width = 'auto'
       }
 
       const container = this.getChildrenContainer()

package/src-admin/components/FlyingContextContainer.vue

@@ -33,12 +33,16 @@ import { getZIndex } from 'vuetify/lib/util/helpers'
 export default class FlyingContextContainer extends Vue {
   visible = false
   oldOverflowY = null
+  isClosing = false
 
   mounted () {
-    this.mutationWatcher = new MutationObserver(this.domChanged)
-    this.mutationWatcher.observe(this.getChildrenContainer(), { childList: true })
+    const mutationWatcher = new MutationObserver(this.domChanged)
+    mutationWatcher.observe(this.getChildrenContainer(), { childList: true })
 
     window.addEventListener('mousedown', this.onClickOutside)
+
+    const sizeWatcher = new ResizeObserver(this.sizeChanged)
+    sizeWatcher.observe(this.getChildrenContainer())
   }
 
   getScrollbarWidth () {
@@ -56,6 +60,17 @@ export default class FlyingContextContainer extends Vue {
     return 0
   }
 
+  sizeChanged () {
+    if (this.visible && !this.isClosing) { // do not set size if it is already closing
+      this.$nextTick(() => {
+        const scrollbarWidth = this.getScrollbarWidth()
+        const el = document.documentElement
+        const newSize = el.offsetWidth - this.$el.offsetWidth + scrollbarWidth
+        this.$el.style.left = newSize + 'px'
+      })
+    }
+  }
+
   domChanged () {
     const container = this.getChildrenContainer()
     this.visible = !!container.children.length
@@ -75,14 +90,17 @@ export default class FlyingContextContainer extends Vue {
     } else {
       el.style.overflowY = this.oldOverflowY
       el.style.marginRight = 0
-
-      this.$el.style.left = '101vw'
     }
+    this.isClosing = false
   }
 
   hide () {
     if (this.visible) {
-      this.$events.dispatch(new FlyingContextEvent(FlyingContextEvent.HIDE_ALL))
+      this.$el.style.left = '101vw'
+      this.isClosing = true
+      setTimeout(() => { // fade in then hide contents
+        this.$events.dispatch(new FlyingContextEvent(FlyingContextEvent.HIDE_ALL))
+      }, 200)
     }
   }
 
@@ -123,9 +141,8 @@ export default class FlyingContextContainer extends Vue {
 #flyingContextContainer {
   position: fixed;
   z-index: 200;
-  left: 50vw;
   height: 100%;
-  width: 50vw;
+  width: auto;
   min-width: 400px;
   max-width: calc(100vw - 100px);
   top: 0;