Lets the user specify number of items per row, fixes #7

Ussage: Under `displayData` for a given section, specify `layout: grid`, and then to set the number of horizontal items, use `itemCountX: 3`. You can also set `itemCountY` for number of items vertically, but this can be infered automatically if left blank.

src/components/LinkItems/ItemGroup.vue

@@ -11,7 +11,10 @@
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
     </div>
-    <div v-else class="there-are-items">
+    <div v-else
+      :class="`there-are-items ${isGridLayout? 'item-group-grid': ''}`"
+      :style="gridStyle"
+    >
       <Item
         v-for="(item, index) in items"
         :id="`${index}_${makeId(item.title)}`"
@@ -59,9 +62,21 @@ export default {
     IframeModal,
   },
   computed: {
-    newItemSize: function size() {
+    newItemSize() {
       return this.displayData.itemSize || this.itemSize;
     },
+    isGridLayout() {
+      return this.displayData.layout === 'grid'
+        || !!(this.displayData.itemCountX || this.displayData.itemCountY);
+    },
+    gridStyle() {
+      let styles = '';
+      styles += this.displayData.itemCountX
+        ? `grid-template-columns: repeat(${this.displayData.itemCountX}, 1fr);` : '';
+      styles += this.displayData.itemCountY
+        ? `grid-template-rows: repeat(${this.displayData.itemCountY}, 1fr);` : '';
+      return styles;
+    },
   },
   methods: {
     /* Returns a unique lowercase string, based on name, for section ID */
@@ -80,6 +95,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/media-queries.scss';
 
 .no-items {
     width: 100px;
@@ -97,6 +113,27 @@ export default {
   height: 100%;
   display: flex;
   flex-wrap: wrap;
+  &.item-group-grid {
+    display: grid;
+    @include phone {
+      grid-template-columns: repeat(1, 1fr);
+    }
+    @include tablet {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    @include laptop {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    @include monitor {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    @include big-screen {
+      grid-template-columns: repeat(4, 1fr);
+    }
+    @include big-screen-up {
+      grid-template-columns: repeat(5, 1fr);
+    }
+  }
 }
 
 </style>

src/styles/color-palette.scss

@@ -35,7 +35,7 @@
   --outline-color: none;
   --curve-factor: 5px; // Border radius for most components
   --curve-factor-navbar: 16px; // Border radius for header
-  --dimming-factor: 0.8; // Opacity for semi-transparent components
+  --dimming-factor: 0.7; // Opacity for semi-transparent components
 
   /* Settings for specific components */
   --item-group-padding: 5px; // Determines width of item-group outline

src/views/Home.vue

@@ -25,8 +25,9 @@
         :displayData="getDisplayData(section)"
         :groupId="`section-${index}`"
         :items="filterTiles(section.items)"
+        :itemSize="itemSizeBound"
          @itemClicked="finishedSearching()"
-         :itemSize="itemSizeBound"
+         @change-modal-visibility="updateModalVisibility"
          :class="(filterTiles(section.items).length === 0 && searchValue) ? 'no-results' : ''"
       />
     </div>