@afeefa/vue-app 0.0.180 → 0.0.182

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

@@ -1 +1 @@
-0.0.180
+0.0.182

package/package.json

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

package/src-admin/components/InformationBar.vue

@@ -41,7 +41,8 @@ export default class InformationBar extends Vue {
   visible = false
   mobile = false
   rail = false
-  width = 300
+  defaultWidth = 300
+  width = this.defaultWidth
 
   created () {
     this.$events.on(SidebarEvent.STATUS, ({payload: {information, informationRailed, mobile}}) => {
@@ -88,20 +89,30 @@ export default class InformationBar extends Vue {
 
   @Watch('rail')
   railChanged () {
-    const right = `calc(-${this.width}px - 3rem + 60px)`
-    this.$el.style.marginRight = this.rail ? right : 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.width = this.getWidthFromItems() || this.defaultWidth
+      this.setRailMargin()
+
       sidebarService.setInformation(true)
     }
 
@@ -135,14 +146,14 @@ export default class InformationBar extends Vue {
     let width = 0
 
     Array.from(this.getTopContainer().children).forEach(c => {
-      if (c.style.width !== 'auto') {
+      if (c.style.width !== '100%') {
         const w = parseInt(c.style.width)
         width = Math.max(width, w)
       }
     })
 
     Array.from(this.getBottomContainer().children).forEach(c => {
-      if (c.style.width !== 'auto') {
+      if (c.style.width !== '100%') {
         const w = parseInt(c.style.width)
         width = Math.max(width, w)
       }

package/src-admin/components/sidebar/InformationBarItem.vue

@@ -4,15 +4,13 @@
       :class="['item', infoItemId, {expanded, rail}]"
       :style="{width}"
     >
-      <a-row justify-space-between>
-        <div
-          class="header"
-          @click="derail"
-        >
+      <div class="headerContainer">
+        <div class="header">
           <v-icon
             v-if="icon"
             :color="icon.color"
             size="2rem"
+            @click="derail"
           >
             {{ icon.icon }}
           </v-icon>
@@ -23,18 +21,28 @@
           />
 
           <template v-if="!rail">
-            <label class="label">{{ label }}</label>
-
-            <v-icon class="contextButton mt-n1">
+            <div
+              class="labelContainer"
+              @click="derail"
+            >
+              <div class="label">
+                {{ label }}
+              </div>
+            </div>
+
+            <v-icon
+              class="contextButton expand mt-n1"
+              @click="derail"
+            >
               {{ expanded ? '$caretDownIcon' : '$caretRightIcon' }}
             </v-icon>
-          </template>
-        </div>
 
-        <div v-if="expanded">
-          <slot name="actionButton" />
+            <div v-if="expanded">
+              <slot name="actionButton" />
+            </div>
+          </template>
         </div>
-      </a-row>
+      </div>
 
       <collapse-transition>
         <div
@@ -66,7 +74,7 @@ import { SidebarEvent } from '@a-admin/events'
     {
       top: true,
       bottom: false,
-      width: 'auto',
+      width: '100%',
       open: false
     }
   ]
@@ -157,15 +165,26 @@ export default class InformationBarItem extends Vue {
   }
 }
 
+.headerContainer {
+  width: 100%;
+  line-height: 0; // kill inline-flex space
+}
+
 .header {
-  display: flex;
-  flex-wrap: nowrap;
+  display: inline-flex;
   align-items: center;
   font-size: .8rem;
-  cursor: pointer;
+  line-height: 1.5; // end kill inline-flex space
+  max-width: 100%;
 
   > .v-icon {
     margin-right: .75rem;
+    cursor: pointer;
+  }
+
+  .labelContainer {
+    overflow: hidden;
+    cursor: pointer;
   }
 
   .label {
@@ -173,15 +192,16 @@ export default class InformationBarItem extends Vue {
     text-transform: uppercase;
     letter-spacing: 3px;
     color: #666666;
-    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &:hover {
-    label {
+    .label {
       color: #333333;
     }
 
-    .v-icon.contextButton {
+    .v-icon.expand {
       color: #333333 !important;
     }
   }