Deprecate 16px flag

[benjaminpjones]

Background

OGS maintains a fork of world-flags-sprite, which it uses to display national flags around the site. There are two supported resolutions, 16px and 32px. Maintaining two sets of images is a pain, and there is a lingering bug (#2043) in the 16px flag set.

Suggested Changes

• Re-implement <Flag country=".." big=false> to always use "f32", then scale the small flag accordingly.
  • Check that small flags are showing up with the same layout as they did before. One example is the Ladders page.
• [Cleanup] remove references to the 16px class from this repo

  • online-go.com/src/global_styl/flags16.styl

    Line 20 in 2e8bbd1

    .f16 ._Arab_League{background-position:0 -32px;}

  • online-go.com/src/components/Flag/Flag.styl

    Line 19 in 2e8bbd1

    .f16, .f32 {

  • online-go.com/src/components/Player/PlayerDetails.styl

    Line 40 in 2e8bbd1

    .f16 {

  • ... more?
• [Cleanup] Remove the 16px spritesheet from the flags repo

Related PRs

• Double the resolution of nation flags in games. #2042
• Overlays and border padding for Pride/Swiss/Vatican 32px world-flags-sprite#4

[anoek]

Yep sounds reasonable

[benjaminpjones]

I marked this as a "good first issue" because it's relatively low stakes (worst case - display issues for some flag icons). To anyone who wants to take this on - I'm happy to answer any questions about the codebase!

[brown-eric]

Hey! I'm interested in helping but I'm pretty new to this. Do you think this is a reasonably small workload? If you could help me through this I'd be really grateful

[benjaminpjones]

Very cool!

Do you think this is a reasonably small workload?

I would classify this as a medium-sized project, but shouldn't be too bad if you're already familiar with React and CSS (we're using Stylus, but most of it looks like legal CSS). Here is a breakdown of what I think needs to happen for "Re-implement to always use "f32", then scale the small flag accordingly.":

• In Flag.tsx, instead of setting the class to "f16" for small flags, set the class to "f32" to use the 32px resolution and add another css class to indicate "small".
• In Flag.style, add some styling for the "small" class that transforms scales the image to half its original size. (possibly using transform: scale(0.5, 0.5); or width properties)
• Check existing usages of the small flag should still look about the same. If not, you can adjust individual styling (most files have a corresponding .styl file).
  • https://online-go.com/docs/team / Team.tsx
  • The pop-up profile cards: Player.tsx
  • https://online-go.com/docs/other-go-resources / GoResources.tsx
  • Association links on profile pages: User.tsx
  • Game page (this one is using "big" flags, but double check it doesn't break")
  • More by searching: repo:online-go/online-go.com <Flag (~12 files)

If you could help me through this I'd be really grateful

Definitely check out CONTRIBUTING.md to get started, but happy to answer any other questions you may have

[yingku]

Happy to try and take this.