fix: maximum grid width was hanging past right edge of paper in print…

… preview (#1657) Switching to a responsive grid has changed the geometries of the items just slightly, so that in print preview - full width items would hang over the right edge of the paper (the actual print still looked ok). Solution was to reduce the width of the print grid (StaticGrid). Other changes are refactoring - using a single variable to hold the A4 landscape page width.
dhis2 · Mar 19, 2021 · 7faf5c2 · 7faf5c2
1 parent 613ae75
commit 7faf5c2
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 15 deletions.
diff --git a/src/components/App.css b/src/components/App.css
@@ -20,6 +20,12 @@
     --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 - 20px print margin */
+    /* changing this number could have consequences for a multipage printout */
+    --a4-landscape-width-px: 1102px;
 }
 
 body {

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -16,7 +16,7 @@ header.hidden {
 }
 
 .react-grid-item.PAGEBREAK {
-    width: 1120px !important;
+    width: calc(var(--a4-landscape-width-px) + 18px) !important;
     border: none !important;
     box-shadow: none !important;
     background-color: #f4f6f8;
@@ -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
@@ -12,13 +12,14 @@ 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'
 
 import './styles/ItemGrid.css'
 
+const PAGE_PADDING_PX = 24
+
 const StaticGrid = ({
     layout,
     children,
@@ -34,6 +35,11 @@ const StaticGrid = ({
         )
     }
 
+    const style = window.getComputedStyle(document.documentElement)
+    const pageWidthPx = parseInt(
+        style.getPropertyValue('--a4-landscape-width-px').replace('px', '')
+    )
+
     return (
         <>
             {isLoading ? (
@@ -47,7 +53,7 @@ const StaticGrid = ({
                 margin={MARGIN_PX}
                 cols={GRID_COLUMNS}
                 rowHeight={GRID_ROW_HEIGHT_PX}
-                width={A4_LANDSCAPE_WIDTH_PX}
+                width={pageWidthPx - PAGE_PADDING_PX}
                 compactType={GRID_COMPACT_TYPE}
                 isDraggable={false}
                 isResizable={false}

diff --git 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