From f1a198522ff1724915bcdfd90577bb79eb3348db Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Mon, 28 Sep 2026 19:40:00 +0000 Subject: [PATCH] Make the regions dashboard printable at all MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Driver test round 2, #2. This plugin shipped with no @media print rule of any kind, and that single absence explains all three of his symptoms at once — a page that was never styled for print does not fail loudly, it prints the screen. The header and footer were missing for a structural reason rather than a styling one. This page is an app shell: .rd-root is position:absolute inset:0 and .rd-scroll owns the scroll. On paper there is no viewport to be absolute inside and no scrollbar to move, so the browser prints the one screenful that happens to be laid out and silently drops everything above and below it. Both are released back into normal flow, which is what makes the whole dashboard printable rather than just its middle. The legend now sits beside the map instead of on it. .rcm__legend is a sibling of .rcm__canvas inside .rcm, so that is a matter of letting it back into flow — .rcm becomes a row, the canvas takes the remaining width, the legend its natural width, capped so a long legend cannot squeeze the map it explains down to a strip. The map also loses its 780px floor and 16/9 ratio, which no page can hold. Interactive chrome is dropped: the zoom and attribution controls, the two invisible scroll strips that would print as empty columns beside the map, and the back-to-top arrow, which on paper is a circle with an arrow and nothing to scroll. NEEDS EYES: printing is the one thing I cannot check headlessly. The loading indicator he also asked for is a separate, non-CSS change and is not in here. --- .../regions-dashboard/region-dashboards.vue | 17 +++++++++++++++ .../src/RegionCountryMap.vue | 21 +++++++++++++++++++ public/dx-maps/doxa-maps-spa/manifest.json | 8 +++---- public/dx-maps/manifest.json | 8 +++---- .../region-dashboards/index.html | 2 +- .../regions-dashboard/regions-dashboard.js | 2 +- .../regions-dashboard/regions-list/index.html | 2 +- .../regions-dashboard/regions-mfe/index.html | 2 +- 8 files changed, 50 insertions(+), 12 deletions(-) diff --git a/plugin-designs/regions-dashboard/region-dashboards.vue b/plugin-designs/regions-dashboard/region-dashboards.vue index fb6e22d11..7a1bec9de 100644 --- a/plugin-designs/regions-dashboard/region-dashboards.vue +++ b/plugin-designs/regions-dashboard/region-dashboards.vue @@ -794,6 +794,23 @@ useShadowStyles( '.rd-scroll > *{ width:calc(90% + 16px); max-width:1200px;' + ' margin-left:auto; margin-right:auto; }' + '.rd-status{ padding:var(--spacing-xl); text-align:center; color:var(--dx-muted); font-size:var(--font-size-md); }' + + + // ── ★ PRINT: LET THE DOCUMENT FLOW ONTO PAGES (Driver test round 2, #2) ────────────────────── + // "The header and footer don't show properly" has a structural cause, not a styling one. This + // page is an app shell: .rd-root is position:absolute inset:0 and .rd-scroll owns the scroll. + // On paper there is no viewport to be absolute INSIDE and no scrollbar to move, so the browser + // prints the one screenful that happens to be laid out and drops everything above and below it. + // Releasing both back into normal flow is what makes the whole dashboard printable at all. + '@media print{' + + ' .rd-root{ position:static; inset:auto; height:auto; overflow:visible; }' + + ' .rd-scroll{ overflow:visible; height:auto; max-height:none; padding:0; }' + + // Keep a heading with the block it introduces rather than orphaned at a page foot. + ' .rd-head, .rd-stats, .rd-mapblock, .rd-section{ break-inside:avoid; }' + + ' .rd-h2{ break-after:avoid; }' + + // Controls that only do something under a pointer. The back-to-top arrow is the clearest case: + // on paper it is a circle with an arrow in it and nothing to scroll. + ' .rd-chooser, .btt{ display:none !important; }' + + '}' + '.rd-status.rd-failed{ font-weight:600; }' + // ── head: RegionDetail.vue:47-51, a .stack--xs (7.5px) block, centred ── diff --git a/plugin-designs/regions-dashboard/src/RegionCountryMap.vue b/plugin-designs/regions-dashboard/src/RegionCountryMap.vue index c9e008b1e..440df0ae9 100644 --- a/plugin-designs/regions-dashboard/src/RegionCountryMap.vue +++ b/plugin-designs/regions-dashboard/src/RegionCountryMap.vue @@ -731,6 +731,27 @@ useShadowStyles( 'touch-action:pan-y;pointer-events:auto;background:transparent}' + '.map-scroll-edge--left{left:0}' + '.map-scroll-edge--right{right:0}' + + + // ── ★ PRINT: THE LEGEND GOES BESIDE THE MAP, NOT OVER IT (Driver test round 2, #2) ────────── + // This plugin shipped with NO @media print rule at all, which is the single cause behind all + // three of his symptoms: on paper the legend stayed absolutely positioned ON the map, the map + // kept a 780px min-height and a 16/9 ratio that no page can hold, and the interactive chrome + // printed along with it. A page that was never styled for print does not fail loudly; it just + // prints the screen. + // + // .rcm__legend is a SIBLING of .rcm__canvas inside .rcm, so putting it beside the map is a + // matter of letting it back into flow rather than restructuring anything: .rcm becomes a row, + // the canvas takes the remaining width, and the legend takes its natural width. + '@media print{' + + ' .rcm{ display:flex; align-items:flex-start; gap:12px; min-height:0; aspect-ratio:auto; height:auto; break-inside:avoid; }' + + ' .rcm__canvas{ flex:1 1 auto; height:12cm; }' + + // Static, so it sits in the row instead of floating over the canvas. Capped so a long legend + // cannot squeeze the map it is explaining down to a strip. + ' .rcm__legend{ position:static; inset:auto; flex:0 0 auto; max-width:38%; background:none; box-shadow:none; }' + + // Chrome that only means something to a pointer. The scroll strips are invisible on screen and + // would print as two empty 40px columns beside the map. + ' .map-scroll-edge, .mapboxgl-ctrl-group, .maplibregl-ctrl-group, .mapboxgl-ctrl-attrib-button, .maplibregl-ctrl-attrib-button{ display:none !important; }' + + '}' + // ★ THE SCROLL STRIPS WERE SWALLOWING THE MAP CONTROLS (Driver, on Mapbox): zoom in, zoom out // and fullscreen could not be clicked at all. The strips are 40px wide, full height, // pointer-events:auto and z-index:2 — and BOTH engines place their control groups in the very diff --git a/public/dx-maps/doxa-maps-spa/manifest.json b/public/dx-maps/doxa-maps-spa/manifest.json index 6b3d9821a..d7feb7f0a 100644 --- a/public/dx-maps/doxa-maps-spa/manifest.json +++ b/public/dx-maps/doxa-maps-spa/manifest.json @@ -1080,7 +1080,7 @@ "bundle": "regions-dashboard", "scriptUrl": "./regions-dashboard/regions-dashboard.js", "output": "dx-maps/regions-dashboard/regions-dashboard.js", - "integrity": "sha384-ClTPZXPAp0TW75libbg5ebhKUZfGDTYAVKQ6GAKJcn5TfWNk2FD9hyZRWrrXOdtX", + "integrity": "sha384-Y2zDvJvo/WXHjIvwdvxG0ir3G1mdXatHdyi6EvHWdr+/8yTl4D8TxWQtT9TYF5Pz", "elements": [ "regions-dashboard" ], @@ -1103,7 +1103,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n" + "script": "\n\n\n\n\n" } }, { @@ -1119,7 +1119,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n" + "script": "\n\n\n" } }, { @@ -1135,7 +1135,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n" + "script": "\n\n\n\n\n" } } ] diff --git a/public/dx-maps/manifest.json b/public/dx-maps/manifest.json index 6b3d9821a..d7feb7f0a 100644 --- a/public/dx-maps/manifest.json +++ b/public/dx-maps/manifest.json @@ -1080,7 +1080,7 @@ "bundle": "regions-dashboard", "scriptUrl": "./regions-dashboard/regions-dashboard.js", "output": "dx-maps/regions-dashboard/regions-dashboard.js", - "integrity": "sha384-ClTPZXPAp0TW75libbg5ebhKUZfGDTYAVKQ6GAKJcn5TfWNk2FD9hyZRWrrXOdtX", + "integrity": "sha384-Y2zDvJvo/WXHjIvwdvxG0ir3G1mdXatHdyi6EvHWdr+/8yTl4D8TxWQtT9TYF5Pz", "elements": [ "regions-dashboard" ], @@ -1103,7 +1103,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n" + "script": "\n\n\n\n\n" } }, { @@ -1119,7 +1119,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n" + "script": "\n\n\n" } }, { @@ -1135,7 +1135,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n" + "script": "\n\n\n\n\n" } } ] diff --git a/public/dx-maps/regions-dashboard/region-dashboards/index.html b/public/dx-maps/regions-dashboard/region-dashboards/index.html index 02e395b99..f634fe911 100644 --- a/public/dx-maps/regions-dashboard/region-dashboards/index.html +++ b/public/dx-maps/regions-dashboard/region-dashboards/index.html @@ -36,7 +36,7 @@ - + - + - +