New improved width system, and support for SVG graphics

src/components/Collapsable.vue

@@ -70,7 +70,7 @@ export default {
 <style scoped lang="scss">
 
 .collapsable {
-    width: 310px;
+    // width: 310px;
     padding: 5px;
     margin: 10px;
     border-radius: 10px;
@@ -78,12 +78,12 @@ export default {
     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;
-
-    &.col-1 { width: 155px; }
-    &.col-2 { width: 310px; }
-    &.col-3 { width: 465px; }
-    &.col-4 { width: 620px; }
-    &.col-5 { width: 775px; }
+    width: auto;
+    // &.col-1 { width: 155px; }
+    // &.col-2 { width: 310px; }
+    // &.col-3 { width: 465px; }
+    // &.col-4 { width: 620px; }
+    // &.col-5 { width: 775px; }
 
     .wrap-collabsible {
         margin-bottom: 1.2rem 0;

src/components/Item.vue

@@ -1,6 +1,6 @@
 <template>
     <el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
-        <div :class="`item ${!icon? 'short': ''}`" tabindex="0">
+        <div :class="`item ${!icon && !svg? 'short': ''}`" tabindex="0">
             <div class="tile-title" :id="`tile-${id}`">
                 <span class="text">{{ title }}</span>
                 <div class="overflow-dots">...</div>
@@ -10,6 +10,11 @@
                 :src="`/img/tile-icons/${icon}.png`"
                 class="tile-icon"
             />
+            <img
+                v-else-if="svg"
+                :src="`/img/tile-svgs/${svg}.svg`"
+                class="tile-svg"
+            />
         </div>
   </el-tooltip>
 </template>
@@ -24,6 +29,7 @@ export default {
     subtitle: String, // Optional sub-text
     description: String, // Optional tooltip hover text
     icon: String, // Optional path to icon, within public/img/tile-icons
+    svg: String, // Optional vector graphic, that is then dynamically filled
     color: String, // Optional background color, specified in hex code
     url: String, // URL to the resource, optional but recommended
     openingMethod: { // Where resource will open, either 'newtab', 'sametab' or 'iframe'
@@ -135,4 +141,14 @@ export default {
     width: 60px;
 }
 
+.tile-svg {
+    width: 56px;
+     filter:
+        invert(69%)
+        sepia(40%)
+        saturate(4686%)
+        hue-rotate(142deg)
+        brightness(96%)
+        contrast(102%);
+}
 </style>

src/components/ItemGroup.vue

@@ -11,6 +11,7 @@
         :title="item.title"
         :description="item.description"
         :icon="item.icon"
+        :svg="item.svg"
       />
     </div>
   </Collapsable>