🔀 Merge pull request #1928 from shumittaher/bugcols

Fixed #1927
When a section's displayData.cols exceeds the page's active grid column count, the section's col-span is now clamped to the page column count

Author: Lissy93

docs/configuring.md

@@ -306,7 +306,7 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 **`collapsed`** | `boolean` | _Optional_ | If true, the section will  be collapsed initially, and will need to be clicked to open. Useful for less regularly used, or very long sections. Defaults to `false`
 **`cutToHeight`** | `boolean` | _Optional_ | By default, sections will fill available space. Set this option to true to match section height with content height
 **`rows`** | `number` | _Optional_ | Height of the section, specified as the number of rows it should span vertically, e.g. `2`. Defaults to `1`. Max is `5`.
-**`cols`** | `number` | _Optional_ | Width of the section, specified as the number of columns the section should span horizontally, e.g. `2`. Defaults to `1`. Max is `5`.
+**`cols`** | `number` | _Optional_ | Width of the section, specified as the number of columns the section should span horizontally, e.g. `2`. Defaults to `1`. Max is `6`. Will be clamped to the page's active column count so that a section never exceeds the available grid width.
 **`itemSize`** | `string` | _Optional_ | Specify the size for items within this group, either `small`, `medium` or `large`. Note that this will override any settings specified through the UI
 **`color`** | `string` | _Optional_ | A custom accent color for the section, as a hex code or HTML color (e.g. `#fff`)
 **`customStyles`** | `string` | _Optional_ | Custom CSS properties that should be applied to that section, e.g. `border: 2px dashed #ff0000;`

src/components/LinkItems/Section.vue

@@ -4,7 +4,7 @@
     :icon="icon"
     :uniqueKey="groupId"
     :collapsed="displayData.collapsed"
-    :cols="displayData.cols"
+    :cols="effectiveColsSpan"
     :rows="displayData.rows"
     :color="displayData.color"
     :customStyles="displayData.customStyles"
@@ -128,6 +128,7 @@ export default {
     widgets: Array,
     index: Number,
     isWide: Boolean,
+    activeColCount: Number,
   },
   components: {
     Collapsable,
@@ -209,6 +210,11 @@ export default {
       }
       return styles;
     },
+    effectiveColsSpan() {
+      const { cols } = this.displayData;
+      if (!cols) return cols;
+      return Math.min(this.activeColCount, cols);
+    },
   },
   methods: {
     /* Opens the iframe modal */

src/views/Home.vue

@@ -19,7 +19,8 @@
       </router-link>
     </div>
     <!-- Main content, section for each group of items -->
-    <div v-if="checkTheresData(sections) || isEditMode" :class="computedClass">
+    <div v-if="checkTheresData(sections) || isEditMode" :class="computedClass"
+    ref="sectionsContainer">
       <template v-for="(section, index) in filteredSections">
         <Section
           :key="index"
@@ -36,6 +37,7 @@
           @change-modal-visibility="updateModalVisibility"
           :isWide="!!singleSectionView || layoutOrientation === 'horizontal'"
           :class="(searchValue && section.filteredItems.length === 0) ? 'no-results' : ''"
+          :activeColCount="activeColCount"
         />
       </template>
       <!-- Show add new section button, in edit mode -->
@@ -83,6 +85,7 @@ export default {
     layout: '',
     itemSizeBound: '',
     addNewSectionOpen: false,
+    activeColCount: 1,
   }),
   computed: {
     singleSectionView() {
@@ -172,12 +175,26 @@ export default {
       availibleThemes.Default = '#';
       return availibleThemes;
     },
+    readActiveColCount() {
+      const { sectionsContainer } = this.$refs;
+      if (!sectionsContainer) return;
+      const cs = getComputedStyle(sectionsContainer);
+      const varVal = parseInt(cs.getPropertyValue('--col-count'), 10);
+      if (!Number.isNaN(varVal) && varVal > 0) {
+        this.activeColCount = varVal;
+      }
+    },
   },
   mounted() {
     this.initiateFontAwesome();
     this.initiateMaterialDesignIcons();
     this.layout = this.layoutOrientation;
     this.itemSizeBound = this.iconSize;
+    this.readActiveColCount();
+    window.addEventListener('resize', this.readActiveColCount);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.readActiveColCount);
   },
 };
 </script>