@afeefa/vue-app 0.0.152 → 0.0.154

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

@@ -1 +1 @@
-0.0.152
+0.0.154

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.152",
+  "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

@@ -32,6 +32,7 @@ import { getZIndex } from 'vuetify/lib/util/helpers'
 })
 export default class FlyingContextContainer extends Vue {
   visible = false
+  oldOverflowY = null
 
   mounted () {
     this.mutationWatcher = new MutationObserver(this.domChanged)
@@ -40,14 +41,42 @@ export default class FlyingContextContainer extends Vue {
     window.addEventListener('mousedown', this.onClickOutside)
   }
 
+  getScrollbarWidth () {
+    const el = document.documentElement
+    const overflowY = getComputedStyle(el)['overflow-y']
+    if (overflowY === 'scroll' || (overflowY === 'auto' && el.scrollHeight > el.clientHeight)) {
+      // measure scrollbar width https://stackoverflow.com/a/55278118
+      const scrollbox = document.createElement('div')
+      scrollbox.style.overflow = 'scroll'
+      document.body.appendChild(scrollbox)
+      const scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth
+      document.body.removeChild(scrollbox)
+      return scrollBarWidth
+    }
+    return 0
+  }
+
   domChanged () {
     const container = this.getChildrenContainer()
     this.visible = !!container.children.length
 
+    const el = document.documentElement
+
     if (this.visible) {
-      document.documentElement.style.overflow = 'hidden'
+      const style = getComputedStyle(el)
+      this.oldOverflowY = style.overflowY
+      const scrollbarWidth = this.getScrollbarWidth()
+      setTimeout(() => {
+        el.style.overflowY = 'hidden'
+        el.style.marginRight = scrollbarWidth + 'px'
+      }, 100)
+
+      this.$el.style.left = (el.offsetWidth - this.$el.offsetWidth + scrollbarWidth) + 'px'
     } else {
-      document.documentElement.style.overflow = 'auto'
+      el.style.overflowY = this.oldOverflowY
+      el.style.marginRight = 0
+
+      this.$el.style.left = '101vw'
     }
   }
 
@@ -94,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 {

package/src-admin/styles.scss

@@ -1,3 +1,7 @@
+html {
+  overflow-y: auto; // ress.css • v2.0.4 sets overflow-y: scroll
+}
+
 .container {
   padding: 0;
 }