Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consistent 4:3 ratio flag images #1668

Closed
jackocnr opened this issue Jun 22, 2024 · 1 comment
Closed

Consistent 4:3 ratio flag images #1668

jackocnr opened this issue Jun 22, 2024 · 1 comment

Comments

@jackocnr
Copy link
Owner

jackocnr commented Jun 22, 2024

We're currently using the flag images from the region-flags library, which has highly accurate flags, but because of this, the aspect ratios are (necessarily) inconsistent. Some flags are 15px tall e.g. Vatican City, and some are only 8px tall e.g. Qatar. And while most flags are 20px wide e.g. United Kingdom, some are only 13px wide e.g. Nepal. So if we select those 4 countries as our onlyCountries option, we end up with a situation like this (notice how much the flags vary in terms of width/height):

current

Whereas if we switch to the flag-icons library, which uses a consistent 4:3 ratio (as suggested by @bronisMateusz), we end up with this instead (notice how all flags have consistent width/height):

new

While not technically accurate in terms of respecting countries' flag aspect ratios, this provides a much more consistent UI experience.

IMPORTANT: This change will require updating/replacing the existing image build system, which will become much simpler! Note: we currently use the legacy tool Grunt for this (see the root Gruntfile.js, which triggers tasks from the root /grunt/ directory), and it would be fine to keep using that system, or it would also be fine to switch to npm scripts, which I believe would be the more modern approach.

I don't have time to implement this myself right now, but I would welcome a pull request.

@jackocnr
Copy link
Owner Author

Released in v24.0.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant