From 2456352d2ab1cb2898b7238e6c31d7b58e33bc25 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 17 Aug 2019 06:23:16 +0100
Subject: [PATCH] That's all looking great, lets call it a night for today

---
 src/components/Collapsable.vue | 11 ++---
 src/components/Item.vue        |  1 +
 src/components/ItemGroup.vue   | 77 ++++++++++------------------------
 src/views/Home.vue             | 12 +-----
 4 files changed, 32 insertions(+), 69 deletions(-)

diff --git a/src/components/Collapsable.vue b/src/components/Collapsable.vue
index 801bff72..aacb2377 100644
--- a/src/components/Collapsable.vue
+++ b/src/components/Collapsable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="collapsable">
-        <input id="collapsible" class="toggle" type="checkbox" checked>
-        <label for="collapsible" class="lbl-toggle" tabindex="0">
+        <input :id="`collapsible-${uniqueKey}`" class="toggle" type="checkbox" checked>
+        <label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="0">
             <h2>{{ title }}</h2>
         </label>
         <div class="collapsible-content">
@@ -16,6 +16,7 @@
 export default {
   name: 'CollapsableContainer',
   props: {
+    uniqueKey: String,
     title: String
   }
 }
@@ -25,7 +26,7 @@ export default {
 <style scoped lang="scss">
 
 .collapsable {
-    min-width: 350px;
+    width: 310px;
     padding: 5px;
     margin: 10px;
     border-radius: 10px;
@@ -33,7 +34,7 @@ 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;
-    
+
     .wrap-collabsible {
         margin-bottom: 1.2rem 0;
     }
@@ -101,7 +102,7 @@ export default {
     }
 
     .collapsible-content .content-inner {
-        padding: 0.5rem 1rem;
+        padding: 0.5rem;
     }
 }
 </style>
diff --git a/src/components/Item.vue b/src/components/Item.vue
index 7033a841..943e7055 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -58,6 +58,7 @@ export default {
 .item {
     width: 120px;
     height: 100px;
+    color: #1CA8DD;
     display: inline-block;
     vertical-align: middle;
     margin: 8px;
diff --git a/src/components/ItemGroup.vue b/src/components/ItemGroup.vue
index 7d104a7b..65f8fb7d 100644
--- a/src/components/ItemGroup.vue
+++ b/src/components/ItemGroup.vue
@@ -1,82 +1,51 @@
 <template>
-    <div class="item-group-outer">
-        <h2>{{ title }}</h2>
-        <div class="item-group-inner">
-            <span v-if="!items || items.length < 1" class="no-items">
-              No Items to Show Yet
-            </span>
-            <div v-else class="there-are-items">
-              <Item
-                v-for="item in items"
-                :key="item.id"
-                :id="item.id"
-                :title="item.title"
-                :description="item.description"
-                :icon="item.icon"
-              />
-            </div>
-      </div>
-  </div>
+   <Collapsable :title="title" :uniqueKey="groupId">
+    <div v-if="!items || items.length < 1" class="no-items">
+      No Items to Show Yet
+    </div>
+    <div v-else class="there-are-items">
+      <Item
+        v-for="item in items"
+        :key="item.id"
+        :id="item.id"
+        :title="item.title"
+        :description="item.description"
+        :icon="item.icon"
+      />
+    </div>
+  </Collapsable>
 </template>
 
 <script>
 import Item from '@/components/Item.vue'
+import Collapsable from '@/components/Collapsable.vue'
 
 export default {
   name: 'ItemGroup',
   props: {
+    groupId: String,
     title: String,
     items: Array
   },
   components: {
+    Collapsable,
     Item
   }
 }
 </script>
 
-<!-- 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;
-
-    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%;
-    text-align: left;
-    border-radius: 0 0 10px 10px;
-    display: flex;
-    justify-content: space-evenly;
-    flex-direction: column;
-}
-
 .no-items {
-    background: #607d8b33;
     width: 100px;
-    text-align: center;
     margin: 0 auto;
     padding: 0.8em;
-    border-radius: 10px;
-    box-shadow: 1px 1px 2px #373737;
+    text-align: center;
     cursor: default;
+    border-radius: 10px;
+    background: #607d8b33;
+    color: #1CA8DD;
+    box-shadow: 1px 1px 2px #373737;
 }
 
 .there-are-items {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 05504b89..062360b3 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -6,16 +6,10 @@
       <ItemGroup
         v-for="item in items"
         :key="item.id"
-        :id="item.id"
+        :groupId="item.id"
         :title="item.name"
         :items="item.items"
       />
-      <ItemGroup title="External Infrastructure"/>
-      <ItemGroup title="Utilities"/>
-
-      <Collapsable title="Server Management">
-        <p>Lorem Ipsum</p>
-      </Collapsable>
     </div>
   </div>
 </template>
@@ -23,14 +17,12 @@
 <script>
 
 import ItemGroup from '@/components/ItemGroup.vue'
-import Collapsable from '@/components/Collapsable.vue';
 import * as linkData from './../data/item-data.json'
 
 export default {
   name: 'home',
   components: {
-    ItemGroup,
-    Collapsable,
+    ItemGroup
   },
   data: () => {
     return {