jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add dynamic section (#842)

Browse Source 
* chore: add parent_section_id and change position to x and y_offset for sqlite section table

* chore: rename existing positions to x_offset and y_offset

* chore: add related mysql migration

* chore: add missing height and width to section table

* fix: missing width and height in migration copy script

* fix: typecheck issues

* fix: test not working caused by unsimilar schemas

* wip: add dynamic section

* refactor: improve structure of gridstack sections

* feat: add rendering of dynamic sections

* feat: add saving of moved sections

* wip: add static row count, restrict min-width and height

* chore: address pull request feedback

* fix: format issues

* fix: size calculation within dynamic sections

* fix: on resize not called when min width or height is reached

* fix: size of items while dragging is to big

* chore: temporarly remove migration files

* chore: readd migrations

* fix: format and deepsource issues

* chore: remove db_dev.sqlite file

* chore: add *.sqlite to .gitignore

* chore: address pull request feedback

* feat: add dynamic section actions for adding and removing them
This commit is contained in:
Meier Lukas
2024-08-10 12:37:16 +02:00
committed by GitHub
parent a9d87e4e6b
commit 9ce172e78a
38 changed files with 3765 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/nextjs/src/styles/gridstack.scss
View File

@@ -1,8 +1,9 @@
@import "@homarr/gridstack/dist/gridstack.min.css";
:root {
--gridstack-widget-width: 64;
--gridstack-column-count: 12;
--gridstack-row-count: 1;
--gridstack-cell-size: 0;
}
.grid-stack-placeholder > .placeholder-content {
@@ -20,7 +21,23 @@
// Define min size for gridstack items
.grid-stack > .grid-stack-item {
min-width: calc(100% / var(--gridstack-column-count));
min-height: calc(1px * var(--gridstack-widget-width));
min-height: calc(100% / var(--gridstack-row-count));
}
.grid-stack > .grid-stack-item.ui-draggable-dragging {
min-width: calc(var(--gridstack-cell-size) * 1px) !important;
min-height: calc(var(--gridstack-cell-size) * 1px) !important;
}
// Define fix size while dragging
@for $i from 1 to 96 {
.grid-stack > .grid-stack-item.ui-draggable-dragging[gs-w="#{$i}"] {
width: calc(var(--gridstack-cell-size) * #{$i} * 1px) !important;
}
.grid-stack > .grid-stack-item.ui-draggable-dragging[gs-h="#{$i}"] {
height: calc(var(--gridstack-cell-size) * #{$i} * 1px) !important;
}
}
// Styling for grid-stack main area
@@ -38,13 +55,13 @@
@for $i from 1 to 96 {
.grid-stack > .grid-stack-item[gs-h="#{$i}"] {
height: calc(#{$i}px * #{var(--gridstack-widget-width)});
height: calc(100% / var(--gridstack-row-count) * #{$i});
}
.grid-stack > .grid-stack-item[gs-min-h="#{$i}"] {
min-height: calc(#{$i}px * #{var(--gridstack-widget-width)});
min-height: calc(100% / var(--gridstack-row-count) * #{$i});
}
.grid-stack > .grid-stack-item[gs-max-h="#{$i}"] {
max-height: calc(#{$i}px * #{var(--gridstack-widget-width)});
max-height: calc(100% / var(--gridstack-row-count) * #{$i});
}
}
@@ -56,10 +73,14 @@
@for $i from 1 to 96 {
.grid-stack > .grid-stack-item[gs-y="#{$i}"] {
top: calc(#{$i}px * #{var(--gridstack-widget-width)});
top: calc(100% / var(--gridstack-row-count) * #{$i});
}
}
.grid-stack[data-kind="dynamic"] {
height: 100% !important;
}
// General gridstack styling
.grid-stack > .grid-stack-item > .grid-stack-item-content,
.grid-stack > .grid-stack-item > .placeholder-content {