publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-16 01:21:40 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix button centering on iphone (#581)

Browse source 
* Fix button centering on iphone
For some reason, physical iPhones are not centering the text inside the map buttons correctly. (`48`, `AK`, `HI`, `PR`)
* convert to verbose css syntax
* Test using svg buttons
* Remove unused style reference
* Fix new icon svg images were "eating" the button's click events
This commit is contained in:
TomNUSDS 2021-08-31 14:40:22 -07:00 • committed by GitHub
commit fba3090d36
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 60 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

25
client/src/styles/global.scss
View file

@ -282,6 +282,7 @@ $j40-blue-background-color: #EFF6FB;
// see more here: https://thatemil.com/blog/2014/04/06/intrinsic-sizing-of-svg-in-responsive-web-design/
.mapboxgl-ctrl-icon {
height: 1em;
pointer-events: none; /* this keeps the icons from "eating" the click events instead of the button getting them */
}
}
@ -296,6 +297,30 @@ $j40-blue-background-color: #EFF6FB;
background-image: url("../../node_modules/uswds/dist/img/usa-icons/remove.svg");
}
}
button.mapboxgl-ctrl-zoom-to-48 {
.mapboxgl-ctrl-icon {
background-image: url("../images/mapbtn-48.svg");
}
}
button.mapboxgl-ctrl-zoom-to-ak {
.mapboxgl-ctrl-icon {
background-image: url("../images/mapbtn-AK.svg");
}
}
button.mapboxgl-ctrl-zoom-to-hi {
.mapboxgl-ctrl-icon {
background-image: url("../images/mapbtn-HI.svg");
}
}
button.mapboxgl-ctrl-zoom-to-pr {
.mapboxgl-ctrl-icon {
background-image: url("../images/mapbtn-PR.svg");
}
}
}