@afeefa/vue-app 0.0.179 → 0.0.181

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

@@ -1 +1 @@
-0.0.179
+0.0.181

package/package.json

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

package/src/components/AInfo.vue

@@ -1,6 +1,7 @@
 <template>
   <v-alert
     v-bind="$attrs"
+    :type="type"
     :style="{display: inline ? 'inline-block' : 'block'}"
     :class="['a-info', {xSmall}]"
     dense
@@ -17,7 +18,7 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: [{inline: true, xSmall: false}]
+  props: [{inline: true, xSmall: false, type: 'info'}]
 })
 export default class AInfo extends Vue {
 }

package/src/components/ATabs.vue

@@ -30,8 +30,6 @@ export default class ATabs extends Vue {
   currentIndex = 0
 
   mounted () {
-    console.log(this.$children)
-
     this.titles = this.$children.map(c => c.title)
 
     this.$children[this.currentIndex].show()
@@ -52,7 +50,7 @@ export default class ATabs extends Vue {
 
 <style lang="scss" scoped>
 .menuContainer {
-  border-bottom: 2px solid #EEEEEE;
+  border-bottom: 3px solid #DDDDDD;
   margin: 2rem 0;
 
   &.first {
@@ -64,29 +62,26 @@ export default class ATabs extends Vue {
   position: relative;
   display: flex;
   justify-content: center;
-  margin-bottom: -2px;
 
   .label {
-    padding: .6rem 1.5rem .5rem;
-    border-bottom: 2px solid #EEEEEE;
-    // border-top-left-radius: 6px;
-    // border-top-right-radius: 6px;
+    padding: .5rem 1rem .7rem;
     background: white;
     cursor: pointer;
 
     text-transform: uppercase;
     letter-spacing: 5px;
-    color: #CCCCCC;
+    color: #BBBBBB;
     font-size: .8rem;
     white-space: nowrap;
 
-    &.selected {
-      padding-top: .3rem;
+    &:hover {
+      background: #F4F4F4;
+      color: #AAAAAA;
+    }
 
-      border-left: 2px solid #EEEEEE;
-      border-top: 2px solid #EEEEEE;
-      border-right: 2px solid #EEEEEE;
-      border-bottom: none;
+    &.selected {
+      background: #DDDDDD;
+      color: #666666;
     }
   }
 }

package/src-admin/components/InformationBar.vue

@@ -3,6 +3,7 @@
     v-show="visible"
     id="information-bar"
     :class="{mobile, rail}"
+    :style="widthStyle"
   >
     <div :class="['toggleButton', {rail}]">
       <v-app-bar-nav-icon
@@ -40,6 +41,8 @@ export default class InformationBar extends Vue {
   visible = false
   mobile = false
   rail = false
+  defaultWidth = 300
+  width = this.defaultWidth
 
   created () {
     this.$events.on(SidebarEvent.STATUS, ({payload: {information, informationRailed, mobile}}) => {
@@ -69,15 +72,15 @@ export default class InformationBar extends Vue {
 
     const elTop = document.createElement('div')
     document.body.appendChild(elTop)
-    moveChildren(this.$el.querySelector('#information-bar__children .top'), elTop)
+    moveChildren(this.getTopContainer(), elTop)
 
     const elBottom = document.createElement('div')
     document.body.appendChild(elBottom)
-    moveChildren(this.$el.querySelector('#information-bar__children .bottom'), elBottom)
+    moveChildren(this.getBottomContainer(), elBottom)
 
     this.$nextTick(() => {
-      moveChildren(elTop, document.querySelector('#information-bar__children .top'))
-      moveChildren(elBottom, document.querySelector('#information-bar__children .bottom'))
+      moveChildren(elTop, this.getTopContainer())
+      moveChildren(elBottom, this.getBottomContainer())
       this.$nextTick(() => {
         this.$events.dispatch(new SidebarEvent(SidebarEvent.STATUS, new SidebarState(sidebarService)))
       })
@@ -86,18 +89,30 @@ export default class InformationBar extends Vue {
 
   @Watch('rail')
   railChanged () {
-    this.$el.style.marginRight = this.rail ? '-240px' : 0
+    this.setRailMargin()
   }
 
   toggleRail () {
     sidebarService.setRailInformation(!this.rail)
   }
 
+  setRailMargin () {
+    if (this.rail) {
+      const right = `calc(-${this.width}px - 3rem + 60px)`
+      this.$el.style.marginRight = right
+    } else {
+      this.$el.style.marginRight = 0
+    }
+  }
+
   domChanged () {
     const old = this.visible
     const visible = this.hasSidebarItems()
 
     if (visible && !old) {
+      this.width = this.getWidthFromItems() || this.defaultWidth
+      this.setRailMargin()
+
       sidebarService.setInformation(true)
     }
 
@@ -110,6 +125,14 @@ export default class InformationBar extends Vue {
     return this.$el.querySelector('#information-bar__children')
   }
 
+  getTopContainer () {
+    return document.querySelector('#information-bar__children .top')
+  }
+
+  getBottomContainer () {
+    return document.querySelector('#information-bar__children .bottom')
+  }
+
   hasSidebarItems () {
     return !!(this.$el.querySelector('#information-bar__children .top').children.length +
       this.$el.querySelector('#information-bar__children .bottom').children.length)
@@ -118,6 +141,33 @@ export default class InformationBar extends Vue {
   hideSidebar () {
     sidebarService.setInformation(false)
   }
+
+  getWidthFromItems () {
+    let width = 0
+
+    Array.from(this.getTopContainer().children).forEach(c => {
+      if (c.style.width !== 'auto') {
+        const w = parseInt(c.style.width)
+        width = Math.max(width, w)
+      }
+    })
+
+    Array.from(this.getBottomContainer().children).forEach(c => {
+      if (c.style.width !== 'auto') {
+        const w = parseInt(c.style.width)
+        width = Math.max(width, w)
+      }
+    })
+
+    return width
+  }
+
+  get widthStyle () {
+    return {
+      flex: `0 0 calc(${this.width}px + 3rem)`,
+      width: `calc(${this.width}px + 3rem)`
+    }
+  }
 }
 </script>
 
@@ -126,8 +176,6 @@ export default class InformationBar extends Vue {
 #information-bar {
   position: relative;
 
-  flex: 0 0 300px;
-  width: 300px;
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;