[tor-commits] [donate-static/staging] Edit btc pay button

[hiro]

commit 78de2b161d25c9a6f3b0952915562109e9350538
Author: hiro <h...@torproject.org>
Date:   Thu Dec 3 15:43:10 2020 +0100

    Edit btc pay button
---
 content/cryptocurrency/contents.lr | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/content/cryptocurrency/contents.lr 
b/content/cryptocurrency/contents.lr
index 2f6b54af..0d50c208 100644
--- a/content/cryptocurrency/contents.lr
+++ b/content/cryptocurrency/contents.lr
@@ -24,10 +24,21 @@ body:
   </div>
   <div class="btc-form">
     <style type="text/css"> .btcpay-form { display: inline-flex; align-items: 
center; justify-content: center; } .btcpay-form--inline { flex-direction: row; 
} .btcpay-form--block { flex-direction: column; } .btcpay-form--inline .submit 
{ margin-left: 15px; } .btcpay-form--block select { margin-bottom: 10px; } 
.btcpay-form .btcpay-custom-container{ text-align: center; }.btcpay-custom { 
display: flex; align-items: center; justify-content: center; } .btcpay-form 
.plus-minus { cursor:pointer; font-size:25px; line-height: 25px; background: 
#DFE0E1; height: 30px; width: 45px; border:none; border-radius: 60px; margin: 
auto 5px; display: inline-flex; justify-content: center; } .btcpay-form select 
{ -moz-appearance: none; -webkit-appearance: none; appearance: none; color: 
currentColor; background: transparent; border:1px solid transparent; display: 
block; padding: 1px; margin-left: auto; margin-right: auto; font-size: 11px; 
cursor: pointer; } .btcpay-form select:hover { border-color: #ccc; }
  #btcpay-input-price { -moz-appearance: none; -webkit-appearance: none; 
border: none; box-shadow: none; text-align: center; font-size: 25px; margin: 
auto; border-radius: 5px; line-height: 35px; background: #fff; } 
#btcpay-input-price::-webkit-outer-spin-button, 
#btcpay-input-price::-webkit-inner-spin-button { -webkit-appearance: none; 
margin: 0; } </style>
-    <form method="POST"  
action="https://btcpay.torproject.net/api/v1/invoices"; class="btcpay-form 
btcpay-form--block">
+    <form method="POST"  
action="https://btcpay.torproject.net/api/v1/invoices"; class="btcpay-form 
btcpay-form--inline">
     <input type="hidden" name="storeId" 
value="95bAXzi9xpnvu6BqUm5Uyc8C1c1rPLYsQnsgdvMGp4sh" />
-    <input type="hidden" name="price" value="10" />
-    <input type="hidden" name="currency" value="USD" />
+    <div class="btcpay-custom-container">
+      <div class="btcpay-custom">
+        <button class="plus-minus" onclick="event.preventDefault(); var price 
= parseInt(document.querySelector('#btcpay-input-price').value); if ('-' == '-' 
&& (price - 1) < 1) { return; } 
document.querySelector('#btcpay-input-price').value = 
parseInt(document.querySelector('#btcpay-input-price').value) - 1;">-</button>
+        <input id="btcpay-input-price" name="price" type="text" min="1" 
max="20000" step="1" value="10" style="width: 3em;" 
oninput="event.preventDefault();isNaN(event.target.value) || event.target.value 
<= 0 ? document.querySelector('#btcpay-input-price').value = 10 : 
event.target.value"  />
+        <button class="plus-minus" onclick="event.preventDefault(); var price 
= parseInt(document.querySelector('#btcpay-input-price').value); if ('+' == '-' 
&& (price - 1) < 1) { return; } 
document.querySelector('#btcpay-input-price').value = 
parseInt(document.querySelector('#btcpay-input-price').value) + 1;">+</button>
+      </div>
+      <select name="currency">
+        <option value="USD" selected>USD</option>
+        <option value="GBP">GBP</option>
+        <option value="EUR">EUR</option>
+        <option value="BTC">BTC</option>
+      </select>
+    </div>
     <input type="image" class="submit" name="submit" 
src="https://btcpay.torproject.net/img/paybutton/pay.svg"; style="width:209px" 
alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">
     </form>
   </div>

_______________________________________________
tor-commits mailing list
tor-commits@lists.torproject.org
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits