From 58e6bc3483fb0690093a12236786b2755f00d4d4 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 18 Mar 2021 08:48:55 +0100 Subject: [PATCH 1/6] fix: actual width is 1123px and use single constant --- src/components/App.css | 5 +++++ .../Dashboard/styles/PrintActionsBar.module.css | 2 +- src/components/Dashboard/styles/PrintDashboard.module.css | 2 +- src/components/Dashboard/styles/PrintInfo.module.css | 2 +- .../Dashboard/styles/PrintLayoutDashboard.module.css | 2 +- src/components/Dashboard/styles/print.css | 4 ++-- src/components/ItemGrid/StaticGrid.js | 8 ++++++-- src/modules/printUtils.js | 6 ------ 8 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/components/App.css b/src/components/App.css index f0b7e8cab..57650cf87 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -20,6 +20,11 @@ --item-header-margin-top: 8px; --item-header-margin-bottom: 8px; --item-content-padding: 4px; + + /* print variables */ + /* for A4 landscape (297x210mm) */ + /* (29.7 /2.54) * 96 pixels/inch = 1123px */ + --a4-landscape-width-px: 1123px; } body { diff --git a/src/components/Dashboard/styles/PrintActionsBar.module.css b/src/components/Dashboard/styles/PrintActionsBar.module.css index 64b7d0902..5699ea710 100644 --- a/src/components/Dashboard/styles/PrintActionsBar.module.css +++ b/src/components/Dashboard/styles/PrintActionsBar.module.css @@ -11,7 +11,7 @@ display: flex; justify-content: space-between; width: auto; - max-width: 1102px; + max-width: var(--a4-landscape-width-px); } .link { diff --git a/src/components/Dashboard/styles/PrintDashboard.module.css b/src/components/Dashboard/styles/PrintDashboard.module.css index b5d4a71e7..9e15571e7 100644 --- a/src/components/Dashboard/styles/PrintDashboard.module.css +++ b/src/components/Dashboard/styles/PrintDashboard.module.css @@ -16,7 +16,7 @@ border-radius: 3px; box-shadow: 0px 0px 3px 0px var(--colors-grey500); margin-bottom: 50px; - width: 1102px; + width: var(--a4-landscape-width-px); } @media only screen and (max-width: 480px) { diff --git a/src/components/Dashboard/styles/PrintInfo.module.css b/src/components/Dashboard/styles/PrintInfo.module.css index 22578dbe8..e808fb812 100644 --- a/src/components/Dashboard/styles/PrintInfo.module.css +++ b/src/components/Dashboard/styles/PrintInfo.module.css @@ -20,7 +20,7 @@ } .divider { - width: 1102px; + width: var(--a4-landscape-width-px);; height: 1px; margin: var(--spacers-dp16) 0; border: 0; diff --git a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css index 4a7c3b91b..f562da2f8 100644 --- a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css +++ b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css @@ -21,7 +21,7 @@ border-radius: 3px; box-shadow: 0px 0px 3px 0px var(--colors-grey500); margin-bottom: 50px; - width: 1102px; + width: var(--a4-landscape-width-px); } @media only screen and (max-width: 480px) { diff --git a/src/components/Dashboard/styles/print.css b/src/components/Dashboard/styles/print.css index 695056dce..7de04bb08 100644 --- a/src/components/Dashboard/styles/print.css +++ b/src/components/Dashboard/styles/print.css @@ -27,7 +27,7 @@ header.hidden { position: absolute; top: -3px; left: 3px; - width: 1102px; + width: var(--a4-landscape-width-px); height: 3px; box-shadow: 0px 0px 3px 0px #6e7a8a; } @@ -37,7 +37,7 @@ header.hidden { position: absolute; bottom: -3px; left: 3px; - width: 1102px; + width: var(--a4-landscape-width-px); height: 3px; box-shadow: 0px 0px 3px 0px #6e7a8a; } diff --git a/src/components/ItemGrid/StaticGrid.js b/src/components/ItemGrid/StaticGrid.js index 0a1dbb92f..3a49ec9de 100644 --- a/src/components/ItemGrid/StaticGrid.js +++ b/src/components/ItemGrid/StaticGrid.js @@ -12,7 +12,6 @@ import { MARGIN_PX, GRID_COLUMNS, } from '../../modules/gridUtil' -import { A4_LANDSCAPE_WIDTH_PX } from '../../modules/printUtils' import 'react-grid-layout/css/styles.css' import 'react-resizable/css/styles.css' @@ -34,6 +33,11 @@ const StaticGrid = ({ ) } + const style = window.getComputedStyle(document.documentElement) + const printWidthPx = parseInt( + style.getPropertyValue('--a4-landscape-width-px').replace('px', '') + ) + return ( <> {isLoading ? ( @@ -47,7 +51,7 @@ const StaticGrid = ({ margin={MARGIN_PX} cols={GRID_COLUMNS} rowHeight={GRID_ROW_HEIGHT_PX} - width={A4_LANDSCAPE_WIDTH_PX} + width={printWidthPx - 20} compactType={GRID_COMPACT_TYPE} isDraggable={false} isResizable={false} diff --git a/src/modules/printUtils.js b/src/modules/printUtils.js index c385a8422..af8e4f6b5 100644 --- a/src/modules/printUtils.js +++ b/src/modules/printUtils.js @@ -2,12 +2,6 @@ import sortBy from 'lodash/sortBy' import { orArray } from './util' import { itemTypeMap } from './itemTypes' -// for A4 landscape (297x210mm) -// 794 px = (21cm / 2.54) * 96 pixels/inch -// 1122 px = 29.7 /2.54 * 96 pixels/inch -// const a4LandscapeHeightPx = 794 -export const A4_LANDSCAPE_WIDTH_PX = 1102 - export const getTransformYPx = elStyle => { if (!elStyle || !elStyle.transform) { return null From 783a6e3359f84e34ca106e2f289c30a0c00296a6 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 18 Mar 2021 13:07:24 +0100 Subject: [PATCH 2/6] fix: padding adjustments --- src/components/Dashboard/styles/PrintDashboard.module.css | 2 +- .../Dashboard/styles/PrintLayoutDashboard.module.css | 2 +- src/components/Dashboard/styles/print-layout.css | 2 +- src/components/Dashboard/styles/print.css | 2 +- src/components/ItemGrid/StaticGrid.js | 6 ++++-- 5 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/Dashboard/styles/PrintDashboard.module.css b/src/components/Dashboard/styles/PrintDashboard.module.css index 9e15571e7..5252efedf 100644 --- a/src/components/Dashboard/styles/PrintDashboard.module.css +++ b/src/components/Dashboard/styles/PrintDashboard.module.css @@ -11,7 +11,7 @@ } .pageOuter { - padding: var(--spacers-dp12); + padding: 0 var(--spacers-dp12) 0 14px; background-color: white; border-radius: 3px; box-shadow: 0px 0px 3px 0px var(--colors-grey500); diff --git a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css index f562da2f8..b9eb06ef6 100644 --- a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css +++ b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css @@ -16,7 +16,7 @@ } .pageOuter { - padding: var(--spacers-dp12); + padding: 0 var(--spacers-dp12) 0 14px; background-color: white; border-radius: 3px; box-shadow: 0px 0px 3px 0px var(--colors-grey500); diff --git a/src/components/Dashboard/styles/print-layout.css b/src/components/Dashboard/styles/print-layout.css index 7b163f9a4..4c0438418 100644 --- a/src/components/Dashboard/styles/print-layout.css +++ b/src/components/Dashboard/styles/print-layout.css @@ -1,5 +1,5 @@ .react-grid-item.layout.PAGEBREAK { - margin-left: -25px; + margin-left: -27px; min-height: 50px !important; height: 50px !important; } diff --git a/src/components/Dashboard/styles/print.css b/src/components/Dashboard/styles/print.css index 7de04bb08..ba5b3e2dd 100644 --- a/src/components/Dashboard/styles/print.css +++ b/src/components/Dashboard/styles/print.css @@ -16,7 +16,7 @@ header.hidden { } .react-grid-item.PAGEBREAK { - width: 1120px !important; + width: calc(var(--a4-landscape-width-px) + 10px) !important; border: none !important; box-shadow: none !important; background-color: #f4f6f8; diff --git a/src/components/ItemGrid/StaticGrid.js b/src/components/ItemGrid/StaticGrid.js index 3a49ec9de..35e6bd859 100644 --- a/src/components/ItemGrid/StaticGrid.js +++ b/src/components/ItemGrid/StaticGrid.js @@ -18,6 +18,8 @@ import 'react-resizable/css/styles.css' import './styles/ItemGrid.css' +const PAGE_PADDING_PX = 24 + const StaticGrid = ({ layout, children, @@ -34,7 +36,7 @@ const StaticGrid = ({ } const style = window.getComputedStyle(document.documentElement) - const printWidthPx = parseInt( + const pageWidthPx = parseInt( style.getPropertyValue('--a4-landscape-width-px').replace('px', '') ) @@ -51,7 +53,7 @@ const StaticGrid = ({ margin={MARGIN_PX} cols={GRID_COLUMNS} rowHeight={GRID_ROW_HEIGHT_PX} - width={printWidthPx - 20} + width={pageWidthPx - PAGE_PADDING_PX} compactType={GRID_COMPACT_TYPE} isDraggable={false} isResizable={false} From ddafc8b98791cf6dce461cc932187ad421b7ddad Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 18 Mar 2021 16:54:22 +0100 Subject: [PATCH 3/6] fix: restore some original settings --- src/components/Dashboard/styles/PrintDashboard.module.css | 2 +- src/components/Dashboard/styles/PrintLayoutDashboard.module.css | 2 +- src/components/ItemGrid/StaticGrid.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Dashboard/styles/PrintDashboard.module.css b/src/components/Dashboard/styles/PrintDashboard.module.css index 5252efedf..9e15571e7 100644 --- a/src/components/Dashboard/styles/PrintDashboard.module.css +++ b/src/components/Dashboard/styles/PrintDashboard.module.css @@ -11,7 +11,7 @@ } .pageOuter { - padding: 0 var(--spacers-dp12) 0 14px; + padding: var(--spacers-dp12); background-color: white; border-radius: 3px; box-shadow: 0px 0px 3px 0px var(--colors-grey500); diff --git a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css index b9eb06ef6..f562da2f8 100644 --- a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css +++ b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css @@ -16,7 +16,7 @@ } .pageOuter { - padding: 0 var(--spacers-dp12) 0 14px; + padding: var(--spacers-dp12); background-color: white; border-radius: 3px; box-shadow: 0px 0px 3px 0px var(--colors-grey500); diff --git a/src/components/ItemGrid/StaticGrid.js b/src/components/ItemGrid/StaticGrid.js index 35e6bd859..21f520035 100644 --- a/src/components/ItemGrid/StaticGrid.js +++ b/src/components/ItemGrid/StaticGrid.js @@ -53,7 +53,7 @@ const StaticGrid = ({ margin={MARGIN_PX} cols={GRID_COLUMNS} rowHeight={GRID_ROW_HEIGHT_PX} - width={pageWidthPx - PAGE_PADDING_PX} + width={1102} compactType={GRID_COMPACT_TYPE} isDraggable={false} isResizable={false} From abab984b07658988c574d8305d1aab6b2dbaa373 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 18 Mar 2021 17:43:13 +0100 Subject: [PATCH 4/6] fix: some adjustments --- src/components/App.css | 2 +- src/components/Dashboard/styles/print-layout.css | 2 +- src/components/Dashboard/styles/print.css | 2 +- src/components/ItemGrid/StaticGrid.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/App.css b/src/components/App.css index 57650cf87..82787d2d0 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -24,7 +24,7 @@ /* print variables */ /* for A4 landscape (297x210mm) */ /* (29.7 /2.54) * 96 pixels/inch = 1123px */ - --a4-landscape-width-px: 1123px; + --a4-landscape-width-px: 1102px; } body { diff --git a/src/components/Dashboard/styles/print-layout.css b/src/components/Dashboard/styles/print-layout.css index 4c0438418..7b163f9a4 100644 --- a/src/components/Dashboard/styles/print-layout.css +++ b/src/components/Dashboard/styles/print-layout.css @@ -1,5 +1,5 @@ .react-grid-item.layout.PAGEBREAK { - margin-left: -27px; + margin-left: -25px; min-height: 50px !important; height: 50px !important; } diff --git a/src/components/Dashboard/styles/print.css b/src/components/Dashboard/styles/print.css index ba5b3e2dd..8e1ba22dc 100644 --- a/src/components/Dashboard/styles/print.css +++ b/src/components/Dashboard/styles/print.css @@ -16,7 +16,7 @@ header.hidden { } .react-grid-item.PAGEBREAK { - width: calc(var(--a4-landscape-width-px) + 10px) !important; + width: 1120px !important; /* calc(var(--a4-landscape-width-px) + 10px) */ border: none !important; box-shadow: none !important; background-color: #f4f6f8; diff --git a/src/components/ItemGrid/StaticGrid.js b/src/components/ItemGrid/StaticGrid.js index 21f520035..35e6bd859 100644 --- a/src/components/ItemGrid/StaticGrid.js +++ b/src/components/ItemGrid/StaticGrid.js @@ -53,7 +53,7 @@ const StaticGrid = ({ margin={MARGIN_PX} cols={GRID_COLUMNS} rowHeight={GRID_ROW_HEIGHT_PX} - width={1102} + width={pageWidthPx - PAGE_PADDING_PX} compactType={GRID_COMPACT_TYPE} isDraggable={false} isResizable={false} From 622fb3d78247ca0b06dfe6ef5cc4abdcb5099485 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 18 Mar 2021 17:54:57 +0100 Subject: [PATCH 5/6] fix: use var --- src/components/Dashboard/styles/print.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dashboard/styles/print.css b/src/components/Dashboard/styles/print.css index 8e1ba22dc..d84c2b40c 100644 --- a/src/components/Dashboard/styles/print.css +++ b/src/components/Dashboard/styles/print.css @@ -16,7 +16,7 @@ header.hidden { } .react-grid-item.PAGEBREAK { - width: 1120px !important; /* calc(var(--a4-landscape-width-px) + 10px) */ + width: calc(var(--a4-landscape-width-px) + 18px) !important; border: none !important; box-shadow: none !important; background-color: #f4f6f8; From a1e5f1f38a2ed6ea592332b6aa253b0b19f085f0 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 18 Mar 2021 18:06:11 +0100 Subject: [PATCH 6/6] fix: really needs to be 1102 --- src/components/App.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/App.css b/src/components/App.css index 82787d2d0..b14b6fc82 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -23,7 +23,8 @@ /* print variables */ /* for A4 landscape (297x210mm) */ - /* (29.7 /2.54) * 96 pixels/inch = 1123px */ + /* (29.7 /2.54) * 96 pixels/inch - 20px print margin */ + /* changing this number could have consequences for a multipage printout */ --a4-landscape-width-px: 1102px; }