Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-03-06 20:30:57 +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;

4
src/hooks/use-resize.ts
View File

@@ -19,5 +19,9 @@ export const useResize = (myRef: MutableRefObject<HTMLDivElement | null>) => {
};
}, [myRef, handleResize]);
useEffect(() => {
handleResize();
}, [myRef]);
return { width, height };
};

12
src/styles/global.scss
View File

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