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

Move status, expiry and payment ID next to QR code

Browse source 
- Use two-column grid: QR code on left, all payment info on right
- Move status, expiry countdown, and payment ID into right column
- Keep payment address and amount at top of right column
- Maintains visual hierarchy with all payment details together
- Buttons remain below in separate grid
This commit is contained in:
Russell Ballestrini 2025-09-24 18:32:30 -04:00
parent 2732036fcf
commit 1c957534d5
1 changed files with 18 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

36
make_post_sell/templates/crypto_checkout.j2
View file

@ -11,13 +11,26 @@
{% else %}
{% set amount_fmt = '%.8f' % amount_crypto %}
{% endif %}
<div style="display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0;">
<div style="text-align: center;">
<div id="payment-qr" style="display: inline-block;"></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>
<p style="margin-top: 15px;">Status: <span id="status">{{ status }}</span></p>
<p id="confirmations" {% if status == 'pending' or status == 'expired' %}style="display:none;"{% endif %}>
Confirmations: <span id="current-confirmations">{{ current_confirmations or 0 }}</span> / <span id="required-confirmations">{{ confirmations_required or 0 }}</span>
</p>
<p>
{% if expires_at %}
Expires in: <span id="countdown" data-expires="{{ expires_at }}">--:--</span>
{% endif %}
</p>
<p>
<small>Payment ID: <code id="payment-id">{{ payment_id }}</code></small>
</p>
</div>
</div>
@ -29,19 +42,6 @@
<button id="cancel-btn" onclick="cancelQuote('{{ payment_id }}')" class="mps-button mps-button-red" style="grid-column: 1 / -1; grid-row: 2;">Cancel Quote</button>
{% endif %}
</div>
<p>Status: <span id="status">{{ status }}</span></p>
<p id="confirmations" {% if status == 'pending' or status == 'expired' %}style="display:none;"{% endif %}>
Confirmations: <span id="current-confirmations">{{ current_confirmations or 0 }}</span> / <span id="required-confirmations">{{ confirmations_required or 0 }}</span>
</p>
<p>
{% if expires_at %}
Expires in: <span id="countdown" data-expires="{{ expires_at }}">--:--</span>
{% endif %}
</p>
<p>
<small>Payment ID: <code id="payment-id">{{ payment_id }}</code></small>
</p>
<div id="received" style="display:none;">
<small>Received: <span id="recv-piconero"></span> / <span id="exp-piconero"></span> piconero</small>
@ -143,7 +143,7 @@
// 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 paymentGrid = document.querySelector('div[style*="grid-template-columns: 1fr"][style*="gap: 10px"]');
const paymentGrid = document.querySelector('div[style*="grid-template-columns: auto 1fr"]');
// Remove the entire payment grid (QR code and instructions)
if (paymentGrid) {
@ -166,7 +166,7 @@
// 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 paymentGrid = document.querySelector('div[style*="grid-template-columns: 1fr"][style*="gap: 10px"]');
const paymentGrid = document.querySelector('div[style*="grid-template-columns: auto 1fr"]');
if (!buttonGrid) return;