From afe3e2fc398daec4beec8a2c92e1099a3c21abe7 Mon Sep 17 00:00:00 2001 From: Meierschlumpf Date: Tue, 3 Jan 2023 16:40:15 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Made=20aspect=20ratio=201=20to?= =?UTF-8?q?=201?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data/configs/default.json | 294 +++++++++--------- .../Wrappers/gridstack/use-gridstack.ts | 11 +- src/hooks/use-resize.ts | 4 + src/styles/global.scss | 12 +- 4 files changed, 169 insertions(+), 152 deletions(-) diff --git a/data/configs/default.json b/data/configs/default.json index 2a5cd2b09..7a2b6bb23 100644 --- a/data/configs/default.json +++ b/data/configs/default.json @@ -18,87 +18,12 @@ ], "apps": [ { - "id": "76217a87-7151-42d0-b0cf-1b72aef63f83", - "name": "Small app", + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a", + "name": "Documentation", "url": "https://homarr.dev", - "appearance": { - "iconUrl": "/imgs/logo/logo.png" - }, - "network": { - "enabledStatusChecker": false, - "okStatus": [] - }, "behaviour": { - "isOpeningNewTab": true, - "externalUrl": "https://homarr.dev" - }, - "area": { - "type": "category", - "properties": { - "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f" - } - }, - "shape": { - "location": { - "x": 0, - "y": 2 - }, - "size": { - "width": 2, - "height": 2 - } - }, - "integration": { - "type": null, - "properties": [] - } - }, - { - "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a337", - "name": "Discord", - "url": "https://discord.com/invite/aCsmEV5RgA", - "behaviour": { - "onClickUrl": "https://discord.com/invite/aCsmEV5RgA", - "isOpeningNewTab": true, - "externalUrl": "https://discord.com/invite/aCsmEV5RgA" - }, - "network": { - "enabledStatusChecker": false, - "okStatus": [ - 200 - ] - }, - "appearance": { - "iconUrl": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/discord.png" - }, - "integration": { - "type": null, - "properties": [] - }, - "area": { - "type": "category", - "properties": { - "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f" - } - }, - "shape": { - "location": { - "x": 0, - "y": 4 - }, - "size": { - "width": 4, - "height": 3 - } - } - }, - { - "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a990", - "name": "Donate", - "url": "https://ko-fi.com/ajnart", - "behaviour": { - "onClickUrl": "https://ko-fi.com/ajnart", - "externalUrl": "https://ko-fi.com/ajnart", + "onClickUrl": "https://homarr.dev", + "externalUrl": "https://homarr.dev", "isOpeningNewTab": true }, "network": { @@ -108,26 +33,26 @@ ] }, "appearance": { - "iconUrl": "https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/61e1116779fc0a9bd5bdbcc7_Frame%206.png" + "iconUrl": "/imgs/logo/logo.png" }, "integration": { "type": null, "properties": [] }, "area": { - "type": "category", + "type": "wrapper", "properties": { - "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f" + "id": "default" } }, "shape": { "location": { - "x": 2, - "y": 2 + "x": 0, + "y": 11 }, "size": { - "width": 2, - "height": 2 + "width": 4, + "height": 3 } } }, @@ -155,7 +80,7 @@ "shape": { "location": { "x": 8, - "y": 12 + "y": 10 }, "size": { "width": 4, @@ -167,6 +92,42 @@ "properties": [] } }, + { + "id": "5df743d9-5cb1-457c-85d2-64ff86855652", + "name": "Your app", + "url": "https://homarr.dev", + "appearance": { + "iconUrl": "/imgs/logo/logo.png" + }, + "network": { + "enabledStatusChecker": false, + "okStatus": [] + }, + "behaviour": { + "isOpeningNewTab": true, + "externalUrl": "https://homarr.dev" + }, + "area": { + "type": "wrapper", + "properties": { + "id": "default" + } + }, + "shape": { + "location": { + "x": 0, + "y": 7 + }, + "size": { + "width": 6, + "height": 4 + } + }, + "integration": { + "type": null, + "properties": [] + } + }, { "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a330", "name": "Contribute", @@ -198,56 +159,17 @@ "shape": { "location": { "x": 4, - "y": 2 + "y": 0 }, "size": { - "width": 2, - "height": 2 + "width": 1, + "height": 1 } } }, { - "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a", - "name": "Documentation", - "url": "https://homarr.dev", - "behaviour": { - "onClickUrl": "https://homarr.dev", - "externalUrl": "https://homarr.dev", - "isOpeningNewTab": true - }, - "network": { - "enabledStatusChecker": false, - "okStatus": [ - 200 - ] - }, - "appearance": { - "iconUrl": "/imgs/logo/logo.png" - }, - "integration": { - "type": null, - "properties": [] - }, - "area": { - "type": "wrapper", - "properties": { - "id": "default" - } - }, - "shape": { - "location": { - "x": 8, - "y": 9 - }, - "size": { - "width": 4, - "height": 3 - } - } - }, - { - "id": "5df743d9-5cb1-457c-85d2-64ff86855652", - "name": "Your app", + "id": "76217a87-7151-42d0-b0cf-1b72aef63f83", + "name": "Small app", "url": "https://homarr.dev", "appearance": { "iconUrl": "/imgs/logo/logo.png" @@ -261,32 +183,111 @@ "externalUrl": "https://homarr.dev" }, "area": { - "type": "wrapper", + "type": "category", "properties": { - "id": "default" + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f" } }, "shape": { "location": { - "x": 0, - "y": 7 + "x": 5, + "y": 0 }, "size": { - "width": 6, - "height": 4 + "width": 1, + "height": 1 } }, "integration": { "type": null, "properties": [] } + }, + { + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a337", + "name": "Discord", + "url": "https://discord.com/invite/aCsmEV5RgA", + "behaviour": { + "onClickUrl": "https://discord.com/invite/aCsmEV5RgA", + "isOpeningNewTab": true, + "externalUrl": "https://discord.com/invite/aCsmEV5RgA" + }, + "network": { + "enabledStatusChecker": false, + "okStatus": [ + 200 + ] + }, + "appearance": { + "iconUrl": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/discord.png" + }, + "integration": { + "type": null, + "properties": [] + }, + "area": { + "type": "category", + "properties": { + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f" + } + }, + "shape": { + "location": { + "x": 6, + "y": 0 + }, + "size": { + "width": 1, + "height": 1 + } + } + }, + { + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a990", + "name": "Donate", + "url": "https://ko-fi.com/ajnart", + "behaviour": { + "onClickUrl": "https://ko-fi.com/ajnart", + "externalUrl": "https://ko-fi.com/ajnart", + "isOpeningNewTab": true + }, + "network": { + "enabledStatusChecker": false, + "okStatus": [ + 200 + ] + }, + "appearance": { + "iconUrl": "https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/61e1116779fc0a9bd5bdbcc7_Frame%206.png" + }, + "integration": { + "type": null, + "properties": [] + }, + "area": { + "type": "category", + "properties": { + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f" + } + }, + "shape": { + "location": { + "x": 7, + "y": 0 + }, + "size": { + "width": 1, + "height": 1 + } + } } ], "widgets": [ { - "id": "date", + "id": "weather", "properties": { - "display24HourFormat": true + "displayInFahrenheit": false, + "location": "Paris" }, "area": { "type": "category", @@ -300,30 +301,29 @@ "y": 0 }, "size": { - "width": 6, + "width": 2, "height": 2 } } }, { - "id": "weather", + "id": "date", "properties": { - "displayInFahrenheit": false, - "location": "Paris" + "display24HourFormat": true }, "area": { - "type": "wrapper", + "type": "category", "properties": { - "id": "default" + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f" } }, "shape": { "location": { - "x": 0, + "x": 2, "y": 0 }, "size": { - "width": 4, + "width": 2, "height": 2 } } diff --git a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts index b6e7fbf64..f56cec96d 100644 --- a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts +++ b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts @@ -43,7 +43,8 @@ export const useGridstack = ( // reference of the gridstack object for modifications after initialization const gridRef = useRef(); // width of the wrapper (updating on page resize) - const { width, height } = useResize(wrapperRef); + const { width } = useResize(wrapperRef); + const root: HTMLHtmlElement = useMemo(() => document.querySelector(':root')!, []); const items = useMemo( () => @@ -127,6 +128,14 @@ export const useGridstack = ( ); }, [isLargerThanSm]); + useEffect(() => { + if (width === 0) return; + const widgetWidth = width / (isLargerThanSm ? 12 : 6); + // widget width is used to define sizes of gridstack items within global.scss + root.style.setProperty('--gridstack-widget-width', widgetWidth.toString()); + gridRef.current?.cellHeight(widgetWidth); + }, [width, isLargerThanSm]); + const onChange = isEditMode ? (changedNode: GridStackNode) => { if (!configName) return; diff --git a/src/hooks/use-resize.ts b/src/hooks/use-resize.ts index 68a2d7a52..ca425277a 100644 --- a/src/hooks/use-resize.ts +++ b/src/hooks/use-resize.ts @@ -19,5 +19,9 @@ export const useResize = (myRef: MutableRefObject) => { }; }, [myRef, handleResize]); + useEffect(() => { + handleResize(); + }, [myRef]); + return { width, height }; }; diff --git a/src/styles/global.scss b/src/styles/global.scss index 4db17a0a3..76121cc0e 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,5 +1,9 @@ @import 'fily-publish-gridstack/dist/gridstack.min.css'; +:root { + --gridstack-widget-width: 64; +} + .grid-stack-placeholder > .placeholder-content { background-color: rgb(248, 249, 250) !important; border-radius: 12px; @@ -19,9 +23,9 @@ } @for $i from 1 to 96 { - .grid-stack>.grid-stack-item[gs-h="#{$i}"] { height: $i * 64 + "px" } - .grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height: $i * 64 + "px" } - .grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: $i * 64 + "px" } + .grid-stack>.grid-stack-item[gs-h="#{$i}"] { height: calc($i * #{var(--gridstack-widget-width)}) } + .grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height: calc($i * #{var(--gridstack-widget-width)}) } + .grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: calc($i * #{var(--gridstack-widget-width)}) } } @for $i from 1 to 13 { @@ -30,7 +34,7 @@ @for $i from 1 to 96 { - .grid-stack>.grid-stack-item[gs-y="#{$i}"] { top: $i * 64 + "px" } + .grid-stack>.grid-stack-item[gs-y="#{$i}"] { top: calc($i * #{var(--gridstack-widget-width)}) } } .grid-stack>.grid-stack-item>.grid-stack-item-content,