From c59fe0b71dea5583661fa690434e8e61796d9906 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 8 Sep 2019 00:14:12 +0100
Subject: [PATCH] Variable width cols

---
 src/components/Collapsable.vue |  11 +-
 src/components/Item.vue        |   6 +-
 src/components/ItemGroup.vue   |   3 +-
 src/data/item-data.json        | 184 +++++++++++++++++++++++++++++++--
 src/views/Home.vue             |   2 +
 5 files changed, 192 insertions(+), 14 deletions(-)

diff --git a/src/components/Collapsable.vue b/src/components/Collapsable.vue
index e214019d..fc157b7e 100644
--- a/src/components/Collapsable.vue
+++ b/src/components/Collapsable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="collapsable">
+  <div :class="`collapsable col-${cols}`">
         <input
             :id="`collapsible-${uniqueKey}`"
             class="toggle"
@@ -10,7 +10,7 @@
             <h2>{{ title }}</h2>
         </label>
         <div class="collapsible-content">
-            <div class="content-inner">
+          <div class="content-inner">
             <slot></slot>
             </div>
         </div>
@@ -24,6 +24,7 @@ export default {
     uniqueKey: String,
     title: String,
     collapsed: Boolean,
+    cols: Number,
   },
   data() {
     return {
@@ -78,6 +79,12 @@ export default {
     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; }
+
     .wrap-collabsible {
         margin-bottom: 1.2rem 0;
     }
diff --git a/src/components/Item.vue b/src/components/Item.vue
index 8e2470bd..1a26151f 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -1,6 +1,6 @@
 <template>
     <el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
-        <div class="item" tabindex="0">
+        <div :class="`item ${!icon? 'short': ''}`" tabindex="0">
             <div class="tile-title" :id="`tile-${id}`">
                 <span class="text">{{ title }}</span>
                 <div class="overflow-dots">...</div>
@@ -75,6 +75,10 @@ export default {
         border: 2px solid #1CA8DD;
         outline: none;
     }
+    &.short {
+        border-radius: 30px;
+        height: 18px;
+    }
 }
 .tile-title {
     white-space: nowrap;
diff --git a/src/components/ItemGroup.vue b/src/components/ItemGroup.vue
index 2caf1ebc..0ace4dd1 100644
--- a/src/components/ItemGroup.vue
+++ b/src/components/ItemGroup.vue
@@ -1,5 +1,5 @@
 <template>
-   <Collapsable :title="title" :uniqueKey="groupId" :collapsed="collapsed">
+   <Collapsable :title="title" :uniqueKey="groupId" :collapsed="collapsed" :cols="cols">
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
     </div>
@@ -26,6 +26,7 @@ export default {
     groupId: String,
     title: String,
     collapsed: Boolean,
+    cols: Number,
     items: Array,
   },
   components: {
diff --git a/src/data/item-data.json b/src/data/item-data.json
index f4cd8fa6..d467a27a 100644
--- a/src/data/item-data.json
+++ b/src/data/item-data.json
@@ -3,6 +3,7 @@
         "id": "0",
         "name": "Server Management | External",
         "collapsed": false,
+        "cols": 3,
         "items": [
             {
                 "id":"001",
@@ -34,6 +35,7 @@
         "id": "1",
         "name": "Server Management | Hosted",
         "collapsed": false,
+        "cols": 2,
         "items": [
             {
                 "id":"001",
@@ -105,22 +107,184 @@
         "id": "2",
         "name": "Dev Tools",
         "collapsed": true,
+        "cols": 3,
         "items": [
             {
                 "id":"001",
-                "title": "DNS Management",
-                "description": "Configure Server Gateways",
-                "provider": "CloudFlare",
-                "icon": "009-cloud",
-                "url": "https://dash.cloudflare.com"
+                "title": "Feature Flags",
+                "description": "Turning production app features on/ off",
+                "provider": "Bullet Train",
+                "icon": "011-flag",
+                "url": "https://bullet-train.io/projects"
             },
             {
                 "id":"002",
-                "title": "Servers",
-                "description": "Manage scaling, power and credentials",
-                "provider": "Digital Ocean",
-                "icon": "021-folder",
-                "url": "https://cloud.digitalocean.com"
+                "title": "Security Scanning",
+                "description": "Automated code security",
+                "provider": "Cloud Sploit",
+                "icon": "088-key",
+                "url": "https://console.cloudsploit.com"
+            },
+            {
+                "id":"003",
+                "title": "Error Tracking",
+                "description": "Monitor errors and warnings in production apps",
+                "provider": "Rollbar",
+                "icon": "007-bug-3",
+                "url": "https://rollbar.com/lissy93"
+            },
+            {
+                "id":"004",
+                "title": "Licensing",
+                "description": "",
+                "provider": "Crypto Lens",
+                "icon": "087-price-tag-1",
+                "url": "https://cryptolens.io/"
+            },
+            {
+                "id":"005",
+                "title": "Status Page",
+                "description": "",
+                "provider": "Cachet",
+                "icon": "048-computer",
+                "url": ""
+            },
+            {
+                "id":"006",
+                "title": "CI Pipelines",
+                "description": "",
+                "provider": "CircleCI",
+                "icon": "142-file-5",
+                "url": "https://circleci.com/dashboard"
+            }
+        ]
+    },
+    {
+        "id": "005",
+        "name": "Utilities",
+        "collapsed": true,
+        "cols": 1,
+        "items": [
+            {
+                "id":"001",
+                "title": "URL Shortener",
+                "provider": "AS93 Short URLs",
+                "icon": "014-globe",
+                "url": "#"
+            },
+            {
+                "id":"002",
+                "title": "Paste Bin",
+                "provider": "AS93 Paste Bin",
+                "icon": "045-post",
+                "url": "#"
+            },
+            {
+                "id":"003",
+                "title": "File Drop",
+                "provider": "AS93 File Drop",
+                "icon": "012-delivery",
+                "url": "#"
+            },
+            {
+                "id":"004",
+                "title": "Notes",
+                "provider": "AS93 TXT Notes",
+                "icon": "043-pencil",
+                "url": "#"
+            }
+        ]
+    },
+    {
+        "id": "006",
+        "name": "Productivity",
+        "collapsed": true,
+        "cols": 2,
+        "items": [
+            {
+                "id":"001",
+                "title": "Files",
+                "provider": "NextCloud",
+                "icon": "",
+                "url": "#"
+            },
+            {
+                "id":"002",
+                "title": "Notes",
+                "provider": "Standard Notes",
+                "icon": "",
+                "url": "#"
+            },
+            {
+                "id":"003",
+                "title": "Calendar",
+                "provider": "AS93 File Drop",
+                "icon": "",
+                "url": "#"
+            },
+            {
+                "id":"004",
+                "title": "Email",
+                "provider": "AS93 TXT Notes",
+                "icon": "",
+                "url": "#"
+            },
+            {
+                "id":"005",
+                "title": "Home",
+                "provider": "DuckDuckGo",
+                "icon": "",
+                "url": "#"
+            },
+            {
+                "id":"006",
+                "title": "Kanban",
+                "provider": "Trello",
+                "icon": "",
+                "url": "#"
+            },
+            {
+                "id":"007",
+                "title": "Message Drop",
+                "provider": "Hawk Post",
+                "icon": "",
+                "url": "#"
+            }
+        ]
+    },
+    {
+        "id": "007",
+        "name": "Business",
+        "collapsed": true,
+        "cols": 1,
+        "items": [
+            {
+                "id":"001",
+                "title": "Invoices",
+                "provider": "Wave",
+                "icon": "",
+                "url": "https://accounting.waveapps.com/dashboard/business/8060245"
+            },
+            {
+                "id":"002",
+                "title": "Receipts",
+                "provider": "1Tap",
+                "icon": "",
+                "url": "https://my.1tap.io"
+            },
+            {
+                "id":"003",
+                "title": "Email",
+                "provider": "Tutonata",
+                "icon": "",
+                "url": "https://mail.tutanota.com/mail"
+            },
+            {
+                "id":"004",
+                "title": "Accountancy",
+                "provider": "SJD",
+                "icon": "",
+                "url": "https://online.sjdaccountancy.com/dashboard"
             }
         ]
     }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 13354a43..2732bb49 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -10,6 +10,7 @@
         :groupId="item.id"
         :title="item.name"
         :collapsed="item.collapsed"
+        :cols="item.cols"
         :items="filterTiles(item.items)"
       />
     </div>
@@ -68,6 +69,7 @@ export default {
 
 .item-group-container {
   display: flex;
+  flex-wrap: wrap;
   margin: 2rem;
   align-items:flex-start;
   align-content:flex-start;