darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-30 03:08:56 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix issue with jumping buttons

Browse Source 
The content of the map buttons jumped on Chrome
and Safari when focused.

It turns out this was because I was testing in
Firefox which Leaflet had identified as having
touch capability (and so added the .leaflet-touch
class). Leaflet makes the buttons 30px rather than
26px for touch-capable devices/browsers so the
jumping was down to the line-height being set for
the wrong container height.

This adds styles to give a different line-height
when touch is available, to match the Leaflet
styles.
This commit is contained in:
Tom Byers
2021-08-26 16:35:13 +01:00
parent 542be8832d
commit a3854e49b6
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/stylesheets/map.scss
View File

@@ -83,7 +83,7 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
// 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: 26px; // subtract the border from the height (normally 30px)
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.
@@ -152,6 +152,11 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
}
// 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 {