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

Commit daa044b

Browse files
jjeffryesjjeffryes
committed
Merge pull request #1618 from OpenBazaar/showPartialPayments
Show partial payments
2 parents ff061f3 + e2f4a95 commit daa044b

File tree

6 files changed

+232
-131
lines changed

6 files changed

+232
-131
lines changed

‎css/obBase.css‎

Lines changed: 138 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,10 @@ p {
9090
margin: 0 0 1em 0;
9191
}
9292

93+
p:last-child {
94+
margin-bottom: 0;
95+
}
96+
9397
hr {
9498
border: solid 1px rgba(255,255,255,0.08);
9599
width: 100%;
@@ -182,6 +186,134 @@ form {
182186
margin: 0;
183187
}
184188

189+
/*========== typography ==========*/
190+
191+
h1,h2,h3,h4,h5,h6,
192+
.h1,.h2,.h3,.h4,.h5,.h6 {
193+
margin: 0;
194+
font-weight: 700;
195+
-webkit-user-select: none;
196+
cursor: default;
197+
}
198+
199+
h1,h2,h3,
200+
.h1,.h2,.h3 {
201+
margin-bottom: 20px;
202+
line-height: 1.2;
203+
}
204+
205+
h4,h5,h6
206+
.h4,.h5,.h6 {
207+
margin-bottom: 10px;
208+
line-height: 1;
209+
}
210+
211+
h3, .h3 {
212+
font-size: 18px;
213+
}
214+
215+
h4, .h4 {
216+
font-size: 17px;
217+
}
218+
219+
h5, .h5 {
220+
font-size: 15px;
221+
}
222+
223+
h6, .h6 {
224+
font-size: 15px; /* TODO: refactor to remove h6 since it is identical to h5 */
225+
}
226+
227+
.fieldItem-textarea h2, .fieldItem-textarea h3, .editableContent h2, .editableContent h3 {
228+
margin-top: 30px;
229+
}
230+
231+
.fieldItem-textarea h2:first-child, .fieldItem-textarea h3:first-child, .editableContent h2:first-child, .editableContent h3:first-child {
232+
margin-top: 0;
233+
}
234+
235+
.note {
236+
/* use for instructions and incidental text */
237+
/*font-style: italic;*/
238+
font-size: 9px;
239+
opacity: 0.50;
240+
}
241+
242+
[class *= "ion-"]:before {
243+
font-size: 1.2em;
244+
pointer-events: none;
245+
}
246+
247+
.txt-center {
248+
text-align: center;
249+
}
250+
251+
#ov1 .txt-fade {
252+
opacity: 0.75;
253+
}
254+
255+
#ov1 .unfilled {
256+
opacity: 0.35;
257+
}
258+
259+
#ov1 .div-fade {
260+
opacity: 0.50;
261+
}
262+
263+
#ov1 .div-fadeExtra {
264+
opacity: 0.3;
265+
}
266+
267+
.txt-lowleading {
268+
line-height: 1.2;
269+
}
270+
.txt-unleaded {
271+
line-height: 1;
272+
margin-bottom: 0;
273+
}
274+
275+
#ov1 .unbold {
276+
font-weight: 400;
277+
}
278+
279+
#ov1 .allCaps {
280+
text-transform: uppercase;
281+
}
282+
283+
.noOverflow {
284+
text-overflow: ellipsis;
285+
white-space: nowrap;
286+
overflow: hidden;
287+
}
288+
289+
.noWrap {
290+
white-space: nowrap;
291+
}
292+
293+
.clamp2 {
294+
/* adds an ellipses to the end of wrapped text after 2 lines */
295+
overflow: hidden;
296+
text-overflow: ellipsis;
297+
display: -webkit-box;
298+
-webkit-line-clamp: 2;
299+
-webkit-box-orient: vertical;
300+
}
301+
302+
.clamp4 {
303+
/* adds an ellipses to the end of wrapped text after 4 lines */
304+
overflow: hidden;
305+
text-overflow: ellipsis;
306+
display: -webkit-box;
307+
-webkit-line-clamp: 4;
308+
-webkit-box-orient: vertical;
309+
}
310+
311+
.txtRow2 {
312+
/* limits an element to being 2 rows of text tall */
313+
line-height: 1.25em;;
314+
height: 2.5em;
315+
}
316+
185317

186318
/*========== structure classes ==========*/
187319

@@ -397,6 +529,7 @@ form {
397529
.barTxt {
398530
height: 50px;
399531
line-height: 50px;
532+
margin-bottom: 0;
400533
}
401534

402535
.bar .btn {
@@ -1291,127 +1424,6 @@ label.fieldItem {
12911424
width: calc(100% - 230px);
12921425
}
12931426

1294-
/*========== typography ==========*/
1295-
1296-
h1,h2,h3,h4,h5,h6 {
1297-
margin: 0;
1298-
font-weight: 700;
1299-
-webkit-user-select: none;
1300-
cursor: default;
1301-
}
1302-
1303-
h1,h2,h3 {
1304-
margin-bottom: 20px;
1305-
line-height: 1.2;
1306-
}
1307-
1308-
h4,h5,h6 {
1309-
margin-bottom: 10px;
1310-
line-height: 1;
1311-
}
1312-
1313-
h3 {
1314-
font-size: 18px;
1315-
}
1316-
1317-
h5 {
1318-
font-size: 15px;
1319-
}
1320-
1321-
.h6, h6 {
1322-
font-size: 15px;
1323-
}
1324-
1325-
.fieldItem-textarea h2, .fieldItem-textarea h3, .editableContent h2, .editableContent h3 {
1326-
margin-top: 30px;
1327-
}
1328-
1329-
.fieldItem-textarea h2:first-child, .fieldItem-textarea h3:first-child, .editableContent h2:first-child, .editableContent h3:first-child {
1330-
margin-top: 0;
1331-
}
1332-
1333-
.note {
1334-
/* use for instructions and incidental text */
1335-
/*font-style: italic;*/
1336-
font-size: 9px;
1337-
opacity: 0.50;
1338-
}
1339-
1340-
[class *= "ion-"]:before {
1341-
font-size: 1.2em;
1342-
pointer-events: none;
1343-
}
1344-
1345-
.txt-center {
1346-
text-align: center;
1347-
}
1348-
1349-
#ov1 .txt-fade {
1350-
opacity: 0.75;
1351-
}
1352-
1353-
#ov1 .unfilled {
1354-
opacity: 0.35;
1355-
}
1356-
1357-
#ov1 .div-fade {
1358-
opacity: 0.50;
1359-
}
1360-
1361-
#ov1 .div-fadeExtra {
1362-
opacity: 0.3;
1363-
}
1364-
1365-
.txt-lowleading {
1366-
line-height: 1.2;
1367-
}
1368-
.txt-unleaded {
1369-
line-height: 1;
1370-
margin-bottom: 0;
1371-
}
1372-
1373-
#ov1 .unbold {
1374-
font-weight: 400;
1375-
}
1376-
1377-
#ov1 .allCaps {
1378-
text-transform: uppercase;
1379-
}
1380-
1381-
.noOverflow {
1382-
text-overflow: ellipsis;
1383-
white-space: nowrap;
1384-
overflow: hidden;
1385-
}
1386-
1387-
.noWrap {
1388-
white-space: nowrap;
1389-
}
1390-
1391-
.clamp2 {
1392-
/* adds an ellipses to the end of wrapped text after 2 lines */
1393-
overflow: hidden;
1394-
text-overflow: ellipsis;
1395-
display: -webkit-box;
1396-
-webkit-line-clamp: 2;
1397-
-webkit-box-orient: vertical;
1398-
}
1399-
1400-
.clamp4 {
1401-
/* adds an ellipses to the end of wrapped text after 4 lines */
1402-
overflow: hidden;
1403-
text-overflow: ellipsis;
1404-
display: -webkit-box;
1405-
-webkit-line-clamp: 4;
1406-
-webkit-box-orient: vertical;
1407-
}
1408-
1409-
.txtRow2 {
1410-
/* limits an element to being 2 rows of text tall */
1411-
line-height: 1.25em;;
1412-
height: 2.5em;
1413-
}
1414-
14151427
/*========== skin classes ==========*/
14161428

14171429
.userPageImageUpload {
@@ -4952,6 +4964,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
49524964
#ov1 .textOpacity0,
49534965
#ov1 .opacity0 {
49544966
opacity: 0;
4967+
pointer-events: none;
49554968
}
49564969

49574970
#ov1 .textOpacity25 {
@@ -5259,6 +5272,10 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
52595272
margin-left: 7px;
52605273
}
52615274

5275+
#ov1 .marginLeft8 {
5276+
margin-left: 8px; /* use this to match the gap on the right created by the custom scrollbar */
5277+
}
5278+
52625279
#ov1 .marginLeft10 {
52635280
margin-left: 10px;
52645281
}

‎js/languages/en-US.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -519,7 +519,11 @@
519519
"UpdateInvalid": "Your transaction update returned invalid data. Open the transaction and try again",
520520
"ExportCSV": "Export to CSV",
521521
"ShowUnpaid": "Show Unfunded",
522-
"HideUnpaid": "Hide Unfunded"
522+
"HideUnpaid": "Hide Unfunded",
523+
"BuyerPaidMessage": "You have paid %{paidAmount} out of %{totalAmount} BTC",
524+
"BuyerPaidMessageHelp": "To complete your purchase, pay the remaining balance shown above.",
525+
"SellerPaidMessage": "The buyer has paid %{paidAmount} out of %{totalAmount} BTC",
526+
"SellerPaidMessageHelp": "This purchase can not be confirmed until the buyer has completely funded it."
523527
},
524528
"errorMessages": {
525529
"saveError": "Data could not be saved.",

‎js/templates/buyWizard.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h2 class="ion-android-close custCol-text clickable"></h2>
1515
<h3 class="custCol-text padding30"><%= polyglot.t('CheckExchanges') %> </h3>
1616
</div>
1717
</div>
18-
<div class="modal-hero modal-heroFullHeightNoButtons padding40 js-buyWizardPay hide background1 custCol-primary">
18+
<div class="modal-hero modal-heroFullHeightNoButtons padding30 js-buyWizardPay hide background1 custCol-primary">
1919
<div class="width100 row20">
2020
<img class="blockCenter qrCode js-buyWizardPayQRCode" height="250" width="250" src="imgs/defaultItem.png"/>
2121
</div>
@@ -39,6 +39,17 @@ <h3 class="custCol-text padding30"><%= polyglot.t('CheckExchanges') %> </h3>
3939
<%= polyglot.t('buyFlow.paymentNote') %>
4040
</div>
4141
</div>
42+
<div class="positionBottom width100 padding20 custCol-background borderTop custCol-border txt-center js-partialPaymentMsg opacity0">
43+
<div class="h4 width100">
44+
<i class="ion-alert-circled"></i>
45+
<span class="js-partialPaymentTxt"></span>
46+
</div>
47+
<div class="txt-fade fontSize12 rowTop10">
48+
<%= polyglot.t('transactions.BuyerPaidMessageHelp') %>
49+
</div>
50+
<div class="btn btn-corner btn-cornerTR btn-txtOnly ion-close btn-small textOpacity50 js-partialPaymentClose">
51+
</div>
52+
</div>
4253
</div>
4354
<div class="modal-hero js-buyWizardOrderSummary background1 hide">
4455
<div class="width100 txt-center">

‎js/templates/transactionModal.html‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ <h3 class="txt-bright"><%= polyglot.t('CheckExchanges') %> </h3>
4444
<div class="pull-left pad20Left txt-bright" style="width:255px;">
4545
<div class="txt-center row10 textSize16px">
4646
<%= polyglot.t('buyFlow.SendBTCtoAddress', {
47-
amount: ob.buyer_order.order.payment.amount,
47+
amount: ob.intlNumFormat(ob.orderDue, 20),
4848
recipient: '<a class="textSize11px" href="bitcoin:' + ob.buyer_order.order.payment.address + '?amount=' + ob.buyer_order.order.payment.amount + '&message=' + ob.vendor_offer.listing.item.title + '">' + ob.buyer_order.order.payment.address + '</a>'
4949
})
5050
%>
@@ -585,6 +585,31 @@ <h3 class="txt-bright"><%= polyglot.t('CheckExchanges') %> </h3>
585585
<div style="height: 264px;" class="scrollOverflowY customThemeScrollbar">
586586

587587
<div class="flexRow custCol-border borderBottom">
588+
<% if(ob.status == 0){ %>
589+
<div class="rowItem padding15 rowTop10 custCol-secondary marginLeft8 txt-center">
590+
<div class="h4 width100">
591+
<i class="ion-alert-circled"></i>
592+
<% if(ob.transactionType == "purchases"){ %>
593+
<%= polyglot.t('transactions.BuyerPaidMessage', {
594+
paidAmount: ob.intlNumFormat(ob.orderPaid, 8),
595+
totalAmount: ob.intlNumFormat(ob.orderPrice, 8)
596+
}) %>
597+
<% } else { %>
598+
<%= polyglot.t('transactions.SellerPaidMessage', {
599+
paidAmount: ob.intlNumFormat(ob.orderPaid, 8),
600+
totalAmount: ob.intlNumFormat(ob.orderPrice, 8)
601+
}) %>
602+
<% } %>
603+
</div>
604+
<div class="txt-fade fontSize12 rowTop10">
605+
<% if(ob.transactionType == "purchases"){ %>
606+
<%= polyglot.t('transactions.BuyerPaidMessageHelp') %>
607+
<% } else { %>
608+
<%= polyglot.t('transactions.SellerPaidMessageHelp') %>
609+
<% } %>
610+
</div>
611+
</div>
612+
<% } %>
588613
<div class="flexRow rowItem padding15">
589614
<div class="flexCol-7 overflowHidden">
590615
<a href="#userPage/<%- ob.vendor_offer.listing.id.guid %>/listing/<%- ob.vendor_offer.listing.contract_id %>">

0 commit comments

Comments
 (0)