fix : second display layout

- show item and QR seperately
- show total amount and receipt no on the ui
This commit is contained in:
aungthetkhaing
2025-05-23 14:21:54 +06:30
parent a12cd193c4
commit 40dc0950f9
4 changed files with 220 additions and 145 deletions

View File

@@ -1,12 +1,12 @@
<div class="row clearfix h-100">
<div class="col-lg-6 col-md-6 col-sm-6 h-100">
<div class="col-lg-12 col-md-12 col-sm-12 h-100" id="second_display_order_items">
<div class="card h-100" style="opacity: 0.85; background-color: #f8f9fa;">
<div class="card-header bg-primary text-white">
<h4 class="mb-0">Invoice Details</h4>
</div>
<div class="card-block h-100">
<div class="card-block">
<div class="card-text">
<div id="order-detail-slimscroll" style="max-height: 60vh; overflow-y: auto;">
<div id="order-detail-slimscroll" style="max-height: 55vh; overflow-y: auto;">
<table class="table table-striped second_display_items" id="order-items-table">
<thead class="thead-light">
<tr>
@@ -46,13 +46,13 @@
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 h-100 d-flex flex-column">
<div class="col-lg-12 col-md-12 col-sm-12 d-flex flex-column hidden" style="min-height: 80%; overflow-y: hidden;" id="mmqr_payment" >
<div class="card h-100" style="opacity: 0.85;">
<div class="card-header text-white" style="background-color: #ffc107;">
<h4 class="mb-0">Payment Options</h4>
<h4 class="mb-0">MMQR Payment Option</h4>
</div>
<div class="card-body d-flex flex-column align-items-center justify-content-center">
<div class="text-center mb-4">
<div class="text-center">
<h5>Scan to Pay</h5>
<p class="text-muted">Use your mobile wallet app</p>
</div>
@@ -66,7 +66,7 @@
</div>
</div>
</div>
<div class="payment-details">
<div class="payment-details text-dark">
<p class="mb-1"><strong>Amount:</strong> <span id="qr-amount"><%= number_to_currency(@total_amount) %></span></p>
<p class="mb-1"><strong>Invoice #:</strong> <span id="qr-invoice"><%= @invoice_id %></span></p>
<p class="text-muted small">Expires in 15 minutes</p>
@@ -88,7 +88,6 @@
</div>
<style>
/* Add these styles to your existing CSS */
.card {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border: none;