engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Restructure crypto checkout layout with QR code grid

Browse source 
- Put QR code and payment instructions in a grid layout
- QR code takes fixed space on left, payment info expands on right
- Use grid-template-columns: auto 1fr for optimal spacing
- Update JavaScript to handle new grid structure when hiding elements
This commit is contained in:
Russell Ballestrini 2025-09-24 18:28:20 -04:00
parent 44cd038370
commit 02e1130834
1 changed files with 16 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

49
make_post_sell/templates/crypto_checkout.j2
View file

@ -11,12 +11,15 @@
{% else %}
{% set amount_fmt = '%.8f' % amount_crypto %}
{% endif %}
<div style="margin: 16px 0;">
<div id="payment-qr"></div>
<div style="display: grid; grid-template-columns: auto 1fr; gap: 20px; margin: 16px 0; align-items: start;">
<div>
<div id="payment-qr"></div>
</div>
<div>
<p>Send exactly <b id="crypto-amount">{{ amount_fmt }}</b> {{ coin_symbol }} to this address:</p>
<pre id="crypto-address" style="white-space:pre-wrap;word-wrap:break-word;">{{ address }}</pre>
</div>
</div>
<p>Send exactly <b id="crypto-amount">{{ amount_fmt }}</b> {{ coin_symbol }} to this address:</p>
<pre id="crypto-address" style="white-space:pre-wrap;word-wrap:break-word;">{{ address }}</pre>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 8px 0;">
<button class="mps-button mps-button-green" id="copy-amt" style="grid-row: 1;">Copy Amount</button>
@ -140,21 +143,11 @@
// Remove payment elements to prevent double-sending (for received status)
function removePaymentElements() {
const buttonGrid = document.querySelector('div[style*="grid-template-columns: 1fr 1fr 1fr"]');
const qrContainer = document.getElementById('payment-qr');
const cryptoAmount = document.getElementById('crypto-amount');
const cryptoAddress = document.getElementById('crypto-address');
const paymentGrid = document.querySelector('div[style*="grid-template-columns: auto 1fr"]');
// Remove QR code and payment instructions
if (qrContainer && qrContainer.parentNode) {
qrContainer.parentNode.style.display = 'none';
}
// Remove payment amount and address elements
if (cryptoAmount && cryptoAmount.parentNode) {
cryptoAmount.parentNode.style.display = 'none';
}
if (cryptoAddress) {
cryptoAddress.style.display = 'none';
// Remove the entire payment grid (QR code and instructions)
if (paymentGrid) {
paymentGrid.style.display = 'none';
}
// Remove all payment buttons completely
@ -173,23 +166,13 @@
// Replace action buttons with invoice link for terminal statuses
function replaceButtonsWithInvoiceLink(invoiceUrl) {
const buttonGrid = document.querySelector('div[style*="grid-template-columns: 1fr 1fr 1fr"]');
const qrContainer = document.getElementById('payment-qr');
const cryptoAmount = document.getElementById('crypto-amount');
const cryptoAddress = document.getElementById('crypto-address');
const paymentGrid = document.querySelector('div[style*="grid-template-columns: auto 1fr"]');
if (!buttonGrid) return;
// Remove QR code and payment instructions
if (qrContainer && qrContainer.parentNode) {
qrContainer.parentNode.style.display = 'none';
}
// Remove payment amount and address elements
if (cryptoAmount && cryptoAmount.parentNode) {
cryptoAmount.parentNode.style.display = 'none';
}
if (cryptoAddress) {
cryptoAddress.style.display = 'none';
// Remove the entire payment grid (QR code and instructions)
if (paymentGrid) {
paymentGrid.style.display = 'none';
}
// Clear all buttons