Adds ability for sections to span multiple rows or cols, and refactored section meta

src/components/Collapsable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`collapsable col-${cols}`">
+  <div :class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`">
         <input
             :id="`collapsible-${uniqueKey}`"
             class="toggle"
@@ -27,6 +27,7 @@ export default {
     title: String,
     collapsed: Boolean,
     cols: Number,
+    rows: Number,
   },
   data() {
     return {
@@ -34,6 +35,13 @@ export default {
     };
   },
   methods: {
+    /* Check that row & column span is valid, and not over the max */
+    checkSpanNum(span, classPrefix) {
+      const maxSpan = 4;
+      let numSpan = /^\d*$/.test(span) ? parseInt(span, 10) : 1;
+      numSpan = (numSpan > maxSpan) ? maxSpan : numSpan;
+      return `${classPrefix}-${numSpan}`;
+    },
     initialiseStorage() {
       const initStorage = () => localStorage.setItem('collapseState', JSON.stringify({}));
       if (!localStorage.collapseState) initStorage(); // If not yet set, then init localstorage
@@ -72,6 +80,7 @@ export default {
 
 @import '../../src/styles/color-pallet.scss';
 @import '../../src/styles/constants.scss';
+@import '../../src/styles/media-queries.scss';
 
 .collapsable {
     padding: 5px;
@@ -84,11 +93,28 @@ export default {
     height: fit-content;
     width: 100%;
     width: stretch;
-    // &.col-1 { width: 155px; }
+
-    // &.col-2 { width: 310px; }
+    grid-row-start: span 1;
-    // &.col-3 { width: 465px; }
+    &.row-2 { grid-row-start: span 2; }
-    // &.col-4 { width: 620px; }
+    &.row-3 { grid-row-start: span 3; }
-    // &.col-5 { width: 775px; }
+    &.row-4 { grid-row-start: span 4; }
+
+    grid-column-start: span 1;
+    @include tablet-up {
+      &.col-2 { grid-column-start: span 2; }
+      &.col-3 { grid-column-start: span 2; }
+      &.col-4 { grid-column-start: span 2; }
+    }
+    @include laptop-up {
+      &.col-2 { grid-column-start: span 2; }
+      &.col-3 { grid-column-start: span 3; }
+      &.col-4 { grid-column-start: span 3; }
+    }
+    @include monitor-up {
+      &.col-2 { grid-column-start: span 2; }
+      &.col-3 { grid-column-start: span 3; }
+      &.col-4 { grid-column-start: span 4; }
+    }
 
     .wrap-collabsible {
         margin-bottom: 1.2rem 0;

src/components/ItemGroup.vue

@@ -1,5 +1,11 @@
 <template>
-   <Collapsable :title="title" :uniqueKey="groupId" :collapsed="collapsed" :cols="cols">
+   <Collapsable
+    :title="title"
+    :uniqueKey="groupId"
+    :collapsed="displayData.collapsed"
+    :cols="displayData.cols"
+    :rows="displayData.rows"
+  >
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
     </div>
@@ -28,8 +34,7 @@ export default {
   props: {
     groupId: String,
     title: String,
-    collapsed: Boolean,
+    displayData: Object,
-    cols: Number,
     items: Array,
   },
   components: {

src/data/conf.yml

@@ -3,10 +3,8 @@ pageInfo:
   title: Hello World
   description: ''
 sections:
-- id: '0'
+- name: Firewall
-  name: Firewall
   collapsed: false
-  cols: 3
   items:
   - title: OPNsense
     description: Firewall Central Management
@@ -48,10 +46,12 @@ sections:
     icon: networking/wireguard
     iconType: img
     url: https://192.168.1.1/ui/wireguard/general
-- id: '1'
+- name: DNS Device
-  name: DNS Device
+  displayData:
+    collapsed: false
+    rows: 2
+    cols: 2
   collapsed: false
-  cols: 2
   items:
   - title: Pi-Hole
     description: DNS settings for ad & tracker blocking
@@ -115,10 +115,8 @@ sections:
     iconType: img
     icon: networking/grafana
     url: http://192.168.130.2:8091/
-- id: '2'
+- name: Other Devices
-  name: Other Devices
   collapsed: false
-  cols: 3
   items:
   - title: Modem
     description: ISP Router Modem Combo
@@ -175,8 +173,7 @@ sections:
     icon: networking/vodafone
     iconType: img
     url: https://myaccount.vodafone.co.uk/
-- id: '005'
+- name: External Utilities
-  name: External Utilities
   collapsed: false
   cols: 1
   items:

src/styles/media-queries.scss

@@ -38,3 +38,19 @@ $extra-large: 2800px;
   }
 }
 
+
+@mixin tablet-up {
+  @media (min-width: #{$small}) {
+    @content;
+  }
+}
+@mixin laptop-up {
+  @media (min-width: #{$medium}) {
+    @content;
+  }
+}
+@mixin monitor-up {
+  @media (min-width: #{$large}) {
+    @content;
+  }
+}

src/views/Home.vue

@@ -4,13 +4,12 @@
     <FilterTile @user-is-searchin="searching" class="filter-container" />
     <div class="item-group-container">
       <ItemGroup
-        v-for="(item, index) in items"
+        v-for="(section, index) in sections"
         :key="index"
-        :groupId="item.id"
+        :title="section.name"
-        :title="item.name"
+        :displayData="getDisplayData(section)"
-        :collapsed="item.collapsed"
+        :groupId="`section-${index}`"
-        :cols="item.cols"
+        :items="filterTiles(section.items)"
-        :items="filterTiles(item.items)"
       />
     </div>
   </div>
@@ -35,7 +34,7 @@ export default {
     ItemGroup,
   },
   data: () => ({
-    items: conf.sections,
+    sections: conf.sections,
     searchTile: '',
   }),
   methods: {
@@ -59,6 +58,10 @@ export default {
           || this.getDomainFromUrl(url).includes(searchTerm);
       });
     },
+    getDisplayData(section) {
+      const defaultDisplayData = { collapsed: null, rows: null, cols: null };
+      return !section.displayData ? defaultDisplayData : section.displayData;
+    },
   },
 };
 </script>
@@ -76,7 +79,6 @@ export default {
 .item-group-container {
   display: grid;
   gap: 10px;
-  // grid-template-rows: masonry;
 
   @include phone {
     grid-template-columns: repeat(1, 1fr);