Merge pull request #2265 from gittip/issue-2154

Improve display of connected accounts and avatars.
gratipay · Apr 29, 2014 · 58265c4 · 58265c4
2 parents aad800c + 44784f9
commit 58265c4
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 32 deletions.
diff --git a/scss/modules.scss b/scss/modules.scss
@@ -86,14 +86,22 @@ a.mini-user:hover {
         font-style: italic;
         color: $gray;
     }
-    #cc-delete, #cb-delete, #ba-delete {
-        display: inline-block;
+    .auth-button, .account-delete {
         float: right;
-        margin-top: -13px;
+        margin-top: 8px;
     }
-    .auth-button, .account-delete, .toggle-bitcoin, .toggle-email {
-        float: right;
-        margin-top: -13px;
+    .toggle-bitcoin, .toggle-email {
+        position: absolute;
+        right: 0;
+    }
+    .toggle-bitcoin {
+        margin-top: 8px;
+    }
+    .account-type ~ .auth-button, .toggle-email {
+        margin-top: -1.25em;
+    }
+    td > div {
+        position: relative;
     }
     table {
         width: 100%;
@@ -108,54 +116,77 @@ a.mini-user:hover {
     td {
         text-align: left;
         vertical-align: middle;
-        vertical-align: -webkit-baseline-middle;
         line-height: 100%;
 
+        padding: 6pt 0;
+
         &.account-type {
-            padding: 6pt 6pt 6pt 0;
             width: 49px;
             margin-bottom: 3px;
 
+            // Width and height of the avatar.
+            // The images and whitespace surrounding them scale to based on this.
+            $AvatarSize: 36pt;
+
+            // Width and height of the platform icon. 70% of avatar size.
+            $PlatformImageSize: round($AvatarSize * 0.7);
+
+            // Right offset of the platform icon.
+            $PlatformImageOffset: round($PlatformImageSize * 0.6);
+
+            .sanity-preserving-wrapper {
+                position: relative;
+                margin-right: $PlatformImageOffset - 4pt;
+            }
+
             img {
-                width: 36pt;
-                height: 36pt;
+                width: $AvatarSize;
+                height: $AvatarSize;
+            }
+
+            img.avatar ~ img.platform {
+                width: $PlatformImageSize;
+                height: $PlatformImageSize;
+                position: absolute;
+                bottom: -6pt;
+                right: -$PlatformImageOffset;
+                border-radius: 3em;
+                border: 2px solid #FFFFFF;
+                background-color: #D7E4DE;
             }
         }
     }
+    tr.has-avatar > td {
+        vertical-align: bottom;
+    }
     div.account-type {
         font-size: 12px;
-        clear: both;
         color: $gray;
         text-transform: uppercase;
-        padding: 3px 0;
+        &:first-child {
+            padding-bottom: 3px;
+        }
+        &:last-child {
+            padding-top: 3px;
+        }
     }
     .account-details {
-        padding: 10px;
-        position: relative;
+        padding: 6pt;
         word-break: break-all;
     }
-    .account-username {
+    .account-username, span.none {
         line-height: 16pt;
     }
-    .close {
-        position: absolute;
+    .account-delete {
         background-image: url("close-button.png");
         background-size: cover;
         width: 15px;
         height: 15px;
-        top: 39px;
-        right: 10px;
 
         &:hover {
             cursor: pointer;
         }
     }
-    img.avatar {
-        width: 16pt;
-        height: 16pt;
-        float: left;
-        margin-right: 3pt;
-    }
 }
 
 #members { /* used on accounts elsewhere for GitHub org = Bitbucket team */

diff --git a/scss/profile-edit.scss b/scss/profile-edit.scss
@@ -62,7 +62,7 @@
             width: 100%;
             margin: 5px 0;
         }
-        .buttons {
+        .buttons > button {
             margin-top: 3pt;
         }
     }

diff --git a/templates/account-row.html b/templates/account-row.html
@@ -2,12 +2,16 @@
 
 {% macro account_row(platform, accounts, auth_button) %}
     {% set account = accounts.get(platform.name, None) %}
-    <tr>
+    <tr class="{{ 'has-avatar' if account }}">
         <td class="account-type">
-            <img src="{{ website.asset_url }}/{{ platform.name }}.png" />
+            <div class="sanity-preserving-wrapper">
+                {% if account != None %}
+                    <img class="avatar" src="{{ avatar_url(account) }}"/>
+                {% endif %}
+              <img class="platform" src="{{ website.asset_url }}/{{ platform.name }}.png" />
+            </div>
         </td>
         <td class="account-details">
-            <div class="account-type">{{ platform.display_name }}</div>
             {% if account == None %}
                 <span class="none">None</span>
                 {% if not user.ANON and user.participant == participant %}
@@ -16,20 +20,21 @@
                     {% endcall %}
                 {% endif %}
             {% else %}
-                <img class="avatar" src="{{ avatar_url(account) }}"/>
                 <a class="account-username" rel="me" href="{{ account.html_url|e }}"
                     >{{ account.user_name|e }}
                     {% if account.display_name and account.display_name != account.user_name %}
                         ({{ account.display_name|e }})
                     {% endif %}
                 </a>
                 {% if user.participant == participant %}
-                    <div class="account-delete close" title="Disconnect"
+                    <div class="account-delete" title="Disconnect"
                             data-platform="{{ platform.name }}"
                             data-user_id="{{ account.user_id }}">
                     </div>
                 {% endif %}
             {% endif %}
+
+            <div class="account-type">{{ platform.display_name }}</div>
         </td>
     </tr>
 {% endmacro %}
diff --git a/templates/connected-accounts.html b/templates/connected-accounts.html
@@ -26,7 +26,6 @@ <h2>Other Giving Options</h2>
             <img src="{{ website.asset_url }}/bitcoin.png" />
         </td>
         <td class="account-details">
-            <div class="account-type">Bitcoin</div>
             {% if not user.ANON and user.participant == participant %}
                 <div class="bitcoin">
             {% else %}
@@ -60,6 +59,8 @@ <h2>Other Giving Options</h2>
                     <button type="cancel" class="bitcoin cancel hidden">Cancel</button>
                 </div>
             </form>
+
+            <div class="account-type">Bitcoin</div>
         </td>
     </tr>
     {{ account_row(website.platforms.venmo, accounts, auth_button) }}