From 00f6985aff24f0dd9efe76a26fa9a94974556171 Mon Sep 17 00:00:00 2001 From: Nik Markwell Date: Wed, 16 Apr 2014 16:04:33 -0400 Subject: [PATCH 1/9] Improve display of connected accounts and avatars. --- scss/modules.scss | 46 +++++++++++++++++++++++++++++++------- templates/account-row.html | 10 +++++++-- 2 files changed, 46 insertions(+), 10 deletions(-) diff --git a/scss/modules.scss b/scss/modules.scss index 8e476366eb..f393dec715 100644 --- a/scss/modules.scss +++ b/scss/modules.scss @@ -116,9 +116,45 @@ a.mini-user:hover { 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/bottom offset of the platform icon. + $PlatformImageOffset: $PlatformImageSize - round($PlatformImageSize * 0.5); + + // The amount of the platform icon that overflows into surrounding content. + $PlatformImageOverflow: $PlatformImageSize - $PlatformImageOffset; + + .sanity-preserving-wrapper { + position: relative; + margin-right: $PlatformImageOverflow; + // The 3pt is not an *entirely* magic number: + // it is somehow related to the padding-bottom, and proves to + // always be the correct value to use, even when scaling the + // avatar size. + margin-bottom: $PlatformImageOverflow - 3pt; + } + img { - width: 36pt; - height: 36pt; + &.avatar { + width: $AvatarSize; + height: $AvatarSize; + } + + &.platform { + width: $PlatformImageSize; + height: $PlatformImageSize; + position: absolute; + bottom: -$PlatformImageOffset; + right: -$PlatformImageOffset; + border-radius: 3em; + border: 2px solid #FFFFFF; + background-color: #D7E4DE; + } } } } @@ -150,12 +186,6 @@ a.mini-user: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/templates/account-row.html b/templates/account-row.html index 774a72148d..a339a58b74 100644 --- a/templates/account-row.html +++ b/templates/account-row.html @@ -4,7 +4,14 @@ {% set account = accounts.get(platform.name, None) %} - +
+ {% if account != None %} + + {% else %} + + {% endif %} + +
{{ platform.display_name }}
@@ -16,7 +23,6 @@ {% endcall %} {% endif %} {% else %} - {{ account.user_name|e }} {% if account.display_name and account.display_name != account.user_name %} From 93550c9a08387cbfd289ea95a846235a22460c37 Mon Sep 17 00:00:00 2001 From: Nik Markwell Date: Fri, 18 Apr 2014 17:51:54 -0400 Subject: [PATCH 2/9] When no account attached, show platform icon where avatar is + don't show avatar at all. --- scss/modules.scss | 28 +++++++++++++--------------- templates/account-row.html | 2 -- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/scss/modules.scss b/scss/modules.scss index f393dec715..85170ceaa2 100644 --- a/scss/modules.scss +++ b/scss/modules.scss @@ -139,22 +139,20 @@ a.mini-user:hover { margin-bottom: $PlatformImageOverflow - 3pt; } - img { - &.avatar { - width: $AvatarSize; - height: $AvatarSize; - } + img.avatar, img.platform { + width: $AvatarSize; + height: $AvatarSize; + } - &.platform { - width: $PlatformImageSize; - height: $PlatformImageSize; - position: absolute; - bottom: -$PlatformImageOffset; - right: -$PlatformImageOffset; - border-radius: 3em; - border: 2px solid #FFFFFF; - background-color: #D7E4DE; - } + img.avatar ~ img.platform { + width: $PlatformImageSize; + height: $PlatformImageSize; + position: absolute; + bottom: -$PlatformImageOffset; + right: -$PlatformImageOffset; + border-radius: 3em; + border: 2px solid #FFFFFF; + background-color: #D7E4DE; } } } diff --git a/templates/account-row.html b/templates/account-row.html index a339a58b74..24ad04d11d 100644 --- a/templates/account-row.html +++ b/templates/account-row.html @@ -7,8 +7,6 @@
{% if account != None %} - {% else %} - {% endif %}
From 0f309a77f05f05ae9a45adf2f46af1c713d967e9 Mon Sep 17 00:00:00 2001 From: Nik Markwell Date: Fri, 18 Apr 2014 19:12:00 -0400 Subject: [PATCH 3/9] Fix whitespace around images; remove the need for a magic number. --- scss/modules.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/scss/modules.scss b/scss/modules.scss index 85170ceaa2..502900266b 100644 --- a/scss/modules.scss +++ b/scss/modules.scss @@ -111,8 +111,14 @@ a.mini-user:hover { 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; + &.account-type { - padding: 6pt 6pt 6pt 0; width: 49px; margin-bottom: 3px; @@ -132,11 +138,6 @@ a.mini-user:hover { .sanity-preserving-wrapper { position: relative; margin-right: $PlatformImageOverflow; - // The 3pt is not an *entirely* magic number: - // it is somehow related to the padding-bottom, and proves to - // always be the correct value to use, even when scaling the - // avatar size. - margin-bottom: $PlatformImageOverflow - 3pt; } img.avatar, img.platform { From f7d979bbf83afe94e961297f91e911e3a73ca1bb Mon Sep 17 00:00:00 2001 From: Nik Markwell Date: Fri, 18 Apr 2014 19:52:36 -0400 Subject: [PATCH 4/9] Move platform names below the account names; fix bitcoin button. --- templates/account-row.html | 3 ++- templates/connected-accounts.html | 7 +++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/templates/account-row.html b/templates/account-row.html index 24ad04d11d..f4fbcc56f2 100644 --- a/templates/account-row.html +++ b/templates/account-row.html @@ -12,7 +12,6 @@ - {% if account == None %} None {% if not user.ANON and user.participant == participant %} @@ -34,6 +33,8 @@ {% endif %} {% endif %} + + {% endmacro %} diff --git a/templates/connected-accounts.html b/templates/connected-accounts.html index e30b61236e..a57f74fac0 100644 --- a/templates/connected-accounts.html +++ b/templates/connected-accounts.html @@ -26,7 +26,6 @@

Other Giving Options

- {% if not user.ANON and user.participant == participant %}
{% else %} @@ -43,7 +42,9 @@

Other Giving Options

{% else %} None {% if not user.ANON and user.participant == participant %} - +
+ +
{% endif %} {% endif %}
@@ -60,6 +61,8 @@

Other Giving Options

+ + {{ account_row(website.platforms.venmo, accounts, auth_button) }} From 42f5cc38ce347259e06ca9a19107dccff7f1b1fd Mon Sep 17 00:00:00 2001 From: Changaco Date: Tue, 29 Apr 2014 16:09:21 +0200 Subject: [PATCH 5/9] remove obsolete style --- scss/modules.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/scss/modules.scss b/scss/modules.scss index 502900266b..5548a5c0e7 100644 --- a/scss/modules.scss +++ b/scss/modules.scss @@ -86,11 +86,6 @@ a.mini-user:hover { font-style: italic; color: $gray; } - #cc-delete, #cb-delete, #ba-delete { - display: inline-block; - float: right; - margin-top: -13px; - } .auth-button, .account-delete, .toggle-bitcoin, .toggle-email { float: right; margin-top: -13px; From d1de7ed2e6d6eccb99be16c0a455a01a1fd872fb Mon Sep 17 00:00:00 2001 From: Changaco Date: Tue, 29 Apr 2014 16:11:34 +0200 Subject: [PATCH 6/9] fix sizes of images in Account Tab --- scss/modules.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/modules.scss b/scss/modules.scss index 5548a5c0e7..26aff4e6e7 100644 --- a/scss/modules.scss +++ b/scss/modules.scss @@ -135,7 +135,7 @@ a.mini-user:hover { margin-right: $PlatformImageOverflow; } - img.avatar, img.platform { + img { width: $AvatarSize; height: $AvatarSize; } From c123280c0c1b17971e314c26a3360f6b6e535eb1 Mon Sep 17 00:00:00 2001 From: Changaco Date: Tue, 29 Apr 2014 19:53:09 +0200 Subject: [PATCH 7/9] make it look more like the original mockup also fixes #2271 --- scss/modules.scss | 52 ++++++++++++++++++------------- scss/profile-edit.scss | 2 +- templates/account-row.html | 4 +-- templates/connected-accounts.html | 4 +-- 4 files changed, 35 insertions(+), 27 deletions(-) diff --git a/scss/modules.scss b/scss/modules.scss index 26aff4e6e7..bc9bd3a7a1 100644 --- 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,7 +151,7 @@ a.mini-user:hover { width: $PlatformImageSize; height: $PlatformImageSize; position: absolute; - bottom: -$PlatformImageOffset; + bottom: -6pt; right: -$PlatformImageOffset; border-radius: 3em; border: 2px solid #FFFFFF; @@ -152,29 +159,32 @@ a.mini-user:hover { } } } + 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 index 10cb87efd7..dbdf9ed531 100644 --- 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 index f4fbcc56f2..17e87c2d64 100644 --- 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) %} - +
{% if user.participant == participant %} - diff --git a/templates/connected-accounts.html b/templates/connected-accounts.html index a57f74fac0..d2402da658 100644 --- a/templates/connected-accounts.html +++ b/templates/connected-accounts.html @@ -42,9 +42,7 @@

Other Giving Options

{% else %} None {% if not user.ANON and user.participant == participant %} -
- -
+ {% endif %} {% endif %}
From f2743fb8d4ad0100732a65d2c83f7398eb7e3aa7 Mon Sep 17 00:00:00 2001 From: Changaco Date: Tue, 29 Apr 2014 20:11:03 +0200 Subject: [PATCH 8/9] fix the spacing between a platform's name and its icon --- scss/modules.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/scss/modules.scss b/scss/modules.scss index bc9bd3a7a1..69a53dec35 100644 --- a/scss/modules.scss +++ b/scss/modules.scss @@ -134,12 +134,9 @@ a.mini-user:hover { // 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; - .sanity-preserving-wrapper { position: relative; - margin-right: $PlatformImageOverflow; + margin-right: $PlatformImageOffset - 4pt; } img { From 44784f91c0be31cab196a4807770084a2b8bfee1 Mon Sep 17 00:00:00 2001 From: Changaco Date: Tue, 29 Apr 2014 20:13:35 +0200 Subject: [PATCH 9/9] push platform icons a bit more to the right --- scss/modules.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/modules.scss b/scss/modules.scss index 69a53dec35..71e14dcc92 100644 --- a/scss/modules.scss +++ b/scss/modules.scss @@ -132,7 +132,7 @@ a.mini-user:hover { $PlatformImageSize: round($AvatarSize * 0.7); // Right offset of the platform icon. - $PlatformImageOffset: round($PlatformImageSize * 0.5); + $PlatformImageOffset: round($PlatformImageSize * 0.6); .sanity-preserving-wrapper { position: relative;