make it look more like the original mockup

also fixes #2271
gratipay · Apr 29, 2014 · c123280 · c123280
1 parent d1de7ed
commit c123280
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 27 deletions.
diff --git a/scss/modules.scss b/scss/modules.scss
@@ -86,9 +86,22 @@ a.mini-user:hover {
         font-style: italic;
         color: $gray;
     }
-    .auth-button, .account-delete, .toggle-bitcoin, .toggle-email {
+    .auth-button, .account-delete {
         float: right;
-        margin-top: -13px;
+        margin-top: 8px;
+    }
+    .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%;
@@ -103,15 +116,9 @@ a.mini-user:hover {
     td {
         text-align: left;
         vertical-align: middle;
-        vertical-align: -webkit-baseline-middle;
         line-height: 100%;
 
-        /*
-         * 15pt is for top/bottom padding; it makes it so the platform icon will
-         * fit in the empty space.
-         * TODO: This should be calculated from $AvatarSize and related variables.
-         */
-        padding: 15pt 6pt 15pt 0;
+        padding: 6pt 0;
 
         &.account-type {
             width: 49px;
@@ -124,8 +131,8 @@ a.mini-user:hover {
             // Width and height of the platform icon. 70% of avatar size.
             $PlatformImageSize: round($AvatarSize * 0.7);
 
-            // Right/bottom offset of the platform icon.
-            $PlatformImageOffset: $PlatformImageSize - round($PlatformImageSize * 0.5);
+            // Right offset of the platform icon.
+            $PlatformImageOffset: round($PlatformImageSize * 0.5);
 
             // The amount of the platform icon that overflows into surrounding content.
             $PlatformImageOverflow: $PlatformImageSize - $PlatformImageOffset;
@@ -144,37 +151,40 @@ a.mini-user:hover {
                 width: $PlatformImageSize;
                 height: $PlatformImageSize;
                 position: absolute;
-                bottom: -$PlatformImageOffset;
+                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;

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,7 +2,7 @@
 
 {% 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">
             <div class="sanity-preserving-wrapper">
                 {% if account != None %}
@@ -27,7 +27,7 @@
                     {% 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>

diff --git a/templates/connected-accounts.html b/templates/connected-accounts.html
@@ -42,9 +42,7 @@ <h2>Other Giving Options</h2>
                 {% else %}
                     <span class="none">None</span>
                     {% if not user.ANON and user.participant == participant %}
-                        <div class="auth-button">
-                            <button class="toggle-bitcoin">+ Add</button>
-                        </div>
+                        <button class="toggle-bitcoin">+ Add</button>
                     {% endif %}
                 {% endif %}
             </div>