Skip to content

Fix zoom button positioning and size in styledMode#172

Merged
cfarm merged 2 commits into
masterfrom
fix-geomap-zoom-button-styles
Apr 3, 2019
Merged

Fix zoom button positioning and size in styledMode#172
cfarm merged 2 commits into
masterfrom
fix-geomap-zoom-button-styles

Conversation

@cfarm

@cfarm cfarm commented Apr 1, 2019

Copy link
Copy Markdown
Contributor

Fixes wonky zoom buttons that appeared after turning on styledMode for geographic maps in #171

Additions

  • larger font-size for more legible zoom-out button icon (minus sign)
  • custom positioning of the icon elements with CSS

Testing

  • gulp build && gulp watch

Screenshots

Before
image

After
Screen Shot 2019-04-01 at 5 59 01 PM

Notes

  • I tested this in Chrome, Firefox, IE, Edge, and mobile browsers. it is not pixel-perfect across browsers but I optimized for Chrome and IE/Edge. The minus sign appears to be 1 pixel lower or so in Firefox:
    Screen Shot 2019-04-01 at 6 02 02 PM

Todos

Checklist

  • Changes are limited to a single goal (no scope creep)
  • Code can be automatically merged (no conflicts)
  • Code follows the standards laid out in the front end playbook
  • Passes all existing automated tests
  • New functions include new tests
  • New functions are documented (with a description, list of inputs, and expected output)
  • Placeholder code is flagged
  • Visually tested in supported browsers and devices
  • Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

@cfarm
cfarm requested review from Scotchester and mistergone April 1, 2019 22:03
@cfarm

cfarm commented Apr 2, 2019

Copy link
Copy Markdown
Contributor Author

@Scotchester this is the best I could do for IE11:

  • Removed the larger font-size that I had added to make the minus sign more prominent. This was making it positioned at the bottom of the button which was the majority of the wonkiness
  • I tried using Highcharts options to set the transform attribute, but those options actually only allow me to set the x and y attributes for the button as a whole, not just the plus and minus text. So I had to stick with CSS to position them across browsers that support it.

IE11

Screen Shot 2019-04-02 at 6 13 50 PM

Chrome

Screen Shot 2019-04-02 at 6 15 41 PM

Firefox

Screen Shot 2019-04-02 at 6 26 52 PM

@Scotchester Scotchester left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good enough to me, @cfarm.

@cfarm
cfarm merged commit 84534d8 into master Apr 3, 2019
@cfarm
cfarm deleted the fix-geomap-zoom-button-styles branch April 3, 2019 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants