From 98d92f9c87b4587825f2a82277b2341fa22bdf27 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 8 Aug 2021 14:37:37 +0100
Subject: [PATCH] :construction: Implemented the tab-switching functionality
 into the minimal view

---
 src/components/MinimalView/MinimalHeading.vue | 46 +++++++++++++
 src/components/MinimalView/MinimalSection.vue | 66 +++++++------------
 src/views/Minimal.vue                         | 38 +++++------
 3 files changed, 87 insertions(+), 63 deletions(-)
 create mode 100644 src/components/MinimalView/MinimalHeading.vue

diff --git a/src/components/MinimalView/MinimalHeading.vue b/src/components/MinimalView/MinimalHeading.vue
new file mode 100644
index 00000000..f658e7de
--- /dev/null
+++ b/src/components/MinimalView/MinimalHeading.vue
@@ -0,0 +1,46 @@
+<template>
+  <div
+    @click="selectSection(index)"
+    :class="`minimal-section-heading ${selected ? 'selected' : ''}`">
+    <h3>{{ title }}</h3>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'MinimalHeadings',
+  props: {
+    index: Number,
+    title: String,
+    selected: Boolean,
+  },
+  methods: {
+    selectSection(index) {
+      this.$emit('sectionSelected', index);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+@import '@/styles/style-helpers.scss';
+
+div.minimal-section-heading {
+  cursor: pointer;
+  padding: 0.5rem 0.25rem;
+  border-radius: var(--curve-factor);
+  h3 {
+    margin: 0;
+    color: var(--primary);
+  }
+  &.selected {
+    background: var(--primary);
+    h3 {
+      color: var(--background);
+    }
+  }
+}
+
+</style>
diff --git a/src/components/MinimalView/MinimalSection.vue b/src/components/MinimalView/MinimalSection.vue
index f27f23be..4f8a5b33 100644
--- a/src/components/MinimalView/MinimalSection.vue
+++ b/src/components/MinimalView/MinimalSection.vue
@@ -1,30 +1,27 @@
 <template>
    <div :class="`minimal-section-inner ${selected ? 'selected' : ''}`">
-      <div class="section-title" @click="selectSection(index)">
-        <h3>{{ title }}</h3>
-      </div>
-      <div class="section-items" v-if="selected">
-        <Item
-          v-for="(item, index) in items"
-          :id="`${index}_${makeId(item.title)}`"
-          :key="`${index}_${makeId(item.title)}`"
-          :url="item.url"
-          :title="item.title"
-          :description="item.description"
-          :icon="item.icon"
-          :target="item.target"
-          :color="item.color"
-          :backgroundColor="item.backgroundColor"
-          :statusCheckUrl="item.statusCheckUrl"
-          :statusCheckHeaders="item.statusCheckHeaders"
-          :itemSize="itemSize"
-          :hotkey="item.hotkey"
-          :enableStatusCheck="shouldEnableStatusCheck(item.statusCheck)"
-          :statusCheckInterval="getStatusCheckInterval()"
-          @itemClicked="$emit('itemClicked')"
-          @triggerModal="triggerModal"
-        />
-      </div>
+    <div class="section-items" v-if="selected">
+      <Item
+        v-for="(item, index) in items"
+        :id="`${index}_${makeId(item.title)}`"
+        :key="`${index}_${makeId(item.title)}`"
+        :url="item.url"
+        :title="item.title"
+        :description="item.description"
+        :icon="item.icon"
+        :target="item.target"
+        :color="item.color"
+        :backgroundColor="item.backgroundColor"
+        :statusCheckUrl="item.statusCheckUrl"
+        :statusCheckHeaders="item.statusCheckHeaders"
+        :itemSize="itemSize"
+        :hotkey="item.hotkey"
+        :enableStatusCheck="shouldEnableStatusCheck(item.statusCheck)"
+        :statusCheckInterval="getStatusCheckInterval()"
+        @itemClicked="$emit('itemClicked')"
+        @triggerModal="triggerModal"
+      />
+    </div>
     <IframeModal
       :ref="`iframeModal-${groupId}`"
       :name="`iframeModal-${groupId}`"
@@ -99,23 +96,10 @@ export default {
     display: flex;
     flex-direction: column;
   }
-  .section-title {
-    cursor: pointer;
-    padding: 0.5rem 0.25rem;
-    border-radius: var(--curve-factor);
-    h3 {
-      margin: 0;
-      color: var(--primary);
-    }
-  }
   &.selected {
-    .section-title {
-      background: var(--primary);
-        h3 {
-          color: var(--background);
-        }
-      }
-    }
+    border: 1px solid var(--primary);
+    grid-column-start: span var(--col-count, 3);
+  }
 }
 
 </style>
diff --git a/src/views/Minimal.vue b/src/views/Minimal.vue
index ba51439a..714009d9 100644
--- a/src/views/Minimal.vue
+++ b/src/views/Minimal.vue
@@ -1,11 +1,19 @@
 <template>
-  <div class="minimal-home" :style="getBackgroundImage()">
+  <div class="minimal-home" :style="getBackgroundImage() + setColumnCount()">
     <!-- Main content, section for each group of items -->
     <div v-if="checkTheresData(sections)"
       :class="`item-group-container item-size-small`">
+      <MinimalHeading
+        v-for="(section, index) in getSections(sections)"
+        :key="`heading-${index}`"
+        :index="index"
+        :title="section.name"
+        :selected="selectedSection === index"
+        @sectionSelected="sectionSelected"
+      />
       <MinimalSection
         v-for="(section, index) in getSections(sections)"
-        :key="index"
+        :key="`body-${index}`"
         :index="index"
         :title="section.name"
         :icon="section.icon || undefined"
@@ -25,6 +33,7 @@
 <script>
 
 import MinimalSection from '@/components/MinimalView/MinimalSection.vue';
+import MinimalHeading from '@/components/MinimalView/MinimalHeading.vue';
 import Defaults, { localStorageKeys } from '@/utils/defaults';
 
 export default {
@@ -35,6 +44,7 @@ export default {
   },
   components: {
     MinimalSection,
+    MinimalHeading,
   },
   data: () => ({
     searchValue: '',
@@ -127,6 +137,9 @@ export default {
         return itemsFound;
       }
     },
+    setColumnCount() {
+      return `--col-count: ${this.sections.length};`;
+    },
     getBackgroundImage() {
       if (this.appConfig && this.appConfig.backgroundImg) {
         return `background: url('${this.appConfig.backgroundImg}');background-size:cover;`;
@@ -160,6 +173,7 @@ export default {
   margin: 0 auto;
   max-width: 90%;
   overflow: auto;
+  grid-template-columns: repeat(var(--col-count), 1fr);
   @extend .scroll-bar;
   @include monitor-up {
     max-width: 1400px;
@@ -178,26 +192,6 @@ export default {
     }
   }
 
-  /* Specify number of columns, based on screen size */
-  @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);
-  }
-
   /* Hide when search term returns nothing */
   .no-results { display: none; }
 }