Skip to content

Commit

Permalink
Further improve design of left controls (#200)
Browse files Browse the repository at this point in the history
Follow up to
#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

<details><summary>before (before #199)</summary>

<img width="193" alt="Screenshot 2024-07-01 at 10 45 01 PM"
src="https://github.com/ParkingReformNetwork/parking-lot-map/assets/14852634/8969d44f-3b55-47fb-bda3-a8bdc2531b07">
</details>


<details><summary>before (with #199)</summary>

<img width="191" alt="Screenshot 2024-07-01 at 10 43 57 PM"
src="https://github.com/ParkingReformNetwork/parking-lot-map/assets/14852634/e7f98d4c-f96b-4713-bb77-1ac4aa04f46a">
</details>


<details><summary>after</summary>

<img width="192" alt="Screenshot 2024-07-02 at 8 31 27 AM"
src="https://github.com/ParkingReformNetwork/parking-lot-map/assets/14852634/92eead54-d015-4f54-a2ba-1462a202910c">
</details>
  • Loading branch information
Eric-Arellano authored Jul 2, 2024
1 parent c10adac commit 4a5f616
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 14 deletions.
47 changes: 41 additions & 6 deletions src/css/_controls.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
5 changes: 2 additions & 3 deletions src/css/theme/_touchable-icons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 0 additions & 2 deletions src/css/vendor/bootstrap.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions src/js/setUpSite.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: &copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a>
Expand Down Expand Up @@ -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(
Expand Down

0 comments on commit 4a5f616

Please sign in to comment.