From 8a415bc31b2a8825594e61671bf7edcbaf84375f Mon Sep 17 00:00:00 2001 From: stvnrlly Date: Wed, 14 Dec 2022 13:30:27 -0500 Subject: [PATCH] remove leaflet - it was for broadcasts --- app/assets/stylesheets/map.scss | 170 -------------------------------- gulpfile.js | 8 -- package-lock.json | 11 --- package.json | 1 - 4 files changed, 190 deletions(-) delete mode 100644 app/assets/stylesheets/map.scss diff --git a/app/assets/stylesheets/map.scss b/app/assets/stylesheets/map.scss deleted file mode 100644 index 8510b9789..000000000 --- a/app/assets/stylesheets/map.scss +++ /dev/null @@ -1,170 +0,0 @@ -@import 'leaflet/dist/leaflet'; - -// Styles to make the leaflet map match GOVUK (accessibility-focused) styling - -@import "settings/all"; -@import "helpers/all"; - -// Reset focus colour to latest version, to match the rest of the app -$govuk-focus-colour: #FFDD00; -$zoom-button-colour: govuk-colour("white"); -$zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%); - -// The map focus style is a 2-colour outline, made to match the GOVUK text input focus style, using -// box-shadow. When colours are overridden, for example when users have Windows high contrast mode -// on, box-shadows disappear, so the outline is left as a single colour (defined by the OS, to -// replace 'transparent') which we offset from the map to mimic the 2-colour version. -// -// Leaflet adds focus styles with JS, through inline styles. Because of their higher precedence -// we need to mark our overrides with !important. -// -// This approach, taken from MDN, allows it to fall back to :focus for browsers without support: -// https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#selectively_showing_the_focus_indicator -.leaflet-container { - - &:focus { - box-shadow: 0px 0px 0 3px $govuk-focus-text-colour, 0 0 0 6px $govuk-focus-colour; - outline: solid 3px transparent !important; // sass-lint:disable-line no-important - outline-offset: 3px; - } - - // The map should only recieve focus from being tabbed to. This stops the focus state coming - // from other sources (like clicks on child elements). - &:focus:not(:focus-visible) { - box-shadow: none; - outline: none !important; // sass-lint:disable-line no-important - } -} - -// Overrides for zoom controls to make them match GOVUK buttons -// https://design-system.service.gov.uk/components/button/ -// -// GOVUK buttons usually have an outline that shows up in high contrast modes. Our buttons are cropped by -// their container so we use their border instead. -// -// Also introduces a thick black divider between the buttons, made with a pseudo element, appearing -// on focus. Together with the yellow background, this copies the 2-colour style GOVUK Frontend -// buttons and links have. -.leaflet-bar { - border-radius: 0; // Remove rounded corners - background: #CCCCCC; // Grey background to give a thin divider between buttons when they're not in focus - - @media (forced-colors: active) { - background: canvasText; - } - - a { - - // Outlines don't work because of the buttons being so close together so turn off - outline: none; - - &:first-child { - border-bottom: none; - margin-bottom: 1px; // Thin divider to distinguish buttons - } - - &:last-child { - // Allow it to contain the absolutely positioned divider we show between buttons - // when one is focused - position: relative; - } - - // Hover style is darker background - &:hover { - background-color: $zoom-button-hover-colour; - } - - // Styles that apply if focused with or without the :hover or :active state - &:focus { - // Button focus is shown by a change in background colour. - // When colours are overridden, for example when users have Windows high - // contrast mode on, backgrounds disappear, so we need to ensure there's a - // visible outline so it can be set to a colour by the OS. - border: solid 2px $govuk-focus-colour; - box-sizing: border-box; // make sure height includes the border - line-height: 22px; // subtract the border from the height (normally 26px) - - // The inline display box for the button text overlaps the button edge. - // This is only visible in high contrast mode because of the background colour being set. - @media (forced-colors: active) { - overflow: hidden; - } - } - - // Focused style sets the button to the focus colour - &:focus:not(:active):not(:hover) { - color: $govuk-focus-text-colour; - background-color: $govuk-focus-colour; - } - - // Shared styles for the divider between buttons that appears when either are focused - &:last-child:focus:not(:active):not(:hover):before, - &:first-child:focus:not(:active):not(:hover) + a:before { - content: ""; - position: absolute; - height: 2px; - background: $govuk-focus-text-colour; - - // Hide in forced-color mode, since the button outlines suffice - @media (forced-colors: active) { - display: none; - } - } - - // Styles for the divider, specifc to the second button being focused - &:last-child:focus:not(:active):not(:hover):before { - left: -2px; // Subtract 2px left border - top: -3px; // Shift divider up 1px so it overlaps buttons equally, and another 2px to compensate for the reduced height of the last button (due to the border) - width: calc(100% + 4px); // Compensate for borders - } - - // Styles for the divider, specifc to the first button being focused - &:first-child:focus:not(:active):not(:hover) + a:before { - left: 0px; // No borders on parent of :before when not focused - top: -1px; // Shift divider up 1px so it overlaps buttons equally - width: 100%; - } - } - -} - -// Extra block to override specific LeafletJS rounded-corners when buttons are focused -.leaflet-bar a, -.leaflet-touch .leaflet-bar a { - - &:first-child { - // Remove rounded corners - border-top-left-radius: 0; - border-top-right-radius: 0; - } - - &:last-child { - // Remove rounded corners - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - -} - -// buttons are 30px for touch-capable devices/browsers -.leaflet-touch .leaflet-bar a:focus { - line-height: 26px; // subtract the border from the height (normally 30px) -} - -// Map attribution links -.leaflet-control-attribution { - & a { - text-decoration: underline; - - &:focus { - // Link focus is shown by a change in background colour. - // When colours are overridden, for example when users have Windows high - // contrast mode on, backgrounds disappear, so we need to ensure there's a - // visible outline so it can be set to a colour by the OS. - outline: $govuk-focus-width solid transparent !important; // sass-lint:disable-line no-important - color: $govuk-focus-text-colour; - background: $govuk-focus-colour; - box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour; - } - } -} diff --git a/gulpfile.js b/gulpfile.js index 1c85720a3..11e98c61c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -50,12 +50,6 @@ const copy = { return src(paths.src + 'error_pages/**/*') .pipe(dest(paths.dist + 'error_pages/')) }, - leaflet: { - js: () => { - return src(paths.npm + 'leaflet/dist/leaflet.js') - .pipe(dest(paths.dist + 'javascripts/')) - } - } }; @@ -149,7 +143,6 @@ const javascripts = () => { const sass = () => { return src([ paths.src + '/stylesheets/main*.scss', - paths.src + '/stylesheets/map.scss', paths.src + '/stylesheets/print.scss' ]) .pipe(plugins.prettyerror()) @@ -232,7 +225,6 @@ const lint = { // Default: compile everything const defaultTask = parallel( parallel( - copy.leaflet.js, images ), series( diff --git a/package-lock.json b/package-lock.json index 220cb4ed6..cf678f2cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,6 @@ "govuk-frontend": "2.13.0", "hogan": "1.0.2", "jquery": "3.6.1", - "leaflet": "1.9.2", "morphdom": "2.6.1", "query-command-supported": "1.0.0", "textarea-caret": "3.1.0", @@ -9923,11 +9922,6 @@ "node": ">= 0.10" } }, - "node_modules/leaflet": { - "version": "1.9.2", - "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.2.tgz", - "integrity": "sha512-Kc77HQvWO+y9y2oIs3dn5h5sy2kr3j41ewdqCMEUA4N89lgfUUfOBy7wnnHEstDpefiGFObq12FdopGRMx4J7g==" - }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -21985,11 +21979,6 @@ "flush-write-stream": "^1.0.2" } }, - "leaflet": { - "version": "1.9.2", - "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.2.tgz", - "integrity": "sha512-Kc77HQvWO+y9y2oIs3dn5h5sy2kr3j41ewdqCMEUA4N89lgfUUfOBy7wnnHEstDpefiGFObq12FdopGRMx4J7g==" - }, "leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", diff --git a/package.json b/package.json index d6b1bfbd0..1ac4bd2cd 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "govuk-frontend": "2.13.0", "hogan": "1.0.2", "jquery": "3.6.1", - "leaflet": "1.9.2", "morphdom": "2.6.1", "query-command-supported": "1.0.0", "textarea-caret": "3.1.0",