✨ (#250) Adds option for custom column count

src/components/LinkItems/Section.vue

@@ -178,9 +178,9 @@ export default {
     padding: 0.8rem;
     text-align: center;
     cursor: default;
-    border-radius: var(--curve-factor);
-    background: #607d8b33;
     color: var(--primary);
+    background: var(--item-background);
+    border-radius: var(--curve-factor);
     box-shadow: var(--item-shadow);
 }
 
@@ -192,12 +192,13 @@ export default {
     display: grid;
     overflow: auto;
     @extend .scroll-bar;
-    @include phone { grid-template-columns: repeat(1, 1fr); }
+    @include phone { --item-col-count: 1; }
-    @include tablet { grid-template-columns: repeat(2, 1fr); }
+    @include tablet { --item-col-count: 2; }
-    @include laptop { grid-template-columns: repeat(2, 1fr); }
+    @include laptop { --item-col-count: 2; }
-    @include monitor { grid-template-columns: repeat(3, 1fr); }
+    @include monitor { --item-col-count: 3; }
-    @include big-screen { grid-template-columns: repeat(4, 1fr); }
+    @include big-screen { --item-col-count: 4; }
-    @include big-screen-up { grid-template-columns: repeat(5, 1fr); }
+    @include big-screen-up { --item-col-count: 5; }
+    grid-template-columns: repeat(var(--item-col-count, 2), minmax(0, 1fr));
   }
 }
 .orientation-horizontal {
@@ -205,13 +206,13 @@ export default {
   flex-direction: column;
   .there-are-items {
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    @include phone { --item-col-count: 2; }
-    @include phone { grid-template-columns: repeat(2, 1fr); }
+    @include tablet { --item-col-count: 4; }
-    @include tablet { grid-template-columns: repeat(4, 1fr); }
+    @include laptop { --item-col-count: 6; }
-    @include laptop { grid-template-columns: repeat(6, 1fr); }
+    @include monitor { --item-col-count: 8; }
-    @include monitor { grid-template-columns: repeat(8, 1fr); }
+    @include big-screen { --item-col-count: 10; }
-    @include big-screen { grid-template-columns: repeat(10, 1fr); }
+    @include big-screen-up { --item-col-count: 12; }
-    @include big-screen-up { grid-template-columns: repeat(12, 1fr); }
+    grid-template-columns: repeat(var(--item-col-count, 2), minmax(0, 1fr));
   }
 }
 

src/styles/color-themes.scss

@@ -406,7 +406,7 @@ html[data-theme='material'], html[data-theme='material-dark'] {
       }
     }
   }
-  .tooltip.item-description-tooltip {
+  .tooltip.item-description-tooltip:not(.tooltip-is-small) {
     display: none !important;
   }
   .orientation-horizontal {

src/views/Home.vue

@@ -18,7 +18,11 @@
     />
     <!-- Main content, section for each group of items -->
     <div v-if="checkTheresData(sections)"
-      :class="`item-group-container orientation-${layout} item-size-${itemSizeBound}`">
+      :class="`item-group-container `
+        + `orientation-${layout} `
+        + `item-size-${itemSizeBound} `
+        + (this.colCount ? `col-count-${this.colCount} ` : '')"
+      >
       <Section
         v-for="(section, index) in filteredTiles"
         :key="index"
@@ -67,6 +71,14 @@ export default {
     modalOpen: false, // When true, keybindings are disabled
   }),
   computed: {
+    /* Get class for num columns, if specified by user */
+    colCount() {
+      let { colCount } = this.appConfig;
+      if (!colCount) return null;
+      if (colCount < 1) colCount = 1;
+      if (colCount > 8) colCount = 8;
+      return colCount;
+    },
     /* Combines sections from config file, with those in local storage */
     allSections() {
       // If the user has stored sections in local storage, return those
@@ -227,7 +239,6 @@ export default {
 .home {
   padding-bottom: 1px;
   background: var(--background);
-  // min-height: calc(100vh - 126px);
   min-height: calc(99.9vh - var(--footer-height));
 }
 
@@ -256,26 +267,27 @@ export default {
     }
   }
 
-  /* Specify number of columns, based on screen size */
+  /* Specify number of columns, based on screen size or user preference */
-  @include phone {
+  @include phone { --col-count: 1; }
-    grid-template-columns: repeat(1, 1fr);
+  @include tablet { --col-count: 2; }
-  }
+  @include laptop { --col-count: 2; }
-  @include tablet {
+  @include monitor { --col-count: 3; }
-    grid-template-columns: repeat(2, 1fr);
+  @include big-screen { --col-count: 4; }
-  }
+  @include big-screen-up { --col-count: 5; }
-  @include laptop {
+
-    grid-template-columns: repeat(2, 1fr);
+  @include tablet-up {
-  }
+    &.col-count-1 { --col-count: 1; }
-  @include monitor {
+    &.col-count-2 { --col-count: 2; }
-    grid-template-columns: repeat(3, 1fr);
+    &.col-count-3 { --col-count: 3; }
-  }
+    &.col-count-4 { --col-count: 4; }
-  @include big-screen {
+    &.col-count-5 { --col-count: 5; }
-    grid-template-columns: repeat(4, 1fr);
+    &.col-count-6 { --col-count: 6; }
-  }
+    &.col-count-7 { --col-count: 7; }
-  @include big-screen-up {
+    &.col-count-8 { --col-count: 8; }
-    grid-template-columns: repeat(5, 1fr);
   }
 
+  grid-template-columns: repeat(var(--col-count, 2), minmax(0, 1fr));
+
   /* Hide when search term returns nothing */
   .no-results { display: none; }
 }