Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 15:35:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Made aspect ratio 1 to 1

Browse Source
This commit is contained in:
Meierschlumpf
2023-01-03 16:40:15 +01:00
parent c963760717
commit afe3e2fc39
4 changed files with 169 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts
View File

@@ -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;