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 @@ - + - + - +