From beda84347c69101286386965d74074e35e518360 Mon Sep 17 00:00:00 2001 From: JoshuaForrest Date: Thu, 6 Mar 2025 15:09:42 +0000 Subject: [PATCH 1/6] Reflow (Rivers and Sea map) https://eaflood.atlassian.net/browse/LTFRI-1650 This change will fix the accessability issue on the map page when a user magnifies the page. From dfdd09c6ac19ac4974d7171368c717d60f000f97 Mon Sep 17 00:00:00 2001 From: JoshuaForrest Date: Fri, 7 Mar 2025 11:08:01 +0000 Subject: [PATCH 2/6] Fixed layout with 400% magnification on 16:9 screens --- client/sass/_map-controls.scss | 14 +++++++++++--- client/sass/map-page.scss | 1 - 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/client/sass/_map-controls.scss b/client/sass/_map-controls.scss index 3c3c1029..ad572004 100644 --- a/client/sass/_map-controls.scss +++ b/client/sass/_map-controls.scss @@ -15,7 +15,6 @@ $gov-font: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif; .defra-map-controls-bottom { padding-right: 15px; - pointer-events: auto; position: absolute; bottom: 20px; right: -15px; @@ -30,6 +29,10 @@ $gov-font: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif; } } + .defra-map-info__content { + pointer-events: auto; + } + .defra-map__open-key { float: right; position: relative; @@ -298,10 +301,15 @@ $gov-font: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif; .esri-zoom { margin-bottom: 25px; margin-right: 15px; - - @media screen and (max-width: $tablet-width) { + + @media screen and (max-width: $tablet-width) and (max-resolution: 2dppx) { display: none; } + @media screen and (min-resolution: 2.2dppx) { + position: absolute; + bottom: 50px; + margin-right: -5px; + } } .esri-zoom.with-scenario-bar { diff --git a/client/sass/map-page.scss b/client/sass/map-page.scss index ddc641a3..29c724ed 100644 --- a/client/sass/map-page.scss +++ b/client/sass/map-page.scss @@ -71,7 +71,6 @@ body { position: absolute; left: 10px; bottom: 10px; - pointer-events: auto; display: block; width: 90px; height: 24px; From 3b33948ba8bc39b77d7210f883eeb71595404716 Mon Sep 17 00:00:00 2001 From: JoshuaForrest Date: Fri, 7 Mar 2025 14:41:14 +0000 Subject: [PATCH 3/6] Fixed layout with 400% magnification on 4:3 screens at 400% zoom --- client/sass/_map-controls.scss | 4 ++-- client/sass/map-page.scss | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/client/sass/_map-controls.scss b/client/sass/_map-controls.scss index ad572004..72241f88 100644 --- a/client/sass/_map-controls.scss +++ b/client/sass/_map-controls.scss @@ -305,9 +305,9 @@ $gov-font: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif; @media screen and (max-width: $tablet-width) and (max-resolution: 2dppx) { display: none; } - @media screen and (min-resolution: 2.2dppx) { + @media screen and (min-resolution: 2.1dppx) { position: absolute; - bottom: 50px; + bottom: 45px; margin-right: -5px; } } diff --git a/client/sass/map-page.scss b/client/sass/map-page.scss index 29c724ed..71322acd 100644 --- a/client/sass/map-page.scss +++ b/client/sass/map-page.scss @@ -106,6 +106,12 @@ body { } } + @media screen and (max-width: 320px) and (min-resolution: 2.1dppx) { + #copyright-text { + font-size: 8px; + } +} + #close-btn { width: 20px; height: 20px; From 829dc4c5f6a26267c4675a5373bf0171cbe8fb1c Mon Sep 17 00:00:00 2001 From: JoshuaForrest Date: Mon, 10 Mar 2025 14:50:00 +0000 Subject: [PATCH 4/6] Slight adjustments --- client/sass/_map-controls.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/client/sass/_map-controls.scss b/client/sass/_map-controls.scss index 72241f88..03f49889 100644 --- a/client/sass/_map-controls.scss +++ b/client/sass/_map-controls.scss @@ -305,11 +305,14 @@ $gov-font: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif; @media screen and (max-width: $tablet-width) and (max-resolution: 2dppx) { display: none; } - @media screen and (min-resolution: 2.1dppx) { + @media screen and (min-resolution: 2.2dppx) { position: absolute; bottom: 45px; margin-right: -5px; } + @media screen and (max-width: 320px) and (min-resolution: 2.1dppx) { + bottom: 40px; + } } .esri-zoom.with-scenario-bar { @@ -341,6 +344,10 @@ $gov-font: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif; outline: 0px solid transparent; } +.esri-attribution__powered-by { + padding: 0 10px !important; +} + .ol-zoom.ol-zoom-checked { top: calc(100% - 200px); } From 13b4946e82083e2ff1744525c1705060b33f748a Mon Sep 17 00:00:00 2001 From: JoshuaForrest Date: Tue, 11 Mar 2025 09:49:34 +0000 Subject: [PATCH 5/6] Small tweaks --- client/sass/_map-controls.scss | 5 +---- client/sass/map-page.scss | 10 ++-------- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/client/sass/_map-controls.scss b/client/sass/_map-controls.scss index 03f49889..a6c34b57 100644 --- a/client/sass/_map-controls.scss +++ b/client/sass/_map-controls.scss @@ -302,7 +302,7 @@ $gov-font: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif; margin-bottom: 25px; margin-right: 15px; - @media screen and (max-width: $tablet-width) and (max-resolution: 2dppx) { + @media screen and (max-device-width: $tablet-width) { display: none; } @media screen and (min-resolution: 2.2dppx) { @@ -310,9 +310,6 @@ $gov-font: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif; bottom: 45px; margin-right: -5px; } - @media screen and (max-width: 320px) and (min-resolution: 2.1dppx) { - bottom: 40px; - } } .esri-zoom.with-scenario-bar { diff --git a/client/sass/map-page.scss b/client/sass/map-page.scss index 71322acd..9f68cc09 100644 --- a/client/sass/map-page.scss +++ b/client/sass/map-page.scss @@ -75,7 +75,7 @@ body { width: 90px; height: 24px; - @media screen and (max-width: $small-mobile-width) { + @media screen and (max-device-width: $small-mobile-width) { bottom: 40px; } } @@ -105,13 +105,7 @@ body { font-family: $gov-font; } } - - @media screen and (max-width: 320px) and (min-resolution: 2.1dppx) { - #copyright-text { - font-size: 8px; - } -} - + #close-btn { width: 20px; height: 20px; From ccdb7c0b2ff9c9afe33bec32f4c0d05727db7885 Mon Sep 17 00:00:00 2001 From: JoshuaForrest Date: Tue, 11 Mar 2025 15:15:17 +0000 Subject: [PATCH 6/6] Fixed positioning for zooming at different resolutions --- client/sass/_map-controls.scss | 7 ++++++- client/sass/map-page.scss | 3 +++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/client/sass/_map-controls.scss b/client/sass/_map-controls.scss index a6c34b57..120d183b 100644 --- a/client/sass/_map-controls.scss +++ b/client/sass/_map-controls.scss @@ -305,11 +305,16 @@ $gov-font: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif; @media screen and (max-device-width: $tablet-width) { display: none; } - @media screen and (min-resolution: 2.2dppx) { + @media screen and (min-device-width: $desktop-width) and (min-resolution: 2.2dppx) { position: absolute; bottom: 45px; margin-right: -5px; } + @media screen and (min-device-width: $desktop-width) and (max-width: $tablet-width) and (min-resolution: 1.75dppx) { + position: absolute; + bottom: 45px; + margin-right: -5px; + } } .esri-zoom.with-scenario-bar { diff --git a/client/sass/map-page.scss b/client/sass/map-page.scss index 9f68cc09..1cf22c70 100644 --- a/client/sass/map-page.scss +++ b/client/sass/map-page.scss @@ -78,6 +78,9 @@ body { @media screen and (max-device-width: $small-mobile-width) { bottom: 40px; } + @media screen and (min-device-width: $desktop-width) and (max-width: $small-mobile-width) and (min-resolution: 4dppx) { + bottom: 20px; + } } .os-logo-position-change {