Marquee text, if it is too long to fit

src/components/HelloWorld.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    
+
   </div>
 </template>
 

src/components/Item.vue

@@ -1,6 +1,14 @@
 <template>
     <div class="item">
-        {{ title }}
+        <div class="tile-title" :id="`tile-${id}`">
+            <span class="text">{{ title }}</span>
+            <div class="overflow-dots">...</div>
+        </div>
+        <img
+            v-if="icon"
+            :src="`/img/tile-icons/${icon}.png`"
+            class="tile-icon"
+        />
   </div>
 </template>
 
@@ -8,6 +16,7 @@
 export default {
   name: 'Item',
   props: {
+    id: String, // The unique ID of a tile (e.g. 001)
     title: String, // The main text of tile, required
     subtitle: String, // Optional sub-text
     description: String, // Optional tooltip hover text
@@ -20,6 +29,22 @@ export default {
       validator: (value) =>
         ['newtab', 'sametab', 'iframe'].indexOf(value) !== -1
     }
+  },
+  data () {
+    return { getId: this.id }
+  },
+  mounted () {
+    // Detects overflowing text, and allows is to marguee on hover
+    // The below code is horifically bad, it is embarassing that I wrote it...
+    const tileElem = document.getElementById(`tile-${this.getId}`)
+    if (tileElem) {
+      const isOverflowing =
+            tileElem.scrollHeight > tileElem.clientHeight ||
+            tileElem.scrollWidth > tileElem.clientWidth
+      if (isOverflowing) {
+        tileElem.className += ' is-overflowing'
+      }
+    }
   }
 }
 </script>
@@ -27,45 +52,76 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 
-// .item-group-outer {
-//     width: 300px;
-//     height: 500px;
-//     border-radius: 10px;
-//     padding: 5px;
-//     display: flex;
-//     flex-direction: column;
-//     background: #1CA8DD;
-//     background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-//     background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-//     box-shadow: 1px 1px 2px #130f23;
+.item {
+    width: 120px;
+    height: 100px;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 8px;
+    background: #607d8b33;
+    text-align: center;
+    padding: 5px;
+    border-radius: 10px;
+    box-shadow: 1px 1px 2px #373737;
+    cursor: pointer;
+    &:hover {
+        box-shadow: 1px 2px 4px #373737;
+        background: #607d8b4d;
+    }
+}
+.tile-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 120px;
+    height: 30px;
+    overflow: hidden;
+    position: relative;
+    padding: 0;
 
-//     h2 {
-//         color: #2f323ae6;
-//         font-size: 1.5em;
-//         margin: 0.4em;
-//         text-shadow: 1px 1px 2px #056bc1;
-//     }
-// }
-// .item-group-inner {
-//     color: #1CA8DD;
-//     background: #2f323ae6;
-//     height: 100%;
-//     width: 100%;
-//     border-radius: 0 0 10px 10px;
-//     display: flex;
-//     justify-content: space-evenly;
-//     flex-direction: column;
-//     text-align: center;
-// }
+    span.text {
+        position: absolute;
+        white-space: nowrap;
+        transition: 1s;
+        float: left;
+        left: 0;
+    }
+    &:not(.is-overflowing) span.text{
+        width: 100%;
+    }
+    .overflow-dots {
+        // display: none;
+        opacity: 0;
+    }
+}
 
-// .no-items {
-//     background: #607d8b33;
-//     width: 100px;
-//     text-align: center;
-//     margin: 0 auto;
-//     padding: 0.8em;
-//     border-radius: 10px;
-//     box-shadow: 1px 1px 2px #373737;
-// }
+.tile-title.is-overflowing {
+    span.text {
+        overflow: hidden;
+    }
+    .overflow-dots {
+        display: block;
+        opacity: 1;
+        background: #354857;
+        position: absolute;
+        z-index: 5;
+        right: 0;
+        transition: opacity 0.1s ease-in;
+    }
+}
+
+.item:hover .tile-title{
+    .overflow-dots {
+        // display: none;
+        opacity: 0;
+    }
+    span.text {
+        transform: translateX(calc(120px - 100%));
+    }
+}
+
+.tile-icon {
+    width: 60px;
+}
 
 </style>

src/components/ItemGroup.vue

@@ -5,8 +5,14 @@
             <span v-if="!items || items.length < 1" class="no-items">
               No Items to Show Yet
             </span>
-            <div v-else>
-              <Item title="Ahoy!"/>
+            <div v-else class="there-are-items">
+              <Item
+                v-for="item in items"
+                :key="item.id"
+                :id="item.id"
+                :title="item.title"
+                :icon="item.icon"
+              />
             </div>
       </div>
   </div>
@@ -54,11 +60,11 @@ export default {
     background: #2f323ae6;
     height: 100%;
     width: 100%;
+    text-align: left;
     border-radius: 0 0 10px 10px;
     display: flex;
     justify-content: space-evenly;
     flex-direction: column;
-    text-align: center;
 }
 
 .no-items {
@@ -69,6 +75,11 @@ export default {
     padding: 0.8em;
     border-radius: 10px;
     box-shadow: 1px 1px 2px #373737;
+    cursor: default;
+}
+
+.there-are-items {
+  height: 100%;
 }
 
 </style>