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

feat: add board (#15)

Browse Source 
* wip: Add gridstack board
* wip: Centralize board pages, Add board settings page
* fix: remove cyclic dependency and rename widget-sort to kind
* improve: Add header actions as parallel route
* feat: add item select modal, add category edit modal,
* feat: add edit item modal
* feat: add remove item modal
* wip: add category actions
* feat: add saving of board, wip: add app widget
* Merge branch 'main' into add-board
* chore: update turbo dependencies
* chore: update mantine dependencies
* chore: fix typescript errors, lint and format
* feat: add confirm modal to category removal, move items of removed category to above wrapper
* feat: remove app widget to continue in another branch
* feat: add loading spinner until board is initialized
* fix: issue with cellheight of gridstack items
* feat: add translations for board
* fix: issue with translation for settings page
* chore: address pull request feedback
This commit is contained in:
Meier Lukas
2024-02-03 22:26:12 +01:00
committed by GitHub
parent cfd1c14034
commit 9d520874f4
88 changed files with 3431 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
apps/nextjs/src/styles/gridstack.scss Normal file
View File

@@ -0,0 +1,124 @@
@import "fily-publish-gridstack/dist/gridstack.min.css";
:root {
--gridstack-widget-width: 64;
--gridstack-column-count: 12;
}
.grid-stack-placeholder > .placeholder-content {
background-color: rgb(248, 249, 250) !important;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
.grid-stack-placeholder > .placeholder-content {
background-color: rgba(255, 255, 255, 0.05) !important;
}
}
// Styling for grid-stack main area
@for $i from 1 to 96 {
.grid-stack > .grid-stack-item[gs-w="#{$i}"] {
width: calc(100% / #{var(--gridstack-column-count)} * #{$i});
}
.grid-stack > .grid-stack-item[gs-min-w="#{$i}"] {
min-width: calc(100% / #{var(--gridstack-column-count)} * #{$i});
}
.grid-stack > .grid-stack-item[gs-max-w="#{$i}"] {
max-width: calc(100% / #{var(--gridstack-column-count)} * #{$i});
}
}
@for $i from 1 to 96 {
.grid-stack > .grid-stack-item[gs-h="#{$i}"] {
height: calc(#{$i}px * #{var(--gridstack-widget-width)});
}
.grid-stack > .grid-stack-item[gs-min-h="#{$i}"] {
min-height: calc(#{$i}px * #{var(--gridstack-widget-width)});
}
.grid-stack > .grid-stack-item[gs-max-h="#{$i}"] {
max-height: calc(#{$i}px * #{var(--gridstack-widget-width)});
}
}
@for $i from 1 to 96 {
.grid-stack > .grid-stack-item[gs-x="#{$i}"] {
left: calc(100% / #{var(--gridstack-column-count)} * #{$i});
}
}
@for $i from 1 to 96 {
.grid-stack > .grid-stack-item[gs-y="#{$i}"] {
top: calc(#{$i}px * #{var(--gridstack-widget-width)});
}
}
.grid-stack > .grid-stack-item {
min-width: #{var(--gridstack-widget-width)};
}
// Styling for sidebar grid-stack elements
@for $i from 1 to 96 {
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-w="#{$i}"] {
width: 128px * $i;
}
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-min-w="#{$i}"] {
min-width: 128px * $i;
}
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-max-w="#{$i}"] {
max-width: 128px * $i;
}
}
@for $i from 1 to 96 {
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-h="#{$i}"] {
height: 128px * $i;
}
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-min-h="#{$i}"] {
min-height: 128px * $i;
}
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-max-h="#{$i}"] {
max-height: 128px * $i;
}
}
@for $i from 1 to 3 {
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-x="#{$i}"] {
left: 128px * $i;
}
}
@for $i from 1 to 96 {
.grid-stack.grid-stack-sidebar > .grid-stack-item[gs-y="#{$i}"] {
top: 128px * $i;
}
}
.grid-stack.grid-stack-sidebar > .grid-stack-item {
min-width: 128px;
}
// General gridstack styling
.grid-stack > .grid-stack-item > .grid-stack-item-content,
.grid-stack > .grid-stack-item > .placeholder-content {
inset: 10px;
}
.grid-stack > .grid-stack-item > .ui-resizable-se {
bottom: 10px;
right: 10px;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
overflow-y: auto;
}
.grid-stack.grid-stack-animate {
transition: none;
}
.gridstack-empty-wrapper {
height: 0px;
min-height: 0px !important;
}