fix malformed html in pos + align price/button to card bottom

This commit is contained in:
Kukks 2019-04-05 09:50:41 +02:00
parent 6c45689e6a
commit acb8ca982f

View file

@ -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>&nbsp; <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>&nbsp;
<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>