diff --git a/js/gratipay.js b/js/gratipay.js index dededc58ba..aa0a5e92b1 100644 --- a/js/gratipay.js +++ b/js/gratipay.js @@ -32,9 +32,9 @@ Gratipay.warnOffUsersFromDeveloperConsole = function() { Gratipay.adaptToLongUsernames = function() { var h1 = $('#banner h1'); var nchars = h1.text().length; - if (nchars > 16) + if (nchars > 15) h1.addClass('really-long'); - else if (nchars > 8) + else if (nchars > 7) h1.addClass('long'); h1.show(); }; diff --git a/scss/components/banner.scss b/scss/components/banner.scss index 2fefa3bd27..87226adfce 100644 --- a/scss/components/banner.scss +++ b/scss/components/banner.scss @@ -63,6 +63,14 @@ } } + .countries { + position: absolute; + bottom: 6px; + left: 192px; + width: 32px; + z-index: 3; + } + .details { position: absolute; top: 16px; diff --git a/scss/layouts/responsiveness.scss b/scss/layouts/responsiveness.scss index d312ca8790..a524a8c395 100644 --- a/scss/layouts/responsiveness.scss +++ b/scss/layouts/responsiveness.scss @@ -39,6 +39,14 @@ left: 13px; } } + .countries { + bottom: 3px; + left: 128px; + width: 32px; + img { + margin-bottom: -7px; + } + } .details { font-size: 10px; box-shadow: 0px 0px 16px 8px rgba($black, 0.5); diff --git a/scss/mixins/flags.scss b/scss/mixins/flags.scss new file mode 100644 index 0000000000..58091203a3 --- /dev/null +++ b/scss/mixins/flags.scss @@ -0,0 +1,230 @@ +// https://www.flag-sprites.com/ + +.flag { + width: 32px; + height: 32px; + background: url('flags.png') no-repeat; + + &.AD {background-position: -32px 0} + &.AE {background-position: -64px 0} + &.AF {background-position: -96px 0} + &.AG {background-position: -128px 0} + &.AI {background-position: -160px 0} + &.AL {background-position: -192px 0} + &.AM {background-position: -224px 0} + &.AN {background-position: -256px 0} + &.AO {background-position: -288px 0} + &.AR {background-position: -320px 0} + &.AS {background-position: -352px 0} + &.AT {background-position: -384px 0} + &.AU {background-position: -416px 0} + &.AW {background-position: -448px 0} + &.AZ {background-position: 0 -32px} + &.BA {background-position: -32px -32px} + &.BB {background-position: -64px -32px} + &.BD {background-position: -96px -32px} + &.BE {background-position: -128px -32px} + &.BF {background-position: -160px -32px} + &.BG {background-position: -192px -32px} + &.BH {background-position: -224px -32px} + &.BI {background-position: -256px -32px} + &.BJ {background-position: -288px -32px} + &.BM {background-position: -320px -32px} + &.BN {background-position: -352px -32px} + &.BO {background-position: -384px -32px} + &.BR {background-position: -416px -32px} + &.BS {background-position: -448px -32px} + &.BT {background-position: 0 -64px} + &.BW {background-position: -32px -64px} + &.BY {background-position: -64px -64px} + &.BZ {background-position: -96px -64px} + &.CA {background-position: -128px -64px} + &.CD {background-position: -160px -64px} + &.CF {background-position: -192px -64px} + &.CG {background-position: -224px -64px} + &.CH {background-position: -256px -64px} + &.CI {background-position: -288px -64px} + &.CK {background-position: -320px -64px} + &.CL {background-position: -352px -64px} + &.CM {background-position: -384px -64px} + &.CN {background-position: -416px -64px} + &.CO {background-position: -448px -64px} + &.CR {background-position: 0 -96px} + &.CU {background-position: -32px -96px} + &.CV {background-position: -64px -96px} + &.CY {background-position: -96px -96px} + &.CZ {background-position: -128px -96px} + &.DE {background-position: -160px -96px} + &.DJ {background-position: -192px -96px} + &.DK {background-position: -224px -96px} + &.DM {background-position: -256px -96px} + &.DO {background-position: -288px -96px} + &.DZ {background-position: -320px -96px} + &.EC {background-position: -352px -96px} + &.EE {background-position: -384px -96px} + &.EG {background-position: -416px -96px} + &.EH {background-position: -448px -96px} + &.ER {background-position: 0 -128px} + &.ES {background-position: -32px -128px} + &.ET {background-position: -64px -128px} + &.FI {background-position: -96px -128px} + &.FJ {background-position: -128px -128px} + &.FM {background-position: -160px -128px} + &.FO {background-position: -192px -128px} + &.FR {background-position: -224px -128px} + &.GA {background-position: -256px -128px} + &.GB {background-position: -288px -128px} + &.GD {background-position: -320px -128px} + &.GE {background-position: -352px -128px} + &.GG {background-position: -384px -128px} + &.GH {background-position: -416px -128px} + &.GI {background-position: -448px -128px} + &.GL {background-position: 0 -160px} + &.GM {background-position: -32px -160px} + &.GN {background-position: -64px -160px} + &.GP {background-position: -96px -160px} + &.GQ {background-position: -128px -160px} + &.GR {background-position: -160px -160px} + &.GT {background-position: -192px -160px} + &.GU {background-position: -224px -160px} + &.GW {background-position: -256px -160px} + &.GY {background-position: -288px -160px} + &.HK {background-position: -320px -160px} + &.HN {background-position: -352px -160px} + &.HR {background-position: -384px -160px} + &.HT {background-position: -416px -160px} + &.HU {background-position: -448px -160px} + &.ID {background-position: 0 -192px} + &.IE {background-position: -32px -192px} + &.IL {background-position: -64px -192px} + &.IM {background-position: -96px -192px} + &.IN {background-position: -128px -192px} + &.IQ {background-position: -160px -192px} + &.IR {background-position: -192px -192px} + &.IS {background-position: -224px -192px} + &.IT {background-position: -256px -192px} + &.JE {background-position: -288px -192px} + &.JM {background-position: -320px -192px} + &.JO {background-position: -352px -192px} + &.JP {background-position: -384px -192px} + &.KE {background-position: -416px -192px} + &.KG {background-position: -448px -192px} + &.KH {background-position: 0 -224px} + &.KI {background-position: -32px -224px} + &.KM {background-position: -64px -224px} + &.KN {background-position: -96px -224px} + &.KP {background-position: -128px -224px} + &.KR {background-position: -160px -224px} + &.KW {background-position: -192px -224px} + &.KY {background-position: -224px -224px} + &.KZ {background-position: -256px -224px} + &.LA {background-position: -288px -224px} + &.LB {background-position: -320px -224px} + &.LC {background-position: -352px -224px} + &.LI {background-position: -384px -224px} + &.LK {background-position: -416px -224px} + &.LR {background-position: -448px -224px} + &.LS {background-position: 0 -256px} + &.LT {background-position: -32px -256px} + &.LU {background-position: -64px -256px} + &.LV {background-position: -96px -256px} + &.LY {background-position: -128px -256px} + &.MA {background-position: -160px -256px} + &.MC {background-position: -192px -256px} + &.MD {background-position: -224px -256px} + &.ME {background-position: -256px -256px} + &.MG {background-position: -288px -256px} + &.MH {background-position: -320px -256px} + &.MK {background-position: -352px -256px} + &.ML {background-position: -384px -256px} + &.MM {background-position: -416px -256px} + &.MN {background-position: -448px -256px} + &.MO {background-position: 0 -288px} + &.MQ {background-position: -32px -288px} + &.MR {background-position: -64px -288px} + &.MS {background-position: -96px -288px} + &.MT {background-position: -128px -288px} + &.MU {background-position: -160px -288px} + &.MV {background-position: -192px -288px} + &.MW {background-position: -224px -288px} + &.MX {background-position: -256px -288px} + &.MY {background-position: -288px -288px} + &.MZ {background-position: -320px -288px} + &.NA {background-position: -352px -288px} + &.NC {background-position: -384px -288px} + &.NE {background-position: -416px -288px} + &.NG {background-position: -448px -288px} + &.NI {background-position: 0 -320px} + &.NL {background-position: -32px -320px} + &.NO {background-position: -64px -320px} + &.NP {background-position: -96px -320px} + &.NR {background-position: -128px -320px} + &.NZ {background-position: -160px -320px} + &.OM {background-position: -192px -320px} + &.PA {background-position: -224px -320px} + &.PE {background-position: -256px -320px} + &.PF {background-position: -288px -320px} + &.PG {background-position: -320px -320px} + &.PH {background-position: -352px -320px} + &.PK {background-position: -384px -320px} + &.PL {background-position: -416px -320px} + &.PR {background-position: -448px -320px} + &.PS {background-position: 0 -352px} + &.PT {background-position: -32px -352px} + &.PW {background-position: -64px -352px} + &.PY {background-position: -96px -352px} + &.QA {background-position: -128px -352px} + &.RE {background-position: -160px -352px} + &.RO {background-position: -192px -352px} + &.RS {background-position: -224px -352px} + &.RU {background-position: -256px -352px} + &.RW {background-position: -288px -352px} + &.SA {background-position: -320px -352px} + &.SB {background-position: -352px -352px} + &.SC {background-position: -384px -352px} + &.SD {background-position: -416px -352px} + &.SE {background-position: -448px -352px} + &.SG {background-position: 0 -384px} + &.SI {background-position: -32px -384px} + &.SK {background-position: -64px -384px} + &.SL {background-position: -96px -384px} + &.SM {background-position: -128px -384px} + &.SN {background-position: -160px -384px} + &.SO {background-position: -192px -384px} + &.SR {background-position: -224px -384px} + &.ST {background-position: -256px -384px} + &.SV {background-position: -288px -384px} + &.SY {background-position: -320px -384px} + &.SZ {background-position: -352px -384px} + &.TC {background-position: -384px -384px} + &.TD {background-position: -416px -384px} + &.TG {background-position: -448px -384px} + &.TH {background-position: 0 -416px} + &.TJ {background-position: -32px -416px} + &.TL {background-position: -64px -416px} + &.TM {background-position: -96px -416px} + &.TN {background-position: -128px -416px} + &.TO {background-position: -160px -416px} + &.TR {background-position: -192px -416px} + &.TT {background-position: -224px -416px} + &.TV {background-position: -256px -416px} + &.TW {background-position: -288px -416px} + &.TZ {background-position: -320px -416px} + &.UA {background-position: -352px -416px} + &.UG {background-position: -384px -416px} + &.US {background-position: -416px -416px} + &.UY {background-position: -448px -416px} + &.UZ {background-position: 0 -448px} + &.VA {background-position: -32px -448px} + &.VC {background-position: -64px -448px} + &.VE {background-position: -96px -448px} + &.VG {background-position: -128px -448px} + &.VI {background-position: -160px -448px} + &.VN {background-position: -192px -448px} + &.VU {background-position: -224px -448px} + &.WS {background-position: -256px -448px} + &.YE {background-position: -288px -448px} + &.ZA {background-position: -320px -448px} + &.ZM {background-position: -352px -448px} + &.ZW {background-position: -384px -448px} +} diff --git a/templates/profile.html b/templates/profile.html index 7b9295e051..82868c762c 100644 --- a/templates/profile.html +++ b/templates/profile.html @@ -42,6 +42,19 @@ {% endif %} +{% if participant.has_verified_identity %} +
+ {% for identity in participant.list_identity_metadata(is_verified=True)[:2] %} + {% if identity.is_verified %} + {{ _('verified in: {country}', country=locale.countries[identity.country.code2]) }} + {% endif %} + {% endfor %} +
+{% endif %} +
diff --git a/www/assets/flags.png b/www/assets/flags.png new file mode 100644 index 0000000000..0ac3085272 Binary files /dev/null and b/www/assets/flags.png differ diff --git a/www/assets/gratipay.css.spt b/www/assets/gratipay.css.spt index 5d1217bc0e..7897a39f78 100644 --- a/www/assets/gratipay.css.spt +++ b/www/assets/gratipay.css.spt @@ -17,6 +17,7 @@ @import "scss/mixins/borders-backgrounds-shadows"; @import "scss/mixins/animation"; @import "scss/mixins/transform"; +@import "scss/mixins/flags"; @import "scss/utils"; @import "scss/variables"; diff --git a/www/dashboard/countries.spt b/www/dashboard/countries.spt index 26f790a903..81e68d8681 100644 --- a/www/dashboard/countries.spt +++ b/www/dashboard/countries.spt @@ -6,7 +6,7 @@ if not user.ADMIN: countries = website.db.all(""" - SELECT name + SELECT code , array_agg(username) as usernames , array_agg(is_verified) as verifications FROM participant_identities pi @@ -14,7 +14,7 @@ countries = website.db.all(""" ON p.id = participant_id JOIN countries c ON c.id = country_id - GROUP BY c.name + GROUP BY c.code """) @@ -40,9 +40,9 @@ zip = zip {{ participant.username }} {% for identity in participant.list_identity_metadata() %} | {% if identity.is_verified %} -{{ identity.country.name }} +{{ locale.countries[identity.country.code] }} {% else %} -{{ identity.country.name }} +{{ locale.countries[identity.country.code] }} {% endif %} {% endfor %}
@@ -50,7 +50,7 @@ zip = zip

By Country

{% for country in countries %} -{{ country.name }} +{{ locale.countries[country.code] }} {% for username, is_verified in zip(country.usernames, country.verifications) %} | {% if is_verified %} {{ username }}