💄 (#250) Item description capped at 2 lines

Lissy93 · Oct 2, 2021 · b88f128 · b88f128
1 parent 018576f
commit b88f128
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
@@ -1,5 +1,5 @@
 <template ref="container">
-  <div class="item-wrapper">
+  <div :class="`item-wrapper wrap-size-${itemSize}`">
     <a @click="itemOpened"
       @mouseup.right="openContextMenu"
       @contextmenu.prevent
@@ -144,7 +144,7 @@ export default {
         html: true,
         placement: this.statusResponse ? 'left' : 'auto',
         delay: { show: 600, hide: 200 },
-        classes: 'item-description-tooltip',
+        classes: `item-description-tooltip tooltip-is-${this.itemSize}`,
       };
     },
     /* Used by certain themes, which display an icon with animated CSS */
@@ -239,6 +239,10 @@ export default {
 
 .item-wrapper {
   flex-grow: 1;
+  flex-basis: 6rem;
+  &.wrap-size-large {
+    flex-basis: 12rem;
+  }
 }
 
 .item {
@@ -392,11 +396,13 @@ export default {
         width: 100%;
       }
       p.description {
-        display: block;
         margin: 0;
+        display: block;
         white-space: pre-wrap;
-        font-size: .9em;
         text-overflow: ellipsis;
+        font-size: .9em;
+        line-height: 1rem;
+        height: 2rem;
       }
     }
   }

diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="item-icon">
+  <div :class="`item-icon wrapper-${size}`">
     <!-- Font-Awesome Icon -->
     <i v-if="iconType === 'font-awesome'" :class="`${icon} ${size}`" ></i>
     <!-- Emoji Icon -->
@@ -189,6 +189,18 @@ export default {
 </script>
 
 <style lang="scss">
+
+/* Icon wraper */
+.item-icon {
+  &.wrapper-medium {
+    min-height: 2.5rem;
+  }
+  &.wrapper-large {
+    min-width: 3.5rem;
+    text-align: center;
+  }
+}
+
   /* Default Image Icon */
   .tile-icon {
       min-width: 1rem;