From 78a6243346483455e5ae5539eae8c7c60b1021ae Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Thu, 10 Oct 2024 12:11:12 +0530 Subject: [PATCH 1/3] Provided default breakpoints when there's nothing defined --- ui/src/mixins/responsiveness.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/ui/src/mixins/responsiveness.js b/ui/src/mixins/responsiveness.js index c383e2268..d17bf2d0d 100644 --- a/ui/src/mixins/responsiveness.js +++ b/ui/src/mixins/responsiveness.js @@ -26,14 +26,22 @@ export default { methods: { countColumns () { let cols = 0 + const defaultBreakpoints = [ + { name: 'Default', px: 0, cols: 3 }, + { name: 'Tablet', px: 576, cols: 6 }, + { name: 'Small Desktop', px: 768, cols: 9 }, + { name: 'Desktop', px: 1024, cols: 12 } + ] if (this.page) { - const b = this.page.breakpoints + // set default breakpoints if none are defined + const b = this.page.breakpoints || defaultBreakpoints // ensure breakpoints are sorted in reverse order const breakpoints = b.sort((a, b) => a.px - b.px) breakpoints.forEach((bp) => { if (window.innerWidth >= bp.px) { - cols = bp.cols + // ensure cols is a number + cols = Number(bp.cols) } }) } From 9b642a2fe7553fc050e8f544252eecbd3e6c10d9 Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Thu, 10 Oct 2024 14:06:32 +0530 Subject: [PATCH 2/3] Update ui/src/mixins/responsiveness.js Co-authored-by: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com> --- ui/src/mixins/responsiveness.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/ui/src/mixins/responsiveness.js b/ui/src/mixins/responsiveness.js index d17bf2d0d..64502dfc0 100644 --- a/ui/src/mixins/responsiveness.js +++ b/ui/src/mixins/responsiveness.js @@ -26,12 +26,6 @@ export default { methods: { countColumns () { let cols = 0 - const defaultBreakpoints = [ - { name: 'Default', px: 0, cols: 3 }, - { name: 'Tablet', px: 576, cols: 6 }, - { name: 'Small Desktop', px: 768, cols: 9 }, - { name: 'Desktop', px: 1024, cols: 12 } - ] if (this.page) { // set default breakpoints if none are defined const b = this.page.breakpoints || defaultBreakpoints From 5538d08e468e0648549a1ce5540b95a5636f9ece Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Thu, 10 Oct 2024 14:06:42 +0530 Subject: [PATCH 3/3] Update ui/src/mixins/responsiveness.js Co-authored-by: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com> --- ui/src/mixins/responsiveness.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/ui/src/mixins/responsiveness.js b/ui/src/mixins/responsiveness.js index 64502dfc0..431c7317c 100644 --- a/ui/src/mixins/responsiveness.js +++ b/ui/src/mixins/responsiveness.js @@ -28,7 +28,15 @@ export default { let cols = 0 if (this.page) { // set default breakpoints if none are defined - const b = this.page.breakpoints || defaultBreakpoints + let b = this.page.breakpoints + if (!b || !Array.isArray(b) || b.length === 0) { + b = [ + { name: 'Default', px: 0, cols: 3 }, + { name: 'Tablet', px: 576, cols: 6 }, + { name: 'Small Desktop', px: 768, cols: 9 }, + { name: 'Desktop', px: 1024, cols: 12 } + ] + } // ensure breakpoints are sorted in reverse order const breakpoints = b.sort((a, b) => a.px - b.px)