Skip to content
This repository was archived by the owner on May 16, 2019. It is now read-only.

Commit e1e3ffd

Browse files
jjeffryesjjeffryes
committed
Makes the addresses in settings flexible
- only the country and name are required - add a contact method field - improve the error message - improve the CSS in the address boxes - remove right: 0 from the positionBottom class, and update one element to use positionBottomRight instead
1 parent 6bc461e commit e1e3ffd

File tree

7 files changed

+105
-64
lines changed

7 files changed

+105
-64
lines changed

‎css/obBase.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1189,6 +1189,10 @@ label.fieldItem {
11891189
margin-bottom: 30px;
11901190
}
11911191

1192+
.row40 {
1193+
margin-bottom: 40px;
1194+
}
1195+
11921196
.row60 {
11931197
margin-bottom: 60px;
11941198
}
@@ -4806,6 +4810,14 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
48064810
right: 303px;
48074811
}
48084812

4813+
.addressBox {
4814+
padding: 10px;
4815+
font-size: 15px;
4816+
border-radius: 3px;
4817+
min-height: 120px;
4818+
position: relative;
4819+
}
4820+
48094821
/*========== utility classes ==========*/
48104822

48114823
/* the #ov1 id is on the HTML tag. It is used to force specificity
@@ -4888,7 +4900,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
48884900
#ov1 .positionBottom {
48894901
position: absolute;
48904902
bottom: 0;
4891-
right: 0;
48924903
}
48934904

48944905
#ov1 .positionTop {

‎js/languages/en-US.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,8 @@
161161
"ShipToCity": "City",
162162
"ShipToState": "State/Province/Region",
163163
"ShipToPostalCode": "Postal code",
164+
"ShipToOther": "Contact Information",
165+
"ShipToOtherPlaceholder": "Alternate method(s) the seller can use to contact you, like email",
164166
"ShipToCountry": "Country",
165167
"EnableNotifications": "Enable Notifications",
166168
"SSLOn": "SSL on",
@@ -505,6 +507,7 @@
505507
"saveError": "Data could not be saved.",
506508
"getError": "Data could not be retrieved.",
507509
"missingError": "Some fields are missing or incorrect.",
510+
"missingErrorList": "Some fields are missing or incorrect. \n\n%{errorList}",
508511
"serverError": "An incorrect reply was received from the server.",
509512
"userError": "Information for this ID could not be found",
510513
"userNotFoundError": "This person's information is not available. They may have gone offline.",

‎js/models/itemMd.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,6 @@ module.exports = window.Backbone.Model.extend({
183183
//listen for fetched. This is set by the view after fetch is successful, to prevent multiple fires of changed.
184184
this.on('change:fetched', this.updateAttributes, this);
185185
this.countries = new countriesMd();
186-
this.countryArray = this.countries.get('countries');
187186
},
188187

189188
updateAttributes: function(callback){
@@ -256,4 +255,4 @@ module.exports = window.Backbone.Model.extend({
256255
this.set({displayPrice: "Price Unavailable"});
257256
}
258257
}
259-
});
258+
});

‎js/models/userMd.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ module.exports = Backbone.Model.extend({
99

1010
initialize: function(){
1111
this.countries = new countriesMd();
12-
this.countryArray = this.countries.get('countries');
1312
},
1413

1514
defaults: {
@@ -59,7 +58,7 @@ module.exports = Backbone.Model.extend({
5958
__.each(response.shipping_addresses, function (address) {
6059
if (address){
6160
address = JSON.parse(address);
62-
if (address.name && address.street && address.city && address.state && address.postal_code && address.country && address.displayCountry){
61+
if (address.name && address.displayCountry){
6362
tempAddresses.push(address);
6463
}
6564
}
@@ -82,8 +81,7 @@ module.exports = Backbone.Model.extend({
8281
response.moderators = response.moderators || [];
8382

8483
response.moderator_guids = response.moderators.map(function(moderatorObject){
85-
var modGuid = moderatorObject.guid;
86-
return modGuid;
84+
return moderatorObject.guid;
8785
});
8886

8987
response.blocked_guids = response.blocked_guids || [];

‎js/templates/buyWizard.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ <h3 class="custCol-text padding30"><%= polyglot.t('CheckExchanges') %> </h3>
3434
<%= polyglot.t('buyFlow.paymentNote') %>
3535
</div>
3636
</div>
37-
<div class="positionBottom width100 padding20 custCol-background borderTop custCol-border txt-center js-partialPaymentMsg opacity0">
37+
<div class="positionBottomRight width100 padding20 custCol-background borderTop custCol-border txt-center js-partialPaymentMsg opacity0">
3838
<div class="h4 width100">
3939
<i class="ion-alert-circled"></i>
4040
<span class="js-partialPaymentTxt"></span>
@@ -82,11 +82,11 @@ <h2 class="margin0 marginTop80"><%= polyglot.t('buyFlow.HaveWallet') %></h2>
8282
</div>
8383
<div class="flexContainer flex-border customThemeScrollbar homeModal-settings homeModal-settings-noSearch scrollOverflow custCol-primary">
8484
<div class="flexRow custCol-border js-BuyWizardWallets">
85-
85+
8686
<!-- Airbitz -->
8787
<div class="width100 table padding15 borderBottom1 custCol-border js-bitcoinWalletProvider">
8888
<div class="floatLeft marginRight8">
89-
<a href="https://airbitz.co/bitcoin-wallet/" target="_blank">
89+
<a href="https://airbitz.co/bitcoin-wallet/" target="_blank">
9090
<img src="imgs/wallet-providers/airbitz.png" class="thumbnail thumbnail-large-slim " />
9191
</a>
9292
</div>
@@ -104,7 +104,7 @@ <h2 class="margin0 marginTop80"><%= polyglot.t('buyFlow.HaveWallet') %></h2>
104104
<!-- Coinbase -->
105105
<div class="width100 table padding15 borderBottom1 custCol-border js-bitcoinWalletProvider">
106106
<div class="floatLeft marginRight8">
107-
<a href="https://www.coinbase.com/signup" target="_blank">
107+
<a href="https://www.coinbase.com/signup" target="_blank">
108108
<img src="imgs/wallet-providers/coinbase.png" class="thumbnail thumbnail-large-slim " />
109109
</a>
110110
</div>
@@ -117,12 +117,12 @@ <h2 class="margin0 marginTop80"><%= polyglot.t('buyFlow.HaveWallet') %></h2>
117117
<div class="textOpacity75 fontSize14"><%= polyglot.t('walletProviders.CoinbaseTagline') %></div>
118118
</div>
119119
</div>
120-
</div>
121-
120+
</div>
121+
122122
<!-- Samourai Wallet -->
123123
<div class="width100 table padding15 borderBottom1 custCol-border js-bitcoinWalletProvider">
124124
<div class="floatLeft marginRight8">
125-
<a href="http://samouraiwallet.com/" target="_blank">
125+
<a href="http://samouraiwallet.com/" target="_blank">
126126
<img src="imgs/wallet-providers/samourai-wallet.png" class="thumbnail thumbnail-large-slim " />
127127
</a>
128128
</div>
@@ -135,12 +135,12 @@ <h2 class="margin0 marginTop80"><%= polyglot.t('buyFlow.HaveWallet') %></h2>
135135
<div class="textOpacity75 fontSize14"><%= polyglot.t('walletProviders.SamouraiTagline') %></div>
136136
</div>
137137
</div>
138-
</div>
138+
</div>
139139

140140
<!-- RushWallet -->
141141
<div class="width100 table padding15 borderBottom1 custCol-border js-bitcoinWalletProvider">
142142
<div class="floatLeft marginRight8">
143-
<a href="https://rushwallet.com/" target="_blank">
143+
<a href="https://rushwallet.com/" target="_blank">
144144
<img src="imgs/wallet-providers/rush-wallet.png" class="thumbnail thumbnail-large-slim " />
145145
</a>
146146
</div>
@@ -154,11 +154,11 @@ <h2 class="margin0 marginTop80"><%= polyglot.t('buyFlow.HaveWallet') %></h2>
154154
</div>
155155
</div>
156156
</div>
157-
157+
158158
<!-- Breadwallet -->
159159
<div class="width100 table padding15 borderBottom1 custCol-border js-bitcoinWalletProvider">
160160
<div class="floatLeft marginRight8">
161-
<a href="http://breadwallet.com/" target="_blank">
161+
<a href="http://breadwallet.com/" target="_blank">
162162
<img src="imgs/wallet-providers/bread-wallet.png" class="thumbnail thumbnail-large-slim " />
163163
</a>
164164
</div>
@@ -171,12 +171,12 @@ <h2 class="margin0 marginTop80"><%= polyglot.t('buyFlow.HaveWallet') %></h2>
171171
<div class="textOpacity75 fontSize14"><%= polyglot.t('walletProviders.BreadwalletTagline') %></div>
172172
</div>
173173
</div>
174-
</div>
174+
</div>
175175

176176
<!-- Mycelium -->
177177
<div class="width100 table padding15 borderBottom1 custCol-border js-bitcoinWalletProvider">
178178
<div class="floatLeft marginRight8">
179-
<a href="https://mycelium.com/mycelium-wallet.html" target="_blank">
179+
<a href="https://mycelium.com/mycelium-wallet.html" target="_blank">
180180
<img src="imgs/wallet-providers/mycelium.png" class="thumbnail thumbnail-large-slim " />
181181
</a>
182182
</div>
@@ -195,7 +195,7 @@ <h2 class="margin0 marginTop80"><%= polyglot.t('buyFlow.HaveWallet') %></h2>
195195
<!-- Blockchain.info -->
196196
<div class="width100 table padding15 borderBottom1 custCol-border js-bitcoinWalletProvider">
197197
<div class="floatLeft marginRight8">
198-
<a href="https://blockchain.info/wallet" target="_blank">
198+
<a href="https://blockchain.info/wallet" target="_blank">
199199
<img src="imgs/wallet-providers/blockchaininfo.png" class="thumbnail thumbnail-large-slim " />
200200
</a>
201201
</div>

‎js/templates/settings.html‎

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -490,11 +490,11 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Theme') %></h3>
490490
<label for="settings-theme-1" class="radioLabel">
491491
<div class="theme-background" style="background: #5E3E36">
492492
<div class="theme-global-header" style="background: #cc504b"></div>
493-
<div class="theme-header" style="background: url(imgs/themes/1/header-thumbnail.png); background-size: cover"></div>
493+
<div class="theme-header" style="background: url(imgs/themes/1/header-thumbnail.png); background-size: cover"></div>
494494
<div class="theme-nav" style="background: #cc504b">
495495
<div class="theme-tab" style="background: #ba4a3f"></div>
496496
</div>
497-
<div class="theme-body" style="background: #ba4a3f"></div>
497+
<div class="theme-body" style="background: #ba4a3f"></div>
498498
</div>
499499
</label>
500500
</div>
@@ -510,11 +510,11 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Theme') %></h3>
510510
<label for="settings-theme-2" class="radioLabel">
511511
<div class="theme-background" style="background: #B2B2B2">
512512
<div class="theme-global-header" style="background: #E6E6E6"></div>
513-
<div class="theme-header" style="background: url(imgs/themes/2/header-thumbnail.png); background-size: cover"></div>
513+
<div class="theme-header" style="background: url(imgs/themes/2/header-thumbnail.png); background-size: cover"></div>
514514
<div class="theme-nav" style="background: #E6E6E6">
515-
<div class="theme-tab" style="background: #ffffff"></div>
515+
<div class="theme-tab" style="background: #ffffff"></div>
516516
</div>
517-
<div class="theme-body" style="background: #ffffff"></div>
517+
<div class="theme-body" style="background: #ffffff"></div>
518518
</div>
519519
</label>
520520
</div>
@@ -530,11 +530,11 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Theme') %></h3>
530530
<label for="settings-theme-3" class="radioLabel">
531531
<div class="theme-background" style="background: #1d1d25">
532532
<div class="theme-global-header" style="background: #353443"></div>
533-
<div class="theme-header" style="background: url(imgs/themes/3/header-thumbnail.png); background-size: cover"></div>
533+
<div class="theme-header" style="background: url(imgs/themes/3/header-thumbnail.png); background-size: cover"></div>
534534
<div class="theme-nav" style="background: #353443">
535535
<div class="theme-tab" style="background: #474559"></div>
536536
</div>
537-
<div class="theme-body" style="background: #474559"></div>
537+
<div class="theme-body" style="background: #474559"></div>
538538
</div>
539539
</label>
540540
</div>
@@ -544,11 +544,11 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Theme') %></h3>
544544
<label for="settings-theme-4" class="radioLabel">
545545
<div class="theme-background" style="background: #3d413b">
546546
<div class="theme-global-header" style="background: #6e776b"></div>
547-
<div class="theme-header" style="background: url(imgs/themes/4/header-thumbnail.png); background-size: cover"></div>
547+
<div class="theme-header" style="background: url(imgs/themes/4/header-thumbnail.png); background-size: cover"></div>
548548
<div class="theme-nav" style="background: #6e776b">
549549
<div class="theme-tab" style="background: #929e8e"></div>
550550
</div>
551-
<div class="theme-body" style="background: #929e8e"></div>
551+
<div class="theme-body" style="background: #929e8e"></div>
552552
</div>
553553
</label>
554554
</div>
@@ -558,11 +558,11 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Theme') %></h3>
558558
<label for="settings-theme-5" class="radioLabel">
559559
<div class="theme-background" style="background: #1c2b3a">
560560
<div class="theme-global-header" style="background: #334e6a"></div>
561-
<div class="theme-header" style="background: url(imgs/themes/5/header-thumbnail.png); background-size: cover"></div>
561+
<div class="theme-header" style="background: url(imgs/themes/5/header-thumbnail.png); background-size: cover"></div>
562562
<div class="theme-nav" style="background: #334e6a">
563563
<div class="theme-tab" style="background: #41658a"></div>
564564
</div>
565-
<div class="theme-body" style="background: #41658a"></div>
565+
<div class="theme-body" style="background: #41658a"></div>
566566
</div>
567567
</label>
568568
</div>
@@ -572,11 +572,11 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Theme') %></h3>
572572
<label for="settings-theme-6" class="radioLabel">
573573
<div class="theme-background" style="background: #141414">
574574
<div class="theme-global-header" style="background: #1B1B1B"></div>
575-
<div class="theme-header" style="background: url(imgs/themes/6/header-thumbnail.png); background-size: cover"></div>
575+
<div class="theme-header" style="background: url(imgs/themes/6/header-thumbnail.png); background-size: cover"></div>
576576
<div class="theme-nav" style="background: #1B1B1B">
577577
<div class="theme-tab" style="background: #252525"></div>
578578
</div>
579-
<div class="theme-body" style="background: #252525"></div>
579+
<div class="theme-body" style="background: #252525"></div>
580580
</div>
581581
</label>
582582
</div>
@@ -855,16 +855,22 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('CurrentAddress') %><
855855
</div>
856856
<div class="flexRow pad5 rowTop15">
857857
<% _.each(ob.user.shipping_addresses, function(address, i){ %>
858+
<% console.log(address) %>
858859
<div class="flexCol-4 pad10 row15">
859-
<div class="padding10 color-secondary custCol-secondary borderRadius3 fontSize15 clearfix js-address">
860-
<div class="textOpacity1">
860+
<div class="addressBox custCol-secondary js-address">
861+
<div class="textOpacity1 row40">
861862
<div><%= address.name %></div>
862863
<div><%= address.street %></div>
863-
<div><%= address.city %>, <%= address.state %> <%= address.postal_code %></div>
864+
<div>
865+
<% if(address.city) print(address.city) %>
866+
<% if(address.city && address.state || address.city && address.postal_code) print(",") %>
867+
<%= address.state %> <%= address.postal_code %>
868+
</div>
869+
<div><%= address.other %></div>
864870
<div><%= address.displayCountry %></div>
865871
</div>
866872

867-
<div class="btn btn-txt marginTop6 custCol-primary clickable">
873+
<div class="btn btn-txt positionBottom row10 custCol-primary clickable">
868874
<input type="checkbox"
869875
class="hide js-settingsAddress"
870876
id="settingsAddress<%= i %>"
@@ -985,6 +991,26 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('NewAddress') %></h3>
985991

986992
</div>
987993

994+
<div class="flexRow">
995+
996+
<div class="flexCol-3 borderRight custCol-border">
997+
<div class="fieldItem">
998+
<label for="settingsShipToPostalCode">
999+
<%= polyglot.t('ShipToOther') %>
1000+
</label>
1001+
</div>
1002+
</div>
1003+
1004+
<div class="flexCol-9 borderRight0 custCol-border">
1005+
<input name="ship_to_other"
1006+
id="settingsShipToOther"
1007+
type="text"
1008+
placeholder="<%= polyglot.t('ShipToOtherPlaceholder') %>"
1009+
class="fieldItem settingsAddressInput">
1010+
</div>
1011+
1012+
</div>
1013+
9881014
<div class="flexRow overflowVisible">
9891015

9901016
<div class="flexCol-3 borderRight custCol-border">
@@ -1218,7 +1244,7 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Advanced') %></h3>
12181244
</div>
12191245
</div>
12201246
</div>
1221-
1247+
12221248
<div class="flexRow">
12231249
<div class="flexCol-3 borderRight custCol-border">
12241250
<div class="fieldItem">
@@ -1247,7 +1273,7 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Advanced') %></h3>
12471273
</label>
12481274
<i class="ion-help-circled tooltip tooltip-box" data-tooltip="<%= polyglot.t('AppBarStyleInfo') %>"></i>
12491275
</div>
1250-
</div>
1276+
</div>
12511277

12521278
<div class="flexCol-9 borderRight0 custCol-border">
12531279
<div class="fieldItem">
@@ -1257,7 +1283,7 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Advanced') %></h3>
12571283
<label for="app_bar_style_mac" class="radioLabel"><%= polyglot.t('OSMac') %></label>
12581284
</div>
12591285
</div>
1260-
</div>
1286+
</div>
12611287

12621288
<div class="flexRow">
12631289

0 commit comments

Comments
 (0)