From 4a5f616cc4a6ff71220f4915bebaabe2a116f279 Mon Sep 17 00:00:00 2001 From: Eric Arellano <14852634+Eric-Arellano@users.noreply.github.com> Date: Tue, 2 Jul 2024 08:37:07 -0400 Subject: [PATCH] Further improve design of left controls (#200) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Follow up to https://github.com/ParkingReformNetwork/parking-lot-map/pull/199. * Uses touch target 44 x 44px, not 40 x 40px. On my iPhone, 40 x 40px is still fairly small. Now, we follow the web accessibility standard. * Increases the size of the layers touch targets to 44px height. To make the touch targets look distinct and not have weird space in the middle, I added a 1px border, which mirrors the zoom-in and out buttons. * Uses our colors for all the borders. I still don't love the color, but it can be changed later. This at least switches to our own color * Consistently use `font-size-md` and non-bold text * Vertically aligns radio buttons with label text * Renames "Light" layer to "High contrast" for better clarity Ideas for additional improvement: * prettier radio button * choose a better border color
before (before #199) Screenshot 2024-07-01 at 10 45 01 PM
before (with #199) Screenshot 2024-07-01 at 10 43 57 PM
after Screenshot 2024-07-02 at 8 31 27 AM
--- src/css/_controls.scss | 47 +++++++++++++++++++++++++---- src/css/theme/_touchable-icons.scss | 5 ++- src/css/vendor/bootstrap.css | 2 -- src/js/setUpSite.ts | 6 ++-- 4 files changed, 46 insertions(+), 14 deletions(-) diff --git a/src/css/_controls.scss b/src/css/_controls.scss index e77db52..0915ca0 100644 --- a/src/css/_controls.scss +++ b/src/css/_controls.scss @@ -1,33 +1,68 @@ +@use "theme/colors"; @use "theme/touchable-icons"; @use "theme/typography"; -.leaflet-top.leaflet-left { +.leaflet-control-zoom.leaflet-bar, +.leaflet-control-layers.leaflet-control { + border: 2px solid colors.$gray-light-translucent; + border-radius: 4px; +} + +.leaflet-control-zoom.leaflet-bar { top: 10px; a { width: touchable-icons.$min-touch-target; height: touchable-icons.$min-touch-target; - font-size: typography.$font-size-lg; + font-size: typography.$font-size-md; font-weight: normal; display: flex; align-items: center; justify-content: center; + + &:first-child { + border-bottom: 1px solid colors.$gray-light-translucent; + } } } -.leaflet-touch .leaflet-control-layers-toggle { +.leaflet-touch.leaflet-control-layers-toggle { width: touchable-icons.$min-touch-target; height: touchable-icons.$min-touch-target; } #map > div.leaflet-control-container > div.leaflet-top.leaflet-right { - top: 100px; + top: 104px; margin-left: 10px; right: auto; } +.leaflet-control-layers-selector { + top: 0px; +} + +.leaflet-control-layers-expanded { + padding: 0px; +} + .leaflet-control-layers label { - font-size: typography.$font-size-base; - font-weight: normal; + font-size: typography.$font-size-md; + line-height: 1; + + &:first-child { + border-bottom: 1px solid colors.$gray-light-translucent; + } + + display: flex; + align-items: center; + + // Each option is naturally 18px, so 13px padding results in + // the touch target being the minimum size of 44px. + padding: 13px 8px; + + input[type="radio"] { + margin: 0; + vertical-align: middle; + } } diff --git a/src/css/theme/_touchable-icons.scss b/src/css/theme/_touchable-icons.scss index 89b5d71..c96f6d9 100644 --- a/src/css/theme/_touchable-icons.scss +++ b/src/css/theme/_touchable-icons.scss @@ -2,9 +2,8 @@ $icon-size-xs: 20px; $icon-size-sm: 24px; $icon-size-md: 32px; -// https://www.w3.org/WAI/WCAG21/Understanding/target-size.html recommends -// 44px, but 40px takes less space. -$min-touch-target: 40px; +// https://www.w3.org/WAI/WCAG21/Understanding/target-size.html +$min-touch-target: 44px; @mixin touchable-icon($icon-size) { width: $icon-size; diff --git a/src/css/vendor/bootstrap.css b/src/css/vendor/bootstrap.css index 33e8bdb..a63a17b 100644 --- a/src/css/vendor/bootstrap.css +++ b/src/css/vendor/bootstrap.css @@ -318,8 +318,6 @@ fieldset { label { display: inline-block; max-width: 100%; - margin-bottom: 5px; - font-weight: bold; } input[type="search"] { -webkit-box-sizing: border-box; diff --git a/src/js/setUpSite.ts b/src/js/setUpSite.ts index 1dc2866..d0e11c5 100644 --- a/src/js/setUpSite.ts +++ b/src/js/setUpSite.ts @@ -29,7 +29,7 @@ const parkingLotsModules = import( const MAX_ZOOM = 18; const BASE_LAYERS = { - Light: new TileLayer( + "High contrast": new TileLayer( "https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png", { attribution: `Map tiles: © Stadia Maps @@ -67,11 +67,11 @@ const STYLES = { /** * Create the initial map object. * - * This sets up Google Maps vs. Light mode, attribution, and zoom. + * This sets up Google Maps vs. High contrast, attribution, and zoom. */ const createMap = (): Map => { const map = new Map("map", { - layers: [BASE_LAYERS.Light], + layers: [BASE_LAYERS["High contrast"]], closePopupOnClick: false, }); map.attributionControl.setPrefix(