From 10ec99d7426237c83977244debbc08043354fa1e Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 31 May 2021 13:25:29 +0100
Subject: [PATCH] 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.
---
 README.md                              | 13 ++++++--
 src/components/LinkItems/ItemGroup.vue | 41 ++++++++++++++++++++++++--
 src/styles/color-palette.scss          |  2 +-
 src/views/Home.vue                     |  3 +-
 4 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 3ed0e9a9..a2b055fa 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,8 @@
   <img width="800" src="https://i.ibb.co/L8YbNNc/dashy-demo2.gif" alt="Demo">
 </p>
 
+![More themes and screens](https://i.ibb.co/M6nyvqW/dashy-options-screen.png)
+
 ---
 
 ## Running the App 🏃‍♂️
@@ -104,11 +106,16 @@ All fields are optional, unless otherwise stated.
 - `items` - Item[]: (required) An array of items - _See **`item`** below_
 - `displayData`: An object with the following fields (all optional)
   - `collapsed` - Boolean: If true, the section will  be collapsed initially (defaults to `false`) 
-  - `rows` - Int: Number of rows the section should span vertically, e.g. 2 (defaults to `1`)
-  - `cols` - Int: Number of columns the section should span horizontally, e.g. 2 (defaults to `1`)
   - `color` - String: A custom accent color for the section, as a hex code or HTML color (e.g. `#fff`)
   - `customStyles` - String: Custom CSS properties that should be applied to that section, e.g. `border: 2px dashed #ff0000;`
   - `itemSize` - String: Specify the size for items within this group, either `small`, `medium` or `large`
+  - `rows` - Int: Number of rows the section should span vertically, e.g. 2 (defaults to `1`)
+  - `cols` - Int: Number of columns the section should span horizontally, e.g. 2 (defaults to `1`)
+  - `layout` - Enum: `auto` or `grid`. If `grid` is selected, then the number of items per row can be set
+  - `itemCountX` - Int: Number of items horizontally (for `layout: grid`)
+  - `itemCountY` - Int: Number of items vertically (for `layout: grid`)
+
+Note about `rows` and `cols`: These are defined as a proportion of the screen (rather than by number of child items), and is built using [`grid-layout`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout). For more info, see [this example](https://i.ibb.co/HXRWVRK/how-rows-and-cols-work-in-dashy.png). In order to set the number of items that will display horizontally or vertically within a section, first set `display: grid`, and then specify values for `itemCountX`, and optionally `itemCountY`.
 
 **`item`**
 - `title` - String: The text to display on the item
@@ -174,7 +181,7 @@ This wouldn't have been quite so possible without the following components, kudo
 - [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) - Tab view component by @jairoblatt `MIT`
 - [`VJsoneditor`](https://github.com/yansenlei/VJsoneditor) - Interactive JSON editor component by @yansenlei `MIT`
   - Forked from [`JsonEditor`](https://github.com/josdejong/jsoneditor) by @josdejong `Apache-2.0 License`
-  - And using [`ajv`](https://github.com/ajv-validator/ajv) `MIT` JSON schema Validator [`ace`](https://github.com/ajaxorg/ace) `BSD` code editor
+  - Using [`ajv`](https://github.com/ajv-validator/ajv) `MIT` JSON schema Validator and [`ace`](https://github.com/ajaxorg/ace) `BSD` code editor
 - [`vue-toasted`](https://github.com/shakee93/vue-toasted) - Toast notification component by @shakee93 `MIT`
 
 Utils:
diff --git a/src/components/LinkItems/ItemGroup.vue b/src/components/LinkItems/ItemGroup.vue
index 54b6f9d8..e0efd9ff 100644
--- a/src/components/LinkItems/ItemGroup.vue
+++ b/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>
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 0f0c9f60..1c0cff6a 100644
--- a/src/styles/color-palette.scss
+++ b/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
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 63e6e696..e9a326fb 100644
--- a/src/views/Home.vue
+++ b/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>