UI for displaying verified country for ~users

[chadwhitacre]

Part of #3994. Land #3976 first.

Punchlist

• comprehend overlap between countries and available flags
• implement a default for when we have no flag (Christmas Island)
• make the flag smaller at smaller page sizes
• tinker with flag position
• tinker with flag popping
• check it with two and three flags
• consider hard-limiting to three displayed identities (maybe a "more" link? seems really rare for individuals ... but Teams ...)
• i18n
• use the is_verified filter
• clean up commits

Pushing Back Upstream

• clean up names ("United States of America (the)" → "the United States"): add schema and Python for countries #3999 (comment)
• filtering on is_verified before slicing: add schema and Python for [un]verifying identities #4001 (comment)

[chadwhitacre]

788d92d:

[chadwhitacre]

4f11ad4:

[chadwhitacre]

7e3ddbe:

[chadwhitacre]

Two works, but three is a little much:

[chadwhitacre]

Capped to two in 31056d4:

[chadwhitacre]

tinker with flag popping

The options aren't great here, because of the way the sprite image is built: since not all flags are the same form factor (I'm looking at you, Nepal), it's hard to put styles on individual flags. I want to keep them on the banner for now since they're part of the basic metadata about a participant. I think they're good enough for now.

[chadwhitacre]

[chadwhitacre]

It'd be helpful for list_identity_metadata to be able to filter by is_verified, to make it easier to both filter and cap.

[chadwhitacre]

Hmm ... the small flags from www.flag-sprites.com are a little too small ...

[chadwhitacre]

I think the regular size are better:

[chadwhitacre]

Alright, tightened up a bit, will probably look gross for Nepal though ...

aebaeb3:

[chadwhitacre]

Actually, not too bad.

926e8e6:

[chadwhitacre]

I was wondering if this was possible (username crashing into flags):

[chadwhitacre]

"No flag available"?

[chadwhitacre]

Or a simple checkmark? "Verified!"

e536a5b:

[chadwhitacre]

comprehend overlap between countries and available flags

[gratipay] $ run defaults.env local.env ./flags.py 

Missing flags:
  AQ Antarctica
  AX Åland Islands
  BL Saint Barthélemy
  BQ Bonaire, Sint Eustatius and Saba
  BV Bouvet Island
  CC Cocos (Keeling) Islands (the)
  CW Curaçao
  CX Christmas Island
  FK Falkland Islands (the) [Malvinas]
  GF French Guiana
  GS South Georgia and the South Sandwich Islands
  HM Heard Island and McDonald Islands
  IO British Indian Ocean Territory (the)
  MF Saint Martin (French part)
  MP Northern Mariana Islands (the)
  NF Norfolk Island
  NU Niue
  PM Saint Pierre and Miquelon
  PN Pitcairn
  SH Saint Helena, Ascension and Tristan da Cunha
  SJ Svalbard and Jan Mayen
  SS South Sudan
  SX Sint Maarten (Dutch part)
  TF French Southern Territories (the)
  TK Tokelau
  UM United States Minor Outlying Islands (the)
  WF Wallis and Futuna
  YT Mayotte

Extra flags:
  AN

[gratipay] $ cat flags.py

#!/usr/bin/env python2
from __future__ import absolute_import, division, print_function, unicode_literals

from gratipay import wireup

env = wireup.env()
db = wireup.db(env)

# copy/pasted from flags.scss
have = set("""\
AD AE AF AG AI AL AM AN AO AR AS AT AU AW AZ BA BB BD BE BF BG BH BI BJ BM BN BO BR BS BT BW BY BZ
CA CD CF CG CH CI CK CL CM CN CO CR CU CV CY CZ DE DJ DK DM DO DZ EC EE EG EH ER ES ET FI FJ FM FO
FR GA GB GD GE GG GH GI GL GM GN GP GQ GR GT GU GW GY HK HN HR HT HU ID IE IL IM IN IQ IR IS IT JE
JM JO JP KE KG KH KI KM KN KP KR KW KY KZ LA LB LC LI LK LR LS LT LU LV LY MA MC MD ME MG MH MK ML
MM MN MO MQ MR MS MT MU MV MW MX MY MZ NA NC NE NG NI NL NO NP NR NZ OM PA PE PF PG PH PK PL PR PS
PT PW PY QA RE RO RS RU RW SA SB SC SD SE SG SI SK SL SM SN SO SR ST SV SY SZ TC TD TG TH TJ TL TM
TN TO TR TT TV TW TZ UA UG US UY UZ VA VC VE VG VI VN VU WS YE ZA ZM ZW""".split())

want = {c.code2: c.name for c in db.all('select * from countries')}

missing = set(want) - have
extra = have - set(want)

print()
print("Missing flags:")
for code2 in sorted(missing):
    print(" ", code2, want[code2])
print()
print("Extra flags:")
for code2 in sorted(extra):
    print(" ", code2)
print()

[chadwhitacre]

Well, I think we can live with that discrepancy. To start with all we need are IN, TT, and US—which we have. :-)

💃

[chadwhitacre]

(username crashing into flags)

#4005 (comment) addressed in 7a9378e.

[chadwhitacre]

The last big thing here is figuring out how we're going to do country names and i18n. It's an exponential problem: we want all countries translated into all languages. And it kinda depends on the phrasing we use: "Verified in the Netherlands," or just "The Netherlands"? Tweaking the wording just a little bit would ripple out into 250 countries x however many languages.

[chadwhitacre]

We can reduce the surface area somewhat by focusing on particular countries. This gets me thinking ahead to #2449: when we start verifying identity programmatically, we're going to have to scope our efforts to just a few countries at first, expanding from there. At some point I put together a list of the countries already represented on Gratipay ... now where is that ...

[chadwhitacre]

Found it!

[H]ere is a list of 31 countries in which we have had customers in the past (sorted by percentage of our customer base—roughly half our customers have been in the U.S.):

United States, Great Britain, Canada, France, Germany, Spain, Poland, Australia, New Zealand, The Netherlands, Finland, India, Brazil, Sweden, Vietnam, Singapore, Pakistan, Japan, Denmark, Czech Republic, Bulgaria, Argentina, Hungary, Korea, Russia, Slovenia, China, Austria, Chile, Ireland, Belgium

[chadwhitacre]

TTO isn't on there, I note ...

[chadwhitacre]

The last big thing here is figuring out how we're going to do country names and i18n.

Hmmm ... https://github.com/onomojo/i18n-country-translations?

[chadwhitacre]

That's a nice place to start. However, I think we'll have to let go of a construction such as "verified in the Netherlands" and go with something like "verified in: Netherlands."

[chadwhitacre]

Hmmm ... https://github.com/onomojo/i18n-country-translations?

Nevermind ... Babel already gives us this!

Imagine for example you have a list of countries that users can choose from, and you’d like to display the names of those countries in the language the user prefers. Instead of translating all those country names yourself in your application, you can make use of the translations provided by the locale data included with Babel, which is based on the Common Locale Data Repository (CLDR) developed and maintained by the Unicode Consortium.

The old identities form uses it. ☺️

[chadwhitacre]

👍

[chadwhitacre]

Oh yeeeeeeeaaaaaaahhhhh!

36262a3:

[chadwhitacre]

Rebased on #4003 at 9907401. Previous head was 36262a3.

[chadwhitacre]

It'd be helpful for list_identity_metadata to be able to filter by is_verified, to make it easier to both filter and cap.

8b098f9:

[chadwhitacre]

Alright, scrapping this one for parts ...