POS: Align Keypad centered vertically (#4690)

This commit is contained in:
d11n 2023-02-23 10:30:16 +01:00 committed by GitHub
parent 66e1eee010
commit d5bd86b07a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 3 deletions

View File

@ -8,6 +8,13 @@
max-width: 560px;
overflow: hidden;
}
/* modes */
#ModeTabs {
min-height: 2.75rem;
}
/* keypad */
.keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
@ -65,6 +72,10 @@
flex: 1 1 50%;
}
#Calculation {
min-height: 1.5rem;
}
@@media (max-height: 700px) {
.store-header {
display: none !important;

View File

@ -1,14 +1,14 @@
@using Microsoft.AspNetCore.Mvc.TagHelpers
@model BTCPayServer.Plugins.PointOfSale.Models.ViewPointOfSaleViewModel
<form id="app" method="post" asp-action="ViewPointOfSale" asp-route-appId="@Model.AppId" asp-antiforgery="false" data-buy v-on:submit="handleFormSubmit" class="d-flex flex-column gap-4 flex-fill" v-cloak>
<form id="app" method="post" asp-action="ViewPointOfSale" asp-route-appId="@Model.AppId" asp-antiforgery="false" data-buy v-on:submit="handleFormSubmit" class="d-flex flex-column gap-4 my-auto" v-cloak>
<input id="posdata" type="hidden" name="posdata" v-model="posdata">
<div ref="display" class="d-flex flex-column align-items-center px-4 mb-auto">
<div class="fw-semibold text-muted">{{srvModel.currencyCode}}</div>
<div class="fw-bold lh-sm" ref="amount" v-bind:style="{ fontSize: `${fontSize}px` }">{{ formatCurrency(total, false) }}</div>
<div class="text-muted text-center mt-2" v-if="calculation">{{ calculation }}</div>
<div class="text-muted text-center mt-2" id="Calculation" v-if="srvModel.showDiscount || srvModel.enableTips">{{ calculation }}</div>
</div>
<div id="ModeTabs" class="tab-content mb-n2">
<div id="ModeTabs" class="tab-content mb-n2" v-if="srvModel.showDiscount || srvModel.enableTips">
<div id="Mode-Discount" class="tab-pane fade px-2" :class="{ show: mode === 'discount', active: mode === 'discount' }" role="tabpanel" aria-labelledby="ModeTablist-Discount" v-if="srvModel.showDiscount">
<div class="h4 fw-semibold text-muted text-center">
<span class="h3 text-body me-1">{{discountPercent || 0}}%</span> discount