@afeefa/vue-app 0.0.181 → 0.0.182

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

@@ -1 +1 @@
-0.0.181
+0.0.182

package/package.json

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

package/src-admin/components/InformationBar.vue

@@ -146,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;
     }
   }