Style verified and unverified cards

gratipay · May 9, 2016 · c45687a · c45687a
1 parent df2b9b5
commit c45687a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/scss/pages/identities.scss b/scss/pages/identities.scss
@@ -15,16 +15,26 @@
             margin-right: 0;
         }
 
+        &.verified {
+            background-image: radial-gradient( circle at 36px 27px
+                                             , lighten($green, 60%) 0%
+                                             , lighten($green, 50%) 100%
+                                              );
+        }
+
         &.add {
-            background: #f6f6f6;
-            color: #aaa;
+            background: $lightest-gray;
+            color: $medium-gray;
             border-style: dashed;
             @include box-shadow(0,0,0);
-            border: 2px dashed #ccc;
+            border: 2px dashed $darker-gray;
 
             &:hover {
                 color: $black;
-                background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #ffffff 0%, #f6f6f6 70px);
+                background-image: radial-gradient( ellipse farthest-corner at 50% 50%
+                                                 , $white 0%
+                                                 , $lightest-gray 50%
+                                                  );
             }
         }
 
@@ -38,12 +48,15 @@
             white-space: nowrap;
             margin: 0;
             padding: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         .status {
             position: absolute;
             bottom: 20px;
             right: 20px;
+            font: normal 9px $Mono;
         }
     }
 }
diff --git a/scss/variables.scss b/scss/variables.scss
@@ -16,6 +16,7 @@ $medium-gray: #999;
 $gray: #555;
 $light-gray: #DDD;
 $lighter-gray: #EEE;
+$lightest-gray: #F6F6F6;
 
 $red: #C00;
 $light-red: #F99;

diff --git a/www/~/%username/identities/index.spt b/www/~/%username/identities/index.spt
@@ -8,23 +8,22 @@ title = _("Identities")
 {% block content %}
 <div id="identities">
 {% for identity in participant.list_identity_metadata() %}
-<div class="card">
+<div class="card {% if identity.is_verified %}verified{% else %}unverified{% endif %}">
     <h2>{{ locale.countries[identity.country.code2] }}</h2>
     <img class="flag {{ identity.country.code2 }}"
-         alt="{{ _('verified in: {country}', country=locale.countries[identity.country.code2]) }}"
-         title="{{ _('verified in: {country}', country=locale.countries[identity.country.code2]) }}"
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=">
     <div class="status">
         {% if identity.is_verified %}
-        &check;
+        {{ _("Verified") }}
         {% else %}
+        {{ _("Unverified") }}
         {% endif %}
     </div>
 </div>
 {% endfor %}
 
 <button class="card add">
-    Add Identity
+    {{ _("Add Identity") }}
 </button>
 
 </div>