mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-23 14:40:36 +01:00
fix malformed html in pos + align price/button to card bottom
This commit is contained in:
parent
6c45689e6a
commit
acb8ca982f
1 changed files with 202 additions and 168 deletions
|
@ -41,6 +41,7 @@
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
grid-gap: .5rem;
|
grid-gap: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-deck .card:only-of-type {
|
.card-deck .card:only-of-type {
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
@ -48,6 +49,7 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
<body class="h-100">
|
||||||
<script id="template-cart-item" type="text/template">
|
<script id="template-cart-item" type="text/template">
|
||||||
<tr data-id="{id}">
|
<tr data-id="{id}">
|
||||||
{image}
|
{image}
|
||||||
|
@ -140,18 +142,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mb-1">
|
<div class="row mb-1">
|
||||||
@if (CustomTipPercentages != null && CustomTipPercentages.Length > 0) {
|
@if (CustomTipPercentages != null && CustomTipPercentages.Length > 0)
|
||||||
@for (int i = 0; i < CustomTipPercentages.Length; i++) {
|
{
|
||||||
|
@for (int i = 0; i < CustomTipPercentages.Length; i++)
|
||||||
|
{
|
||||||
var percentage = CustomTipPercentages[i];
|
var percentage = CustomTipPercentages[i];
|
||||||
<div class="col">
|
<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-light btn-block border mb-2" href="#" data-tip="@percentage">@percentage%</a>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script id="template-cart-total" type="text/template">
|
<script id="template-cart-total" type="text/template">
|
||||||
|
@ -163,7 +167,6 @@
|
||||||
</tr>
|
</tr>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<body class="h-100">
|
|
||||||
@if (Model.EnableShoppingCart)
|
@if (Model.EnableShoppingCart)
|
||||||
{
|
{
|
||||||
<div id="cartModal" class="modal" tabindex="-1" role="dialog">
|
<div id="cartModal" class="modal" tabindex="-1" role="dialog">
|
||||||
|
@ -172,7 +175,9 @@
|
||||||
<div class="modal-header bg-primary text-white border-0">
|
<div class="modal-header bg-primary text-white border-0">
|
||||||
<h5 class="modal-title">Confirmation</h5>
|
<h5 class="modal-title">Confirmation</h5>
|
||||||
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
||||||
<span aria-hidden="true"><i class="fa fa-times fa-fw"></i></span>
|
<span aria-hidden="true">
|
||||||
|
<i class="fa fa-times fa-fw"></i>
|
||||||
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body p-0">
|
<div class="modal-body p-0">
|
||||||
|
@ -218,7 +223,9 @@
|
||||||
<form method="post" asp-antiforgery="false" data-buy>
|
<form method="post" asp-antiforgery="false" data-buy>
|
||||||
<input id="js-cart-amount" class="form-control" type="hidden" name="amount">
|
<input id="js-cart-amount" class="form-control" type="hidden" name="amount">
|
||||||
<input id="js-cart-posdata" class="form-control" type="hidden" name="posdata">
|
<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"><b>@Model.CustomButtonText</b></button>
|
<button id="js-cart-pay" class="btn btn-primary btn-lg" type="submit">
|
||||||
|
<b>@Model.CustomButtonText</b>
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -231,12 +238,19 @@
|
||||||
<div class="p-3">
|
<div class="p-3">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-4 col-lg-3 order-sm-last text-right mb-2">
|
<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="#"><i class="fa fa-shopping-basket"></i> <span class="badge badge-light badge-pill"><span id="js-cart-items">0</span></span></a>
|
<a class="js-cart btn btn-warning text-white text-right" href="#">
|
||||||
|
<i class="fa fa-shopping-basket"></i>
|
||||||
|
<span class="badge badge-light badge-pill">
|
||||||
|
<span id="js-cart-items">0</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-8 col-lg-9 mb-2">
|
<div class="col-sm-8 col-lg-9 mb-2">
|
||||||
<div class="input-group 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" 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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -262,6 +276,9 @@
|
||||||
{
|
{
|
||||||
<p class="card-text">@description</p>
|
<p class="card-text">@description</p>
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
|
<div class="card-footer pt-0 bg-transparent border-0">
|
||||||
|
|
||||||
<span class="text-muted small">@String.Format(Model.ButtonText, @item.Price.Formatted)</span>
|
<span class="text-muted small">@String.Format(Model.ButtonText, @item.Price.Formatted)</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -274,7 +291,9 @@
|
||||||
<nav id="sidebar" class="bg-dark">
|
<nav id="sidebar" class="bg-dark">
|
||||||
<div class="bg-warning p-3 clearfix">
|
<div class="bg-warning p-3 clearfix">
|
||||||
<h3 class="text-white m-0 pull-left">Cart</h3>
|
<h3 class="text-white m-0 pull-left">Cart</h3>
|
||||||
<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 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 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -282,8 +301,12 @@
|
||||||
<thead class="thead-dark">
|
<thead class="thead-dark">
|
||||||
<tr>
|
<tr>
|
||||||
<th colspan="3" width="55%">Product</th>
|
<th colspan="3" width="55%">Product</th>
|
||||||
<th class="text-center" width="20%"><div style="width: 84px">Quantity</div></th>
|
<th class="text-center" width="20%">
|
||||||
<th class="text-right" width="25%"><div style="min-width: 50px">Price</div></th>
|
<div style="width: 84px">Quantity</div>
|
||||||
|
</th>
|
||||||
|
<th class="text-right" width="25%">
|
||||||
|
<div style="min-width: 50px">Price</div>
|
||||||
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody></tbody>
|
<tbody></tbody>
|
||||||
|
@ -293,15 +316,18 @@
|
||||||
<tbody></tbody>
|
<tbody></tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<button id="js-cart-confirm" data-toggle="modal" data-target="#cartModal" class="btn btn-primary btn-lg btn-block mb-3 p-3" disabled="disabled" type="submit"><b>Confirm</b></button>
|
<button id="js-cart-confirm" data-toggle="modal" data-target="#cartModal" class="btn btn-primary btn-lg btn-block mb-3 p-3" disabled="disabled" type="submit">
|
||||||
|
<b>Confirm</b>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="text-center mb-5 pb-5">
|
<div class="text-center mb-5 pb-5">
|
||||||
<img src="~/img/logo-white.png" height="40">
|
<img src="~/img/logo-white.png" height="40">
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
} else {
|
else
|
||||||
|
{
|
||||||
<div class="container d-flex h-100">
|
<div class="container d-flex h-100">
|
||||||
<div class="justify-content-center align-self-center text-center mx-auto px-2 py-3 w-100" style="margin: auto;">
|
<div class="justify-content-center align-self-center text-center mx-auto px-2 py-3 w-100" style="margin: auto;">
|
||||||
<h1 class="mb-4">@Model.Title</h1>
|
<h1 class="mb-4">@Model.Title</h1>
|
||||||
|
@ -316,13 +342,16 @@
|
||||||
{
|
{
|
||||||
<img class="card-img-top" src="@item.Image" alt="Card image cap">
|
<img class="card-img-top" src="@item.Image" alt="Card image cap">
|
||||||
}
|
}
|
||||||
<div class="card-body">
|
<div class="card-body pb-0">
|
||||||
<h5 class="card-title">@item.Title</h5>
|
<h5 class="card-title">@item.Title</h5>
|
||||||
@if (!String.IsNullOrWhiteSpace(item.Description))
|
@if (!String.IsNullOrWhiteSpace(item.Description))
|
||||||
{
|
{
|
||||||
<p class="card-text">@item.Description</p>
|
<p class="card-text">@item.Description</p>
|
||||||
}
|
}
|
||||||
@if (item.Custom && !Model.EnableShoppingCart)
|
|
||||||
|
</div>
|
||||||
|
<div class="card-footer bg-transparent border-0">
|
||||||
|
@if (item.Custom)
|
||||||
{
|
{
|
||||||
<form method="post" asp-antiforgery="false" data-buy>
|
<form method="post" asp-antiforgery="false" data-buy>
|
||||||
<input type="hidden" name="choicekey" value="@item.Id"/>
|
<input type="hidden" name="choicekey" value="@item.Id"/>
|
||||||
|
@ -350,17 +379,22 @@
|
||||||
}
|
}
|
||||||
@if (Model.ShowCustomAmount)
|
@if (Model.ShowCustomAmount)
|
||||||
{
|
{
|
||||||
<div class="card h-100">
|
<div class="card my-2">
|
||||||
<div class="card-body my-auto">
|
<div class="card-body my-auto pb-0">
|
||||||
<h5 class="card-title">Custom Amount</h5>
|
<h5 class="card-title">Custom Amount</h5>
|
||||||
<p class="card-text">Create invoice to pay custom amount</p>
|
<p class="card-text">Create invoice to pay custom amount</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="card-footer bg-transparent border-0">
|
||||||
<form method="post" asp-antiforgery="false" data-buy>
|
<form method="post" asp-antiforgery="false" data-buy>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<div class="input-group-prepend">
|
<div class="input-group-prepend">
|
||||||
<span class="input-group-text">@Model.CurrencySymbol</span>
|
<span class="input-group-text">@Model.CurrencySymbol</span>
|
||||||
</div>
|
</div>
|
||||||
<input class="form-control" type="number" min="0" step="@Model.Step" name="amount" placeholder="Amount">
|
<input class="form-control" type="number" min="0" step="@Model.Step" name="amount" placeholder="Amount">
|
||||||
<div class="input-group-append"><button class="btn btn-primary" type="submit">@Model.CustomButtonText</button></div>
|
<div class="input-group-append">
|
||||||
|
<button class="btn btn-primary" type="submit">@Model.CustomButtonText</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Add table
Reference in a new issue