@afeefa/vue-app 0.0.153 → 0.0.154

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

@@ -1 +1 @@
-0.0.153
+0.0.154

package/package.json

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

package/src-admin/components/FlyingContext.vue

@@ -13,7 +13,7 @@ import { randomCssClass } from '@a-vue/utils/random'
 import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
 
 @Component({
-  props: [{show: false}, 'beforeClose']
+  props: [{show: false}, 'beforeClose', 'width']
 })
 export default class FlyingContext extends Mixins(CancelOnEscMixin) {
   isVisible = false
@@ -43,7 +43,14 @@ export default class FlyingContext extends Mixins(CancelOnEscMixin) {
     }
 
     if (this.isVisible) {
-      const container = this.getSidebarContainer()
+      const containerContainer = this.getFlyingContextContainer()
+      if (this.width) {
+        containerContainer.style.width = this.width
+      } else {
+        containerContainer.style.width = '50vw'
+      }
+
+      const container = this.getChildrenContainer()
       container.appendChild(el)
       this.coe_watchCancel() // show context -> watch esc
     } else {
@@ -53,7 +60,7 @@ export default class FlyingContext extends Mixins(CancelOnEscMixin) {
   }
 
   destroyed () {
-    const container = this.getSidebarContainer()
+    const container = this.getChildrenContainer()
     const el = this.getContent()
     if (container.contains(el)) {
       container.removeChild(el)
@@ -87,7 +94,11 @@ export default class FlyingContext extends Mixins(CancelOnEscMixin) {
     return document.querySelector('.' + this.contextId)
   }
 
-  getSidebarContainer () {
+  getFlyingContextContainer () {
+    return document.getElementById('flyingContextContainer')
+  }
+
+  getChildrenContainer () {
     return document.getElementById('flyingContextContainer__children')
   }
 }

package/src-admin/components/FlyingContextContainer.vue

@@ -56,7 +56,6 @@ export default class FlyingContextContainer extends Vue {
     return 0
   }
 
-
   domChanged () {
     const container = this.getChildrenContainer()
     this.visible = !!container.children.length
@@ -71,9 +70,13 @@ export default class FlyingContextContainer extends Vue {
         el.style.overflowY = 'hidden'
         el.style.marginRight = scrollbarWidth + 'px'
       }, 100)
+
+      this.$el.style.left = (el.offsetWidth - this.$el.offsetWidth + scrollbarWidth) + 'px'
     } else {
       el.style.overflowY = this.oldOverflowY
       el.style.marginRight = 0
+
+      this.$el.style.left = '101vw'
     }
   }
 
@@ -120,19 +123,20 @@ export default class FlyingContextContainer extends Vue {
 #flyingContextContainer {
   position: fixed;
   z-index: 200;
-  right: 0;
+  left: 50vw;
   height: 100%;
+  width: 50vw;
   min-width: 400px;
   max-width: calc(100vw - 100px);
   top: 0;
   background: white;
-  transition: right .2s;
+  transition: left .2s;
   padding: 2rem;
   overflow-y: auto;
   border-left: 1px solid rgba(0, 0, 0, .12);
 
   &:not(.visible) {
-    right: -80vw;
+    left: 101vw;
   }
 
   .closeButton {