From 7505f3c082479f26448d12e0844e28dfc174f26e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Henrik=20=C3=98verland?= Date: Wed, 11 Dec 2024 10:57:52 +0100 Subject: [PATCH 01/12] fix: new default grid/item spacing --- src/components/styles/DashboardContainer.module.css | 6 +++--- src/modules/gridUtil.js | 6 +++--- src/pages/view/styles/ItemGrid.module.css | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/styles/DashboardContainer.module.css b/src/components/styles/DashboardContainer.module.css index 46b16a1ae..b6466e253 100644 --- a/src/components/styles/DashboardContainer.module.css +++ b/src/components/styles/DashboardContainer.module.css @@ -1,8 +1,8 @@ .container { background-color: #f4f6f8; - padding-inline-start: var(--spacers-dp16); - padding-inline-end: var(--spacers-dp16); - padding-block-end: var(--spacers-dp24); + padding-inline-start: var(--spacers-dp8); + padding-inline-end: var(--spacers-dp8); + padding-block-end: var(--spacers-dp12); overflow: auto; } diff --git a/src/modules/gridUtil.js b/src/modules/gridUtil.js index 4958bda73..aa780cbdd 100644 --- a/src/modules/gridUtil.js +++ b/src/modules/gridUtil.js @@ -14,15 +14,15 @@ import { import { isSmallScreen } from './smallScreen.js' export const GRID_COMPACT_TYPE = 'vertical' // vertical | horizonal | null -export const GRID_ROW_HEIGHT_PX = 10 -export const MARGIN_PX = [10, 10] +export const GRID_ROW_HEIGHT_PX = 16 +export const MARGIN_PX = [4, 4] const SM_SCREEN_MIN_ITEM_GRID_HEIGHT = 13 // minimum of ~320px export const SM_SCREEN_GRID_COLUMNS = 1 export const MARGIN_SM_PX = [0, 16] export const GRID_PADDING_PX = [0, 0] // sum of left+right padding of dashboard-wrapper (App.css) -export const DASHBOARD_WRAPPER_LR_MARGIN_PX = 32 +export const DASHBOARD_WRAPPER_LR_MARGIN_PX = 28 // make an assumption about the original item w/h ratio // assumes grid width of ~1200px at time dashboard was created const GRID_COL_WIDTH_PX = 10 diff --git a/src/pages/view/styles/ItemGrid.module.css b/src/pages/view/styles/ItemGrid.module.css index 0a534e8e0..58d2e742f 100644 --- a/src/pages/view/styles/ItemGrid.module.css +++ b/src/pages/view/styles/ItemGrid.module.css @@ -1,3 +1,3 @@ .grid { - margin-block-start: var(--spacers-dp16); + margin-block-start: var(--spacers-dp8); } From 8bcf34d822c449d8b4faf7ae9d445c3d23101649 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Wed, 11 Dec 2024 16:26:17 +0100 Subject: [PATCH 02/12] feat: add hook to assess if a scrollbar is present in the main content area --- src/components/DashboardContainer.js | 41 ++++++++++++++++++- .../styles/DashboardContainer.module.css | 7 +++- 2 files changed, 45 insertions(+), 3 deletions(-) diff --git a/src/components/DashboardContainer.js b/src/components/DashboardContainer.js index f15bb1c49..c886088ff 100644 --- a/src/components/DashboardContainer.js +++ b/src/components/DashboardContainer.js @@ -1,9 +1,40 @@ import cx from 'classnames' import PropTypes from 'prop-types' -import React from 'react' +import React, { + useRef, + useState, + useEffect, + createContext, + useContext, +} from 'react' import classes from './styles/DashboardContainer.module.css' +const HasScrollbarContext = createContext(undefined) + const DashboardContainer = ({ children, covered }) => { + const [hasScrollbar, setHasScrollbar] = useState(false) + const containerRef = useRef(null) + const contentWrapRef = useRef(null) + + useEffect(() => { + const resizeObserver = new ResizeObserver(() => { + const el = containerRef.current + if (!el) { + throw new Error('Could not find scroll container') + } + /* This first condition is true in mobile portrait when there is + * a scrollbar on the outer scroll-container */ + const isNarrowerThanWindow = window.innerWidth > el.offsetWidth + const hasInnerScrollbar = el.scrollHeight > el.clientHeight + setHasScrollbar(isNarrowerThanWindow || hasInnerScrollbar) + }) + resizeObserver.observe(contentWrapRef.current) + + return () => { + resizeObserver.disconnect() + } + }, []) + return (
{ 'dashboard-scroll-container', covered && classes.covered )} + ref={containerRef} data-test="inner-scroll-container" > - {children} +
+ + {children} + +
) } @@ -23,4 +59,5 @@ DashboardContainer.propTypes = { covered: PropTypes.bool, } +export const useContainerHasScrollbar = () => useContext(HasScrollbarContext) export default DashboardContainer diff --git a/src/components/styles/DashboardContainer.module.css b/src/components/styles/DashboardContainer.module.css index b6466e253..eab42f8ae 100644 --- a/src/components/styles/DashboardContainer.module.css +++ b/src/components/styles/DashboardContainer.module.css @@ -5,7 +5,12 @@ padding-block-end: var(--spacers-dp12); overflow: auto; } - +.contentWrap { + overflow: visible; + margin: 0; + padding: 0; + width: 100%; +} @media only screen and (max-height: 480px) { .container { overflow: visible; From f0017cb4ac40ae7a4be9d9c10864b880fcef0e4f Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Wed, 11 Dec 2024 17:00:47 +0100 Subject: [PATCH 03/12] chore: return a width in px instead of a boolean --- src/components/DashboardContainer.js | 18 +++++++++++------ src/modules/detectOsScrollbarWidth.js | 28 +++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 6 deletions(-) create mode 100644 src/modules/detectOsScrollbarWidth.js diff --git a/src/components/DashboardContainer.js b/src/components/DashboardContainer.js index c886088ff..b01f7e8ba 100644 --- a/src/components/DashboardContainer.js +++ b/src/components/DashboardContainer.js @@ -7,12 +7,14 @@ import React, { createContext, useContext, } from 'react' +import { detectOsScrollbarWidth } from '../modules/detectOsScrollbarWidth.js' import classes from './styles/DashboardContainer.module.css' -const HasScrollbarContext = createContext(undefined) +const ContainerScrollbarWidthContext = createContext(0) +const osScrollbarWidth = detectOsScrollbarWidth() const DashboardContainer = ({ children, covered }) => { - const [hasScrollbar, setHasScrollbar] = useState(false) + const [scrollbarWidth, setScrollbarWidth] = useState(0) const containerRef = useRef(null) const contentWrapRef = useRef(null) @@ -26,7 +28,9 @@ const DashboardContainer = ({ children, covered }) => { * a scrollbar on the outer scroll-container */ const isNarrowerThanWindow = window.innerWidth > el.offsetWidth const hasInnerScrollbar = el.scrollHeight > el.clientHeight - setHasScrollbar(isNarrowerThanWindow || hasInnerScrollbar) + setScrollbarWidth( + isNarrowerThanWindow || hasInnerScrollbar ? osScrollbarWidth : 0 + ) }) resizeObserver.observe(contentWrapRef.current) @@ -35,6 +39,7 @@ const DashboardContainer = ({ children, covered }) => { } }, []) + console.log(scrollbarWidth, osScrollbarWidth) return (
{ data-test="inner-scroll-container" >
- + {children} - +
) @@ -59,5 +64,6 @@ DashboardContainer.propTypes = { covered: PropTypes.bool, } -export const useContainerHasScrollbar = () => useContext(HasScrollbarContext) +export const useContainerScrollbarWidth = () => + useContext(ContainerScrollbarWidthContext) export default DashboardContainer diff --git a/src/modules/detectOsScrollbarWidth.js b/src/modules/detectOsScrollbarWidth.js new file mode 100644 index 000000000..2c516c319 --- /dev/null +++ b/src/modules/detectOsScrollbarWidth.js @@ -0,0 +1,28 @@ +const className = '__horizontal-scrollbar-height-test__' +const styles = ` + .${className} { + position: absolute; + top: -9999px; + width: 100px; + height: 100px; + overflow-y: scroll; + } +` + +export function detectOsScrollbarWidth() { + const style = document.createElement('style') + style.innerHTML = styles + + const el = document.createElement('div') + el.classList.add(className) + + document.body.appendChild(style) + document.body.appendChild(el) + + const scrollbarWidth = el.offsetWidth - el.clientWidth + + document.body.removeChild(style) + document.body.removeChild(el) + + return scrollbarWidth +} From 066933c2e66aa6f562281abbbf18b606f5925a87 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Wed, 11 Dec 2024 17:02:34 +0100 Subject: [PATCH 04/12] chore: remove stray console.log --- src/components/DashboardContainer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/DashboardContainer.js b/src/components/DashboardContainer.js index b01f7e8ba..364f50fea 100644 --- a/src/components/DashboardContainer.js +++ b/src/components/DashboardContainer.js @@ -39,7 +39,6 @@ const DashboardContainer = ({ children, covered }) => { } }, []) - console.log(scrollbarWidth, osScrollbarWidth) return (
Date: Thu, 12 Dec 2024 11:11:58 +0100 Subject: [PATCH 05/12] feat: measure container width and use it in ItemGrid --- src/components/DashboardContainer.js | 35 ++++++++------------------- src/modules/detectOsScrollbarWidth.js | 28 --------------------- src/modules/gridUtil.js | 9 +------ src/modules/smallScreen.js | 6 ++--- src/pages/edit/ItemGrid.js | 9 +++---- src/pages/view/ItemGrid.js | 7 +++--- 6 files changed, 21 insertions(+), 73 deletions(-) delete mode 100644 src/modules/detectOsScrollbarWidth.js diff --git a/src/components/DashboardContainer.js b/src/components/DashboardContainer.js index 364f50fea..e765357ee 100644 --- a/src/components/DashboardContainer.js +++ b/src/components/DashboardContainer.js @@ -7,32 +7,19 @@ import React, { createContext, useContext, } from 'react' -import { detectOsScrollbarWidth } from '../modules/detectOsScrollbarWidth.js' import classes from './styles/DashboardContainer.module.css' -const ContainerScrollbarWidthContext = createContext(0) -const osScrollbarWidth = detectOsScrollbarWidth() +const ContainerWidthContext = createContext(0) const DashboardContainer = ({ children, covered }) => { - const [scrollbarWidth, setScrollbarWidth] = useState(0) - const containerRef = useRef(null) - const contentWrapRef = useRef(null) + const [containerWidth, setContainerWidth] = useState(0) + const ref = useRef(null) useEffect(() => { - const resizeObserver = new ResizeObserver(() => { - const el = containerRef.current - if (!el) { - throw new Error('Could not find scroll container') - } - /* This first condition is true in mobile portrait when there is - * a scrollbar on the outer scroll-container */ - const isNarrowerThanWindow = window.innerWidth > el.offsetWidth - const hasInnerScrollbar = el.scrollHeight > el.clientHeight - setScrollbarWidth( - isNarrowerThanWindow || hasInnerScrollbar ? osScrollbarWidth : 0 - ) + const resizeObserver = new ResizeObserver((entries) => { + setContainerWidth(entries[0].contentRect.width) }) - resizeObserver.observe(contentWrapRef.current) + resizeObserver.observe(ref.current) return () => { resizeObserver.disconnect() @@ -46,13 +33,12 @@ const DashboardContainer = ({ children, covered }) => { 'dashboard-scroll-container', covered && classes.covered )} - ref={containerRef} data-test="inner-scroll-container" > -
- +
+ {children} - +
) @@ -63,6 +49,5 @@ DashboardContainer.propTypes = { covered: PropTypes.bool, } -export const useContainerScrollbarWidth = () => - useContext(ContainerScrollbarWidthContext) +export const useContainerWidth = () => useContext(ContainerWidthContext) export default DashboardContainer diff --git a/src/modules/detectOsScrollbarWidth.js b/src/modules/detectOsScrollbarWidth.js deleted file mode 100644 index 2c516c319..000000000 --- a/src/modules/detectOsScrollbarWidth.js +++ /dev/null @@ -1,28 +0,0 @@ -const className = '__horizontal-scrollbar-height-test__' -const styles = ` - .${className} { - position: absolute; - top: -9999px; - width: 100px; - height: 100px; - overflow-y: scroll; - } -` - -export function detectOsScrollbarWidth() { - const style = document.createElement('style') - style.innerHTML = styles - - const el = document.createElement('div') - el.classList.add(className) - - document.body.appendChild(style) - document.body.appendChild(el) - - const scrollbarWidth = el.offsetWidth - el.clientWidth - - document.body.removeChild(style) - document.body.removeChild(el) - - return scrollbarWidth -} diff --git a/src/modules/gridUtil.js b/src/modules/gridUtil.js index aa780cbdd..e1cd72ed0 100644 --- a/src/modules/gridUtil.js +++ b/src/modules/gridUtil.js @@ -21,8 +21,6 @@ const SM_SCREEN_MIN_ITEM_GRID_HEIGHT = 13 // minimum of ~320px export const SM_SCREEN_GRID_COLUMNS = 1 export const MARGIN_SM_PX = [0, 16] export const GRID_PADDING_PX = [0, 0] -// sum of left+right padding of dashboard-wrapper (App.css) -export const DASHBOARD_WRAPPER_LR_MARGIN_PX = 28 // make an assumption about the original item w/h ratio // assumes grid width of ~1200px at time dashboard was created const GRID_COL_WIDTH_PX = 10 @@ -87,15 +85,12 @@ export const withShape = (items = []) => { ) } -export const getGridWidth = (windowWidthPx) => - windowWidthPx - DASHBOARD_WRAPPER_LR_MARGIN_PX - const getGridUnitsForSmFromPx = (hPx) => { const gridUnitHeightPx = GRID_ROW_HEIGHT_PX + MARGIN_SM_PX[1] return Math.round((hPx + MARGIN_SM_PX[1]) / gridUnitHeightPx) } -export const getProportionalHeight = (item, windowWidthPx) => { +export const getProportionalHeight = (item, gridWidthPx) => { // get w/h ratio of the original item const wPx = getItemWHPx(item.w, GRID_COL_WIDTH_PX, MARGIN_PX[0]) const hPx = getItemWHPx(item.h, GRID_ROW_HEIGHT_PX, MARGIN_PX[1]) @@ -105,8 +100,6 @@ export const getProportionalHeight = (item, windowWidthPx) => { return getGridUnitsForSmFromPx(hPx) } - const gridWidthPx = getGridWidth(windowWidthPx) - // get new height in px based on the ratio const newColWidthPx = (gridWidthPx - diff --git a/src/modules/smallScreen.js b/src/modules/smallScreen.js index 6c79c8e84..1c6f9e522 100644 --- a/src/modules/smallScreen.js +++ b/src/modules/smallScreen.js @@ -1,8 +1,6 @@ -import { DASHBOARD_WRAPPER_LR_MARGIN_PX } from './gridUtil.js' - const SMALL_SCREEN_BREAKPOINT = 480 export const isSmallScreen = (width) => width <= SMALL_SCREEN_BREAKPOINT -export const getBreakpoint = () => - SMALL_SCREEN_BREAKPOINT - DASHBOARD_WRAPPER_LR_MARGIN_PX +export const getBreakpoint = (containerWidth) => + SMALL_SCREEN_BREAKPOINT - (window.innerWidth - containerWidth) diff --git a/src/pages/edit/ItemGrid.js b/src/pages/edit/ItemGrid.js index 2e503d04a..01ed70b90 100644 --- a/src/pages/edit/ItemGrid.js +++ b/src/pages/edit/ItemGrid.js @@ -5,10 +5,10 @@ import React, { useState } from 'react' import { Responsive as ResponsiveReactGridLayout } from 'react-grid-layout' import { connect } from 'react-redux' import { acUpdateDashboardItemShapes } from '../../actions/editDashboard.js' +import { useContainerWidth } from '../../components/DashboardContainer.js' import { Item } from '../../components/Item/Item.js' import NoContentMessage from '../../components/NoContentMessage.js' import ProgressiveLoadingContainer from '../../components/ProgressiveLoadingContainer.js' -import { useWindowDimensions } from '../../components/WindowDimensionsProvider.js' import { EDIT } from '../../modules/dashboardModes.js' import { getFirstOfTypes } from '../../modules/getFirstOfType.js' import { getGridItemDomElementClassName } from '../../modules/getGridItemDomElementClassName.js' @@ -19,7 +19,6 @@ import { GRID_PADDING_PX, GRID_COLUMNS, hasShape, - getGridWidth, hasLayout, } from '../../modules/gridUtil.js' import { getBreakpoint } from '../../modules/smallScreen.js' @@ -37,8 +36,8 @@ const EditItemGrid = ({ hasLayout, hideGrid, }) => { + const containerWidth = useContainerWidth() const [gridWidth, setGridWidth] = useState({ width: 0 }) - const { width } = useWindowDimensions() const firstOfTypes = getFirstOfTypes(dashboardItems) const onLayoutChange = (newLayout) => { @@ -90,10 +89,10 @@ const EditItemGrid = ({ { const { width } = useWindowDimensions() + const containerWidth = useContainerWidth() const [expandedItems, setExpandedItems] = useState({}) const [displayItems, setDisplayItems] = useState(dashboardItems) const [layoutSm, setLayoutSm] = useState([]) @@ -134,10 +135,10 @@ const ResponsiveItemGrid = ({ dashboardId, dashboardItems }) => { Date: Thu, 12 Dec 2024 14:09:41 +0100 Subject: [PATCH 06/12] chore: fix failing tests --- config/testSetup.js | 9 +++++++++ package.json | 1 + src/modules/__tests__/gridUtil.spec.js | 16 ++++++++-------- .../__snapshots__/EditDashboard.spec.js.snap | 14 +++++++++----- .../__snapshots__/NewDashboard.spec.js.snap | 14 +++++++++----- .../__snapshots__/ViewDashboard.spec.js.snap | 17 +++++++++-------- 6 files changed, 45 insertions(+), 26 deletions(-) create mode 100644 config/testSetup.js diff --git a/config/testSetup.js b/config/testSetup.js new file mode 100644 index 000000000..f7aba1373 --- /dev/null +++ b/config/testSetup.js @@ -0,0 +1,9 @@ +import { configure } from '@testing-library/dom' +import '@testing-library/jest-dom' +import ResizeObserver from 'resize-observer-polyfill' + +global.ResizeObserver = ResizeObserver + +configure({ + testIdAttribute: 'data-test', +}) diff --git a/package.json b/package.json index 8a4846ff1..131892cf7 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "patch-package": "^7", "postinstall-postinstall": "^2.1.0", "redux-mock-store": "^1.5.4", + "resize-observer-polyfill": "^1.5.1", "semantic-release": "^20", "start-server-and-test": "^1.14.0" }, diff --git a/src/modules/__tests__/gridUtil.spec.js b/src/modules/__tests__/gridUtil.spec.js index 00422220b..960b9b838 100644 --- a/src/modules/__tests__/gridUtil.spec.js +++ b/src/modules/__tests__/gridUtil.spec.js @@ -10,7 +10,7 @@ import { describe('withShape', () => { it('returns objects with new properties (x, y, w, h)', () => { const items = withShape([{}]) - expect(items).toMatchObject([{ x: 0, y: 0, w: 29, h: 20 }]) + expect(items).toMatchObject([{ x: 0, y: 0, w: 29, h: 32 }]) }) it('returns same objects', () => { @@ -47,17 +47,17 @@ describe('hasShape', () => { describe('getProportionalHeight', () => { it('returns the proportional height in grid units for 480px', () => { const item = { w: 20, h: 20, type: 'CHART' } - expect(getProportionalHeight(item, 480)).toEqual(18) + expect(getProportionalHeight(item, 480)).toEqual(22) }) it('returns the proportional height in grid units for 360px', () => { const item = { w: 20, h: 20, type: 'CHART' } - expect(getProportionalHeight(item, 360)).toEqual(13) + expect(getProportionalHeight(item, 360)).toEqual(17) }) it('returns the initial height for non vis type', () => { const item = { w: 20, h: 10, type: 'TEXT' } - expect(getProportionalHeight(item, 360)).toEqual(8) + expect(getProportionalHeight(item, 360)).toEqual(7) }) }) @@ -93,7 +93,7 @@ describe('getSmallLayout', () => { x: 0, y: 2, w: SM_SCREEN_GRID_COLUMNS, - h: 38, + h: 47, type: 'CHART', i: 'B', }, @@ -101,7 +101,7 @@ describe('getSmallLayout', () => { x: 0, y: 3, w: SM_SCREEN_GRID_COLUMNS, - h: 36, + h: 44, type: 'CHART', i: 'E', }, @@ -109,7 +109,7 @@ describe('getSmallLayout', () => { x: 0, y: 4, w: SM_SCREEN_GRID_COLUMNS, - h: 32, + h: 39, type: 'CHART', i: 'D', }, @@ -117,7 +117,7 @@ describe('getSmallLayout', () => { x: 0, y: 5, w: SM_SCREEN_GRID_COLUMNS, - h: 8, + h: 7, type: 'TEXT', i: 'F', }, diff --git a/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap index 8d9c3b7a6..4b7e46369 100644 --- a/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap +++ b/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap @@ -20,11 +20,15 @@ exports[`EditDashboard renders dashboard 1`] = ` class="container dashboard-scroll-container" data-test="inner-scroll-container" > -
- TitleBar -
-
- ItemGrid +
+
+ TitleBar +
+
+ ItemGrid +
diff --git a/src/pages/edit/__tests__/__snapshots__/NewDashboard.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/NewDashboard.spec.js.snap index 2e27c8ef3..b77e35642 100644 --- a/src/pages/edit/__tests__/__snapshots__/NewDashboard.spec.js.snap +++ b/src/pages/edit/__tests__/__snapshots__/NewDashboard.spec.js.snap @@ -15,11 +15,15 @@ exports[`NewDashboard renders dashboard 1`] = ` class="container dashboard-scroll-container" data-test="inner-scroll-container" > -
- TitleBar -
-
- ItemGrid +
+
+ TitleBar +
+
+ ItemGrid +
diff --git a/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap b/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap index 0f1515cf9..d7de62831 100644 --- a/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap +++ b/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap @@ -14,14 +14,15 @@ exports[`ViewDashboard renders dashboard 1`] = ` class="container dashboard-scroll-container" data-test="inner-scroll-container" > -
- TitleBar -
-
- MockFilterBar -
-
- MockItemGrid +
+
+ MockFilterBar +
+
+ MockItemGrid +
From 69d0923feb9ce38d32adf2bdd6d50f05b87f9288 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Thu, 12 Dec 2024 14:13:52 +0100 Subject: [PATCH 07/12] chore: change width to inline-size --- src/components/styles/DashboardContainer.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/styles/DashboardContainer.module.css b/src/components/styles/DashboardContainer.module.css index eab42f8ae..0fd769712 100644 --- a/src/components/styles/DashboardContainer.module.css +++ b/src/components/styles/DashboardContainer.module.css @@ -9,7 +9,7 @@ overflow: visible; margin: 0; padding: 0; - width: 100%; + inline-size: 100%; } @media only screen and (max-height: 480px) { .container { From c4b8117e4f29f11e7b2d6fbedf2b04ef38de7f63 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Mon, 16 Dec 2024 17:20:26 +0100 Subject: [PATCH 08/12] chore: remove redundant covered prop from DashboardContainer --- src/components/DashboardContainer.js | 9 ++------- src/components/styles/DashboardContainer.module.css | 6 ------ 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/src/components/DashboardContainer.js b/src/components/DashboardContainer.js index e765357ee..1784e27ac 100644 --- a/src/components/DashboardContainer.js +++ b/src/components/DashboardContainer.js @@ -11,7 +11,7 @@ import classes from './styles/DashboardContainer.module.css' const ContainerWidthContext = createContext(0) -const DashboardContainer = ({ children, covered }) => { +const DashboardContainer = ({ children }) => { const [containerWidth, setContainerWidth] = useState(0) const ref = useRef(null) @@ -28,11 +28,7 @@ const DashboardContainer = ({ children, covered }) => { return (
@@ -46,7 +42,6 @@ const DashboardContainer = ({ children, covered }) => { DashboardContainer.propTypes = { children: PropTypes.node, - covered: PropTypes.bool, } export const useContainerWidth = () => useContext(ContainerWidthContext) diff --git a/src/components/styles/DashboardContainer.module.css b/src/components/styles/DashboardContainer.module.css index 0fd769712..ffcbffc77 100644 --- a/src/components/styles/DashboardContainer.module.css +++ b/src/components/styles/DashboardContainer.module.css @@ -16,9 +16,3 @@ overflow: visible; } } - -@media only screen and (max-height: 480px), only screen and (max-width: 480px) { - .covered { - overflow: hidden; - } -} From 8aac27749906027838df0dc68cacdd15ad241e96 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Mon, 6 Jan 2025 11:05:18 +0100 Subject: [PATCH 09/12] chore: fix lint error --- src/pages/view/ItemGrid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/view/ItemGrid.js b/src/pages/view/ItemGrid.js index b8f570fd2..5e7ccaef9 100644 --- a/src/pages/view/ItemGrid.js +++ b/src/pages/view/ItemGrid.js @@ -5,8 +5,8 @@ import cx from 'classnames' import PropTypes from 'prop-types' import React, { useState, useEffect, useRef } from 'react' import { Responsive as ResponsiveReactGridLayout } from 'react-grid-layout' -import { useContainerWidth } from '../../components/DashboardContainer.js' import { useSelector } from 'react-redux' +import { useContainerWidth } from '../../components/DashboardContainer.js' import { Item } from '../../components/Item/Item.js' import NoContentMessage from '../../components/NoContentMessage.js' import ProgressiveLoadingContainer from '../../components/ProgressiveLoadingContainer.js' From 49b1bc71f166291b32c18b89c6bc2fa18b02c044 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Henrik=20=C3=98verland?= Date: Mon, 6 Jan 2025 12:26:23 +0100 Subject: [PATCH 10/12] fix: align col/row h/w, align small/large margin --- src/modules/gridUtil.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules/gridUtil.js b/src/modules/gridUtil.js index e1cd72ed0..8a5ffe46c 100644 --- a/src/modules/gridUtil.js +++ b/src/modules/gridUtil.js @@ -19,11 +19,11 @@ export const MARGIN_PX = [4, 4] const SM_SCREEN_MIN_ITEM_GRID_HEIGHT = 13 // minimum of ~320px export const SM_SCREEN_GRID_COLUMNS = 1 -export const MARGIN_SM_PX = [0, 16] +export const MARGIN_SM_PX = [4, 4] export const GRID_PADDING_PX = [0, 0] // make an assumption about the original item w/h ratio // assumes grid width of ~1200px at time dashboard was created -const GRID_COL_WIDTH_PX = 10 +const GRID_COL_WIDTH_PX = 16 export const GRID_COLUMNS = 60 // Dimensions for getShape From 0193dca5bb882f33b37637b306c15f60d90e45c8 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Mon, 6 Jan 2025 13:04:33 +0100 Subject: [PATCH 11/12] chore: adjust expected values in gridUtil spec to match new implementation --- src/modules/__tests__/gridUtil.spec.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/modules/__tests__/gridUtil.spec.js b/src/modules/__tests__/gridUtil.spec.js index 960b9b838..b19daee8a 100644 --- a/src/modules/__tests__/gridUtil.spec.js +++ b/src/modules/__tests__/gridUtil.spec.js @@ -47,17 +47,17 @@ describe('hasShape', () => { describe('getProportionalHeight', () => { it('returns the proportional height in grid units for 480px', () => { const item = { w: 20, h: 20, type: 'CHART' } - expect(getProportionalHeight(item, 480)).toEqual(22) + expect(getProportionalHeight(item, 480)).toEqual(24) }) it('returns the proportional height in grid units for 360px', () => { const item = { w: 20, h: 20, type: 'CHART' } - expect(getProportionalHeight(item, 360)).toEqual(17) + expect(getProportionalHeight(item, 360)).toEqual(18) }) it('returns the initial height for non vis type', () => { const item = { w: 20, h: 10, type: 'TEXT' } - expect(getProportionalHeight(item, 360)).toEqual(7) + expect(getProportionalHeight(item, 360)).toEqual(10) }) }) @@ -85,7 +85,7 @@ describe('getSmallLayout', () => { x: 0, y: 1, w: SM_SCREEN_GRID_COLUMNS, - h: 13, + h: 14, type: 'CHART', i: 'C', }, @@ -93,7 +93,7 @@ describe('getSmallLayout', () => { x: 0, y: 2, w: SM_SCREEN_GRID_COLUMNS, - h: 47, + h: 52, type: 'CHART', i: 'B', }, @@ -101,7 +101,7 @@ describe('getSmallLayout', () => { x: 0, y: 3, w: SM_SCREEN_GRID_COLUMNS, - h: 44, + h: 49, type: 'CHART', i: 'E', }, @@ -109,7 +109,7 @@ describe('getSmallLayout', () => { x: 0, y: 4, w: SM_SCREEN_GRID_COLUMNS, - h: 39, + h: 43, type: 'CHART', i: 'D', }, @@ -117,7 +117,7 @@ describe('getSmallLayout', () => { x: 0, y: 5, w: SM_SCREEN_GRID_COLUMNS, - h: 7, + h: 10, type: 'TEXT', i: 'F', }, From 68ecbc060217f06642ce5d89c1dc49969e22f38e Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Tue, 7 Jan 2025 15:55:41 +0100 Subject: [PATCH 12/12] fix: use background-color grey200 everywhere --- src/pages/print/styles/PrintDashboard.module.css | 2 +- src/pages/print/styles/PrintLayoutDashboard.module.css | 2 +- src/pages/print/styles/print.css | 2 +- src/pages/view/styles/ItemGrid.module.css | 3 ++- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/print/styles/PrintDashboard.module.css b/src/pages/print/styles/PrintDashboard.module.css index b6baf7955..5d8d2fafc 100644 --- a/src/pages/print/styles/PrintDashboard.module.css +++ b/src/pages/print/styles/PrintDashboard.module.css @@ -5,7 +5,7 @@ } .wrapper { - background-color: #f4f6f8; + background-color: var(--colors-grey200); padding-inline-start: 44px; overflow-y: auto; } diff --git a/src/pages/print/styles/PrintLayoutDashboard.module.css b/src/pages/print/styles/PrintLayoutDashboard.module.css index a6653b866..25ea28339 100644 --- a/src/pages/print/styles/PrintLayoutDashboard.module.css +++ b/src/pages/print/styles/PrintLayoutDashboard.module.css @@ -5,7 +5,7 @@ } .wrapper { - background-color: #f4f6f8; + background-color: var(--colors-grey200); padding-inline-start: 44px; overflow-y: auto; } diff --git a/src/pages/print/styles/print.css b/src/pages/print/styles/print.css index ef3094d8e..c9c585179 100644 --- a/src/pages/print/styles/print.css +++ b/src/pages/print/styles/print.css @@ -15,7 +15,7 @@ header.hidden { inline-size: calc(var(--a4-landscape-width-px) + 18px) !important; border: none !important; box-shadow: none !important; - background-color: #f4f6f8; + background-color: var(--colors-grey200); } .react-grid-item.PAGEBREAK::before { diff --git a/src/pages/view/styles/ItemGrid.module.css b/src/pages/view/styles/ItemGrid.module.css index ffe48c4ac..d2309f0cf 100644 --- a/src/pages/view/styles/ItemGrid.module.css +++ b/src/pages/view/styles/ItemGrid.module.css @@ -1,9 +1,10 @@ .slideshowContainer { - background-color: #f4f6f8; + background-color: var(--colors-grey200); block-size: 100vh; } .grid { margin-block-start: var(--spacers-dp8); + background-color: var(--colors-grey200); } /* react-grid-layout uses width and height instead