git_admin/sx-fc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix :

Browse Source 
- second display ui adjustment
- show ui on cashier
This commit is contained in:
aungthetkhaing
2025-05-27 14:26:51 +06:30
parent 613cb3a0cb
commit 200cdb82f6
3 changed files with 194 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/views/foodcourt/second_display/_second_display.html.erb
View File

@@ -50,50 +50,61 @@
</div>
<!-- Second Column: MMQR Payment -->
<div class="col-12 d-flex flex-column h-100 hidden" id="mmqr_payment" >
<div class="col-12 d-flex flex-column h-100 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">MMQR Payment Option</h4>
</div>
<div class="card-body d-flex flex-column align-items-center justify-content-center">
<img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
<div class="text-center">
<h5>Scan to Pay</h5>
<p class="text-muted">Use your mobile wallet app</p>
</div>
<!-- MODIFICATION HERE: Removed flex-column -->
<div class="card-body row d-flex align-items-center justify-content-center">
<div id="qr-payment-container" class="text-center p-3 bg-white rounded border" style="max-width: 300px;">
<div id="qr-code" class="mb-2">
<div id="qrpay_svg">
<svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="#e0e0e0"/>
<text x="50" y="55" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">QR Code Here</text>
</svg>
<!-- This is now Column 1 -->
<div class="col-6"> <!-- Using col-md-6 for responsiveness, col-6 is also fine -->
<div class="text-center">
<img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
<h5>Scan to Pay</h5>
<p class="text-muted">Use your mobile wallet app</p>
</div>
<div id="qr-payment-container" class="mx-auto text-center p-3 bg-white rounded border" style="max-width: 300px;">
<!-- Added mx-auto to center this block within its col-6 parent -->
<div id="qr-code" class="mb-2">
<div id="qrpay_svg">
<svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="#e0e0e0"/>
<text x="50" y="55" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">QR Code Here</text>
</svg>
</div>
</div>
<div class="payment-details text-dark">
</div>
</div>
</div>
<div class="payment-details text-dark">
</div>
</div>
<div class="payment-instructions mt-4 text-center">
<h6>How to Pay:</h6>
<ol class="text-left small pl-3 mb-0">
<li>Open your mobile wallet app</li>
<li>Tap on 'Scan QR Code'</li>
<li>Point your camera at this code</li>
<li>Confirm the payment details</li>
</ol>
<!-- This is now Column 2 -->
<div class="col-6 d-flex flex-column"> <!-- Using col-md-6. Added d-flex flex-column here to make mt-auto work -->
<div class="payment-instructions mt-4 text-center">
<h6>How to Pay:</h6>
<!-- text-left on ol seems fine, but you might want text-md-left if it looks odd on small screens -->
<ol class="text-left small pl-3 mb-0" style="display: inline-block;"> <!-- inline-block for text-center to work on ol -->
<li>Open your mobile wallet app</li>
<li>Tap on 'Scan QR Code'</li>
<li>Point your camera at this code</li>
<li>Confirm the payment details</li>
</ol>
</div>
<!-- mt-auto will push this to the bottom of this column if the column has extra space -->
<div class="supported-partners-container mt-auto pt-3 pb-3 text-center">
<h6 class="supported-partners-title">Supported Partners</h6>
<div class="partner-logos">
<img src="/image/logo/AYA-Pay.webp" alt="AYA Pay" class="partner-logo">
<img src="/image/logo/KBZ-Pay.webp" alt="KBZ Pay" class="partner-logo">
<img src="/image/logo/OK-Dollor.webp" alt="OK Dollar" class="partner-logo">
<img src="/image/logo/Wave.webp" alt="Wave Money" class="partner-logo">
</div>
</div>
</div>
</div>
<div class="supported-partners-container mt-auto pt-3 pb-3">
<h6 class="supported-partners-title">Supported Partners</h6>
<div class="partner-logos">
<img src="/image/logo/AYA-Pay.webp" alt="AYA Pay" class="partner-logo">
<img src="/image/logo/KBZ-Pay.webp" alt="KBZ Pay" class="partner-logo">
<img src="/image/logo/OK-Dollor.webp" alt="OK Dollar" class="partner-logo">
<img src="/image/logo/Wave.webp" alt="Wave Money" class="partner-logo">
</div>
</div>
</div>
</div>
@@ -178,7 +189,6 @@
background-color: #f8f9fa;
padding: 15px;
border-radius: 8px;
max-width: 300px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.payment-instructions ol {
@@ -286,6 +296,17 @@
font-size: 0.95rem;
}
@media(min-width: 600px){
#second_display_order_items{
margin-top: -3rem;
}
#mmqr_payment{
margin-top: -3rem;
}
}
@media (max-width: 576px) {
.card-header h4 { font-size: 1.1rem; }