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

💄 Adjust GridStack sizes

Browse Source 
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
Manuel Ruwe
2023-01-02 15:45:51 +01:00
parent 2a892d267f
commit 3ba90c87c6
3 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts
View File

@@ -19,7 +19,7 @@ export const initializeGridstack = (
) => { ) => {
if (!wrapperRef.current) return; if (!wrapperRef.current) return;
// calculates the currently available count of columns // calculates the currently available count of columns
const columnCount = areaType === 'sidebar' ? 4 : Math.floor(wrapperRef.current.offsetWidth / 64); const columnCount = areaType === 'sidebar' ? 4 : 12;
const minRow = areaType !== 'sidebar' ? 1 : Math.floor(wrapperRef.current.offsetHeight / 64); const minRow = areaType !== 'sidebar' ? 1 : Math.floor(wrapperRef.current.offsetHeight / 64);
// initialize gridstack // initialize gridstack
const newGrid = gridRef; const newGrid = gridRef;

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

@@ -78,7 +78,7 @@ export const useGridstack = (
// change column count depending on the width and the gridRef // change column count depending on the width and the gridRef
useEffect(() => { useEffect(() => {
if (areaType === 'sidebar') return; if (areaType === 'sidebar') return;
gridRef.current?.column(Math.floor(width / 64), 'moveScale'); gridRef.current?.column(12);
}, [gridRef, width]); }, [gridRef, width]);
const onChange = isEditMode const onChange = isEditMode

32
src/styles/global.scss
View File

@@ -13,15 +13,24 @@
} }
@for $i from 1 to 13 { @for $i from 1 to 13 {
.grid-stack>.grid-stack-item[gs-w="#{$i}"] { width: $i * 64px } .grid-stack>.grid-stack-item[gs-w="#{$i}"] { width: ($i / 12) * 100 + "%" }
.grid-stack>.grid-stack-item[gs-min-w="#{$i}"] { min-width: $i * 64px } .grid-stack>.grid-stack-item[gs-min-w="#{$i}"] { min-width: ($i / 12) * 100 + "%" }
.grid-stack>.grid-stack-item[gs-max-w="#{$i}"] { max-width: $i * 64px } .grid-stack>.grid-stack-item[gs-max-w="#{$i}"] { max-width: ($i / 12) * 100 + "%" }
} }
@for $i from 1 to 13 { @for $i from 1 to 13 {
.grid-stack>.grid-stack-item[gs-h="#{$i}"] { height: $i * 64px; } .grid-stack>.grid-stack-item[gs-h="#{$i}"] { height: ($i / 12) * 100 + "%" }
.grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height: $i * 64px; } .grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height: ($i / 12) * 100 + "%" }
.grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: $i * 64px; } .grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: ($i / 12) * 100 + "%" }
}
@for $i from 1 to 96 {
.grid-stack>.grid-stack-item[gs-x="#{$i}"] { left: ($i / 12) * 100 + "%" }
}
@for $i from 1 to 96 {
.grid-stack>.grid-stack-item[gs-y="#{$i}"] { top: ($i / 12) * 100 + "%" }
} }
.grid-stack>.grid-stack-item>.grid-stack-item-content, .grid-stack>.grid-stack-item>.grid-stack-item-content,
@@ -35,16 +44,7 @@
} }
.grid-stack>.grid-stack-item { .grid-stack>.grid-stack-item {
min-width: 64px; min-width: (1/12)+'%';
}
@for $i from 1 to 96 {
.grid-stack>.grid-stack-item[gs-x="#{$i}"] { left: $i * 64px }
}
@for $i from 1 to 96 {
.grid-stack>.grid-stack-item[gs-y="#{$i}"] { top: $i * 64px }
} }
.grid-stack > .grid-stack-item > .grid-stack-item-content { .grid-stack > .grid-stack-item > .grid-stack-item-content {