mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2024-11-20 10:40:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Address issues in #606 (#988)

Browse Source 
* Increase POS cart button and input size elements as per #606

* Increase confirmation modal input and button size as per #606

* Add loading indicator to cart confirmation pay button as per #606

* Ensure POS app tip amount input shows decimal amount with correct divisibility

* Center POS app cart quantity input field

address task in #606

* Ensure search bar and content are horizontally aligned

address task in #606
This commit is contained in:
Umar Bolatov 2019-08-29 01:15:00 -07:00 committed by Nicolas Dorier
parent 7457e99451
commit 9154e4264d
2 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml
View File

@ -63,7 +63,7 @@
<a class="js-cart-item-remove btn btn-link" href="#"><i class="fa fa-trash text-muted"></i></a>
</td>
<td class="align-middle px-0" align="right">
<div class="input-group">
<div class="input-group align-items-center">
<div class="input-group-prepend">
<a class="js-cart-item-minus btn btn-link px-2" href="#"><i class="fa fa-minus-circle fa-fw text-danger"></i></a>
</div>
@ -145,9 +145,9 @@
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-money fa-fw"></i></span>
</div>
<input class="js-cart-tip form-control" type="number" min="0" step="@Model.Step" value="{tip}" name="tip" placeholder="Tip in @(Model.CurrencyInfo.CurrencySymbol != null ? Model.CurrencyInfo.CurrencySymbol : Model.CurrencyCode)">
<input class="js-cart-tip form-control form-control-lg" type="number" min="0" step="@Model.Step" value="{tip}" name="tip" placeholder="Tip in @(Model.CurrencyInfo.CurrencySymbol != null ? Model.CurrencyInfo.CurrencySymbol : Model.CurrencyCode)">
<div class="input-group-append">
<a class="js-cart-tip-remove btn btn-danger" href="#"><i class="fa fa-times"></i></a>
<a class="js-cart-tip-remove btn btn-lg btn-danger" href="#"><i class="fa fa-times"></i></a>
</div>
</div>
<div class="row mb-1">
@ -157,7 +157,7 @@
{
var percentage = CustomTipPercentages[i];
<div class="col">
<a class="js-cart-tip-btn btn btn-light btn-block border mb-2" href="#" data-tip="@percentage">@percentage%</a>
<a class="js-cart-tip-btn btn btn-lg btn-light btn-block border mb-2" href="#" data-tip="@percentage">@percentage%</a>
</div>
}
}
@ -229,7 +229,15 @@
</table>
</div>
<div class="modal-footer bg-light">
<form method="post" asp-controller="AppsPublic" asp-action="ViewPointOfSale" asp-route-appId="@Model.AppId" asp-antiforgery="false" data-buy>
<form
id="js-cart-pay-form"
method="post"
asp-controller="AppsPublic"
asp-action="ViewPointOfSale"
asp-route-appId="@Model.AppId"
asp-antiforgery="false"
data-buy
>
<input id="js-cart-amount" class="form-control" type="hidden" name="amount">
<input id="js-cart-posdata" class="form-control" type="hidden" name="posdata">
<button id="js-cart-pay" class="btn btn-primary btn-lg" type="submit">
@ -244,10 +252,10 @@
<div class="wrapper">
<!-- Page Content -->
<div id="content">
<div class="p-3">
<div class="p-2 p-sm-4">
<div class="row">
<div class="col-sm-4 col-lg-3 order-sm-last text-right mb-2">
<a class="js-cart btn btn-warning text-white text-right" href="#">
<a class="js-cart btn btn-lg btn-warning text-white text-right" href="#">
<i class="fa fa-shopping-basket"></i>&nbsp;
<span class="badge badge-light badge-pill">
<span id="js-cart-items">0</span>
@ -256,7 +264,7 @@
</div>
<div class="col-sm-8 col-lg-9 mb-2">
<div class="input-group mb-2">
<input type="text" class="js-search form-control" placeholder="Find product">
<input type="text" class="js-search form-control form-control-lg" placeholder="Find product">
<a class="js-search-reset btn btn-link text-black" href="#" style="position: absolute; right: 0px; z-index: 1049; display: none;">
<i class="fa fa-times-circle fa-lg"></i>
</a>
@ -271,7 +279,7 @@
}
</div>
<div id="js-pos-list" class="text-center mx-auto px-4">
<div class="row card-deck my-3 mx-auto">
<div class="row card-deck my-3">
@for (var index = 0; index < Model.Items.Length; index++)
{
@ -308,7 +316,7 @@
<a class="js-cart btn btn-sm bg-white text-black pull-right ml-5" href="#">
<i class="fa fa-times fa-lg"></i>
</a>
<a class="js-cart-destroy btn btn-sm bg-white text-danger pull-right" href="#" style="display: none;">Empty cart <i class="fa fa-trash fa-fw fa-lg"></i></a>
<a class="js-cart-destroy btn bg-white text-danger pull-right" href="#" style="display: none;">Empty cart <i class="fa fa-trash fa-fw fa-lg"></i></a>
</div>
<table id="js-cart-list" class="table table-responsive bg-light mt-0 mb-0">

21
BTCPayServer/wwwroot/cart/js/cart.jquery.js
View File

@ -82,6 +82,22 @@ $(document).ready(function(){
cart.destroy(true);
});
// Disable pay button and add loading animation when pay form is submitted
$('#js-cart-pay-form').on('submit', function() {
var button = $('#js-cart-pay');
if (button) {
// Disable the pay button
button.attr('disabled', true);
// Add loading animation to the pay button
button.prepend([
'<div class="spinner-grow spinner-grow-sm" role="status">',
' <span class="sr-only">Loading...</span>',
'</div>'
].join(''));
}
});
$('.js-cart').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
@ -129,7 +145,10 @@ $(document).ready(function(){
var $tip = $('.js-cart-tip'),
discount = cart.percentage(cart.getTotalProducts(), cart.getDiscount());
$tip.val(cart.percentage(cart.getTotalProducts() - discount, parseInt($(this).data('tip'))));
var purchaseAmount = cart.getTotalProducts() - discount;
var tipPercentage = parseInt($(this).data('tip'));
var tipValue = cart.percentage(purchaseAmount, tipPercentage).toFixed(srvModel.currencyInfo.divisibility);
$tip.val(tipValue);
$tip.trigger('input');
});
});