Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: print page width #1657

Merged
merged 8 commits into from
Mar 19, 2021
Merged

fix: print page width #1657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
58e6bc3
fix: actual width is 1123px and use single constant
jenniferarnesen Mar 18, 2021
783a6e3
fix: padding adjustments
jenniferarnesen Mar 18, 2021
ddafc8b
fix: restore some original settings
jenniferarnesen Mar 18, 2021
abab984
fix: some adjustments
jenniferarnesen Mar 18, 2021
622fb3d
fix: use var
jenniferarnesen Mar 18, 2021
a1e5f1f
fix: really needs to be 1102
jenniferarnesen Mar 18, 2021
d90c165
Merge branch 'master' into fix/print-page-width
jenniferarnesen Mar 19, 2021
d9996a5
Merge branch 'master' into fix/print-page-width
jenniferarnesen Mar 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/components/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dashboard/styles/PrintActionsBar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
display: flex;
justify-content: space-between;
width: auto;
max-width: 1102px;
max-width: var(--a4-landscape-width-px);
}

.link {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dashboard/styles/PrintDashboard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dashboard/styles/PrintInfo.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
}

.divider {
width: 1102px;
width: var(--a4-landscape-width-px);;
height: 1px;
margin: var(--spacers-dp16) 0;
border: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dashboard/styles/PrintLayoutDashboard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
6 changes: 3 additions & 3 deletions src/components/Dashboard/styles/print.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand Down
10 changes: 8 additions & 2 deletions src/components/ItemGrid/StaticGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 ? (
Expand All @@ -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}
Expand Down
6 changes: 0 additions & 6 deletions src/modules/printUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down