🐛 Made aspect ratio 1 to 1

2025-11-10 15:35:55 +01:00 · 2023-01-03 16:40:15 +01:00
parent c963760717
commit afe3e2fc39
4 changed files with 169 additions and 152 deletions
--- 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
        }
      }
--- 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<GridStack>();
  // 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;
--- a/src/hooks/use-resize.ts
+++ b/src/hooks/use-resize.ts
@@ -19,5 +19,9 @@ export const useResize = (myRef: MutableRefObject<HTMLDivElement | null>) => {
    };
  }, [myRef, handleResize]);

+  useEffect(() => {
+    handleResize();
+  }, [myRef]);
+
  return { width, height };
 };
--- 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,