Skip to content
This repository has been archived by the owner on Feb 8, 2018. It is now read-only.

Connected accounts restyle #2142

Merged
merged 8 commits into from
Mar 14, 2014
Merged

Connected accounts restyle #2142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5a51fee
Restyle Accounts Elsewhere section.
ESWAT Mar 14, 2014
864ce6f
Cleaned up Bitcoin account presentation
ESWAT Mar 14, 2014
9ab34ae
Cleaned up avatar + username presentation
ESWAT Mar 14, 2014
f0869f4
Shorten right positon of Disconnect button
ESWAT Mar 14, 2014
1a186b2
Accounts are full-width in small-screen and tablet sizes
ESWAT Mar 14, 2014
aa0d49a
Adjustments to Balanced Payments section
ESWAT Mar 14, 2014
292de15
Clean up copy in unconnected case
chadwhitacre Mar 14, 2014
a3a2cce
Harmonize Balanced copy w/ the rest
chadwhitacre Mar 14, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions js/gittip/profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ Gittip.profile.init = function() {
});


$('.bitcoin').on("click", "a.toggle-bitcoin", function()
$('.bitcoin').on("click", ".toggle-bitcoin", function()
{
// "Add bitcoin address" text or existing
// bitcoin address was clicked, show the text box
Expand All @@ -301,12 +301,12 @@ Gittip.profile.init = function() {
$('a.bitcoin').text(d.bitcoin_address);
$('.bitcoin').toggle();
if (d.bitcoin_address === '') {
html = "Add a <a href=\"javascript:;\" class=\"toggle-bitcoin\">Bitcoin address</a>.";
html = "<span class=\"none\">None</span>"
html += "<button class=\"toggle-bitcoin\">+ Add</button>";
} else {
html = "<a rel=\"me\" href=\"http://blockchain.info/address/";
html = "<a class=\"address\" rel=\"me\" href=\"http://blockchain.info/address/";
html += d.bitcoin_address + "\">" + d.bitcoin_address + "</a>";
html += "<div class=\"edit-bitcoin\"><a href=\"javascript:;\" class=\"toggle-bitcoin\">Edit</a> bitcoin address ";
html += "</div>";
html += "<button class=\"toggle-bitcoin\">Edit</button>";
}
$('div.bitcoin').html(html);
$this.text('Save');
Expand Down
64 changes: 59 additions & 5 deletions scss/modules.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,35 +71,89 @@ a.mini-user:hover {
#accounts {
margin-bottom: 12pt;
width: 400px;
span.none {
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 {
float: right;
margin-top: -13px;
}
table {
width: 100%;
}
tr {
border-top: 1px solid $light-gray;

&:last-of-type {
border-bottom: 1px solid $light-gray;
}
}
td {
text-align: left;
vertical-align: middle;
vertical-align: -webkit-baseline-middle;
line-height: 100%;

&.account-type {
border-right: 1pt solid #B2A196;
padding: 6pt 6pt 6pt 0;
width: 49px;
margin-bottom: 3px;

img {
width: 36pt;
height: 36pt;
}
}
}
div.account-type {
font-size: x-small;
font-size: 12px;
clear: both;
color: $light-brown;
color: $gray;
text-transform: uppercase;
padding: 3px 0;
}
.account-details {
padding: 10px;
position: relative;
}
.account-username {
line-height: 16pt;
}
.close {
position: absolute;
background-image: url("/assets/close_button.png");
background-size: cover;
width: 15px;
height: 15px;
top: 39px;
right: 10px;

&:hover {
cursor: pointer;
}
}
.payments-by {
background-image: url("/assets/payments-by.png");
background-size: cover;
width: 200px;
height: 24px;
display: inline-block;
float: right;
margin-bottom: 5px;
padding-left: 6pt;
> a {
line-height: 24pt;
}
}
img.avatar {
width: 24pt;
height: 24pt;
width: 16pt;
height: 16pt;
float: left;
margin-right: 3pt;
}
Expand Down
5 changes: 3 additions & 2 deletions scss/profile-edit.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,15 @@
.bitcoin-submit {
.address input {
width: 100%;
margin: 5px 0;
}
.buttons {
margin-top: 3pt;
}
}
.bitcoin {
.edit-bitcoin {
margin-top: 3pt;
.address {
font-size: 13px;
}
}
}
12 changes: 8 additions & 4 deletions scss/responsiveness.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@
}
}

#accounts {
width: 100%;
}

.col0, .col1, .col2 {
float: none;
margin: auto;
Expand All @@ -29,7 +33,7 @@
// Smaller tablets in portrait/landscape phones
@media (max-width: 700px) {
.luxury {
display: none !important;
display: none !important;
}

#hero {
Expand Down Expand Up @@ -62,7 +66,7 @@
max-width: 100%;
text-align: left;
width: 480px;

.social, ul, li {
float: none;
}
Expand Down Expand Up @@ -113,7 +117,7 @@
#leaderboard {
.people {
width: $people-column-width * 3;

li:nth-child(4n) {
display: none;
}
Expand Down Expand Up @@ -145,4 +149,4 @@
}
}
}
}
}
18 changes: 8 additions & 10 deletions templates/account-row.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,28 @@
<img src="/assets/{{ platform.name }}.png" />
</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 %}
{% call auth_button(platform.name, 'connect') %}
Connect a {{ platform.display_name }} account
+ Add
{% endcall %}
{% else %}
No {{ platform.display_name }} account connected.
{% endif %}
{% else %}
<a rel="me" href="{{ account.html_url|e }}"
><img class="avatar" src="{{ get_avatar_url(account)|e }}"
/>{{ account.user_name|e }}
<img class="avatar" src="{{ get_avatar_url(account)|e }}"/>
<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 %}
<button class="account-delete"
<div class="account-delete close" title="Disconnect"
data-platform="{{ platform.name }}"
data-user_id="{{ account.user_id }}">
Disconnect
</button>
</div>
{% endif %}
<div class="account-type">on {{ platform.display_name }}</div>
{% endif %}
</td>
</tr>
Expand Down
28 changes: 12 additions & 16 deletions templates/connected-accounts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,32 +15,24 @@ <h2>Connected Accounts</h2>
<img src="/assets/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 %}
<div>
{% endif %}
{% if participant.bitcoin_address %}
<a rel="me" href="http://blockchain.info/address/{{ participant.bitcoin_address }}">
<a class="address" rel="me" href="http://blockchain.info/address/{{ participant.bitcoin_address }}">
{{ participant.bitcoin_address }}
</a>
{% if not user.ANON and user.participant == participant %}
<div class="edit-bitcoin">
(<a href="javascript:;" class="toggle-bitcoin">Edit</a>) Bitcoin address
</div>
{% else %}
<div class="account-type">
Bitcoin address
</div>

<button class="toggle-bitcoin">Edit</button>
{% endif %}

{% else %}
<span class="none">None</span>
{% if not user.ANON and user.participant == participant %}
Add a <a href="javascript:;" class="toggle-bitcoin">Bitcoin address</a>.
{% else %}
No Bitcoin receiving address.
<button class="toggle-bitcoin">+ Add</button>
{% endif %}
{% endif %}
</div>
Expand All @@ -67,6 +59,13 @@ <h2>Connected Accounts</h2>
<img src="/assets/balanced-avatar.png" />
</td>
<td class="account-details">
<div class="account-type">
Balanced Payments
{% if user.ADMIN and participant.balanced_customer_href %}
(<a href="https://dashboard.balancedpayments.com/#/{{ participant.balanced_customer_href[4:] }}"
>view on dashboard</a>)
{% endif %}
</div>
{% if user.participant == participant %}

<a href="/credit-card.html">Credit card</a>:
Expand All @@ -88,9 +87,6 @@ <h2>Connected Accounts</h2>
<span>{% if participant.last_ach_result != "" %}&#x2718;{% else %}&#x2714;{% endif %}</span>

{% endif %}
<div class="account-type">{% if user.ADMIN and participant.balanced_customer_href %}
<a href="https://dashboard.balancedpayments.com/#/{{ participant.balanced_customer_href[4:] }}"
>on Balanced Payments</a>{% else %}on Balanced Payments{% endif %}</div>
</td>
</tr>
</table>
Binary file added www/assets/close_button.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.