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

💄 Large screen gridstack max value to 32 and sidebar gridstack over 13 bug fix (#1339)

Browse Source 
* 💄 Large screen gridstack max value to 32

* 🐛 Fix sidebar bug
This commit is contained in:
Tagaishi
2023-09-01 17:16:37 +02:00
committed by GitHub
parent eb3bbfb025
commit ad61b155b8
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Settings/Customization/Layout/GridstackConfiguration.tsx
View File

@@ -78,7 +78,7 @@ export const GridstackConfiguration = () => {
pixels: GridstackBreakpoints.large, pixels: GridstackBreakpoints.large,
})} })}
> >
<Slider min={5} max={20} mt="xs" {...form.getInputProps('columnCountLarge')} /> <Slider min={5} max={32} mt="xs" {...form.getInputProps('columnCountLarge')} />
</Input.Wrapper> </Input.Wrapper>
{form.isDirty() && ( {form.isDirty() && (
<Alert variant="light" color="yellow" title="Unsaved changes" my="md"> <Alert variant="light" color="yellow" title="Unsaved changes" my="md">

6
src/styles/global.scss
View File

@@ -18,7 +18,7 @@
} }
// Styling for grid-stack main area // Styling for grid-stack main area
@for $i from 1 to 21 { @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-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-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}) } .grid-stack>.grid-stack-item[gs-max-w="#{$i}"] { max-width: calc(100% / #{var(--gridstack-column-count)} * #{$i}) }
@@ -30,7 +30,7 @@
.grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-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 21 { @for $i from 1 to 96 {
.grid-stack>.grid-stack-item[gs-x="#{$i}"] { left: calc(100% / #{var(--gridstack-column-count)} * #{$i}) } .grid-stack>.grid-stack-item[gs-x="#{$i}"] { left: calc(100% / #{var(--gridstack-column-count)} * #{$i}) }
} }
@@ -44,7 +44,7 @@
} }
// Styling for sidebar grid-stack elements // Styling for sidebar grid-stack elements
@for $i from 1 to 3 { @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-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-min-w="#{$i}"] { min-width: 128px * $i }
.grid-stack.grid-stack-sidebar>.grid-stack-item[gs-max-w="#{$i}"] { max-width: 128px * $i } .grid-stack.grid-stack-sidebar>.grid-stack-item[gs-max-w="#{$i}"] { max-width: 128px * $i }