From acb8ca982f28e7cf848661dd6a556eaa82b03f95 Mon Sep 17 00:00:00 2001
From: Kukks <evilkukka@gmail.com>
Date: Fri, 5 Apr 2019 09:50:41 +0200
Subject: [PATCH] fix malformed html in pos + align price/button to card bottom

---
 .../Views/AppsPublic/ViewPointOfSale.cshtml   | 370 ++++++++++--------
 1 file changed, 202 insertions(+), 168 deletions(-)
diff --git a/BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml b/BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml
index 9b3fa5f29..4fe792a0a 100644
--- a/BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml
+++ b/BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml
@@ -12,7 +12,7 @@
 <html class="h-100">
 <head>
     <title>@Model.Title</title>
-    <meta charset="utf-8" />
+    <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <link rel="apple-touch-icon" href="~/img/icons/icon-512x512.png">
@@ -20,20 +20,20 @@
 
     <link rel="manifest" href="~/manifest.json">
 
-    <link href="@this.Context.Request.GetRelativePathOrAbsolute(themeManager.BootstrapUri)" rel="stylesheet" />
+    <link href="@this.Context.Request.GetRelativePathOrAbsolute(themeManager.BootstrapUri)" rel="stylesheet"/>
     @if (Model.CustomCSSLink != null)
     {
-        <link href="@Model.CustomCSSLink" rel="stylesheet" />
+        <link href="@Model.CustomCSSLink" rel="stylesheet"/>
     }
-    <link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
+    <link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
 
-    @if (Model.EnableShoppingCart) 
+    @if (Model.EnableShoppingCart)
     {
         <link rel="stylesheet" href="~/cart/css/style.css">
         <script type="text/javascript">
-        var srvModel = @Html.Raw(Json.Serialize(Model));
+            var srvModel = @Html.Raw(Json.Serialize(Model));
         </script>
-        <bundle name="wwwroot/bundles/cart-bundle.min.js" />
+        <bundle name="wwwroot/bundles/cart-bundle.min.js"/>
     }
     <style>
         .card-deck {
@@ -41,13 +41,15 @@
             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
             grid-gap: .5rem;
         }
+
         .card-deck .card:only-of-type {
             max-width: 320px;
             margin: auto;
         }
-    </style> 
+    </style>
 </head>
 
+<body class="h-100">
 <script id="template-cart-item" type="text/template">
 <tr data-id="{id}">
     {image}
@@ -106,7 +108,7 @@
 </tr>
 @if (Model.ShowDiscount)
 {
-<tr>
+    <tr>
     <td colspan="5" class="border-top-0">
         <div class="input-group">
             <div class="input-group-prepend">
@@ -125,10 +127,10 @@
 <script id="template-cart-tip" type="text/template">
 @if (Model.EnableTips)
 {
-<tr class="h5">
+    <tr class="h5">
     <td colspan="5" class="border-top-0 pt-4">@Model.CustomTipText</td>
 </tr>
-<tr>
+    <tr>
     <td colspan="5" class="border-0">
         <div class="input-group mb-2">
             <div class="input-group-prepend">
@@ -140,18 +142,20 @@
             </div>
         </div>
         <div class="row mb-1">
-            @if (CustomTipPercentages != null && CustomTipPercentages.Length > 0) {
-                @for (int i = 0; i < CustomTipPercentages.Length; i++) {
-                    var percentage = CustomTipPercentages[i];
-                    <div class="col">
+            @if (CustomTipPercentages != null && CustomTipPercentages.Length > 0)
+            {
+                @for (int i = 0; i < CustomTipPercentages.Length; i++)
+                 {
+                     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>
                     </div>
-                }
+                 }
             }
+                
         </div>
     </td>
-</tr>
-}
+</tr>}
 </script>
 
 <script id="template-cart-total" type="text/template">
@@ -163,54 +167,55 @@
 </tr>
 </script>
 
-<body class="h-100">
-    @if (Model.EnableShoppingCart) 
-    {
-        <div id="cartModal" class="modal" tabindex="-1" role="dialog">
-            <div class="modal-dialog" role="document">
-                <div class="modal-content">
+@if (Model.EnableShoppingCart)
+{
+    <div id="cartModal" class="modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
                 <div class="modal-header bg-primary text-white border-0">
                     <h5 class="modal-title">Confirmation</h5>
                     <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>
                 </div>
                 <div class="modal-body p-0">
                     <table id="js-cart-summary" class="table m-0">
                         <tbody class="my-3">
-                            <tr class="h5">
-                                <td colspan="2" class="border-top-0">Summary</td>
-                            </tr>
-                            <tr class="h6">
-                                <td class="border-0 pb-0">Total products</td>
-                                <td align="right" class="border-0 pb-0">
-                                    <span class="js-cart-summary-products text-nowrap"></span>
-                                </td>
-                            </tr>
-                            @if (Model.ShowDiscount) 
-                            {
+                        <tr class="h5">
+                            <td colspan="2" class="border-top-0">Summary</td>
+                        </tr>
+                        <tr class="h6">
+                            <td class="border-0 pb-0">Total products</td>
+                            <td align="right" class="border-0 pb-0">
+                                <span class="js-cart-summary-products text-nowrap"></span>
+                            </td>
+                        </tr>
+                        @if (Model.ShowDiscount)
+                        {
                             <tr class="h6">
                                 <td class="border-0 pb-y">Discount</td>
                                 <td align="right" class="border-0 pb-y">
                                     <span class="js-cart-summary-discount text-nowrap"></span>
                                 </td>
                             </tr>
-                            }
-                            @if (Model.EnableTips) 
-                            {
+                        }
+                        @if (Model.EnableTips)
+                        {
                             <tr class="h6">
                                 <td class="border-top-0 pt-0">Tip</td>
                                 <td align="right" class="border-top-0 pt-0">
                                     <span class="js-cart-summary-tip text-nowrap"></span>
                                 </td>
                             </tr>
-                            }
-                            <tr class="h3 table-light">
-                                <td>Total</td>
-                                <td align="right">
-                                    <span class="js-cart-summary-total text-nowrap"></span>
-                                </td>
-                            </tr>
+                        }
+                        <tr class="h3 table-light">
+                            <td>Total</td>
+                            <td align="right">
+                                <span class="js-cart-summary-total text-nowrap"></span>
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -218,157 +223,186 @@
                     <form method="post" 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"><b>@Model.CustomButtonText</b></button>
+                        <button id="js-cart-pay" class="btn btn-primary btn-lg" type="submit">
+                            <b>@Model.CustomButtonText</b>
+                        </button>
                     </form>
                 </div>
-                </div>
             </div>
         </div>
+    </div>
 
-        <div class="wrapper">
-            <!-- Page Content  -->
-            <div id="content">
-                <div class="p-3">
-                    <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="#"><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 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">
-                                <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 class="wrapper">
+        <!-- Page Content  -->
+        <div id="content">
+            <div class="p-3">
+                <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="#">
+                            <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 id="js-pos-list" class="text-center mx-auto px-4">
-                    <div class="row card-deck my-3 mx-auto">
-
-                        @for (var index = 0; index < Model.Items.Length; index++)
-                        {
-                            var item = Model.Items[index];
-                            var image = item.Image;
-                            var description = item.Description;
-
-                            <div class="js-add-cart card my-2 card-wrapper" data-id="@index">
-                                @if (!String.IsNullOrWhiteSpace(image))
-                                {
-                                    @:<img class="card-img-top" src="@image" alt="Card image cap">
-                                }
-                                <div class="card-body p-3">
-                                    <h6 class="card-title mb-0">@item.Title</h6>
-                                    @if (!String.IsNullOrWhiteSpace(description))
-                                    {
-                                        <p class="card-text">@description</p>
-                                    }
-                                    <span class="text-muted small">@String.Format(Model.ButtonText, @item.Price.Formatted)</span>
-                                </div>
-                            </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">
+                            <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>
 
-            <!-- Sidebar  -->
-            <nav id="sidebar" class="bg-dark">
-                <div class="bg-warning p-3 clearfix">
-                    <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-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 id="js-pos-list" class="text-center mx-auto px-4">
+                <div class="row card-deck my-3 mx-auto">
 
-                <table id="js-cart-list" class="table table-responsive bg-light mt-0 mb-0">
-                    <thead class="thead-dark">
-                        <tr>
-                        <th colspan="3" width="55%">Product</th>
-                            <th class="text-center" width="20%"><div style="width: 84px">Quantity</div></th>
-                            <th class="text-right" width="25%"><div style="min-width: 50px">Price</div></th>
-                        </tr>
-                    </thead>
-                    <tbody></tbody>
-                </table>
-
-                <table id="js-cart-extra" class="table bg-light mt-0 mb-0">
-                    <tbody></tbody>
-                </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>
-
-                <div class="text-center mb-5 pb-5">
-                    <img src="~/img/logo-white.png" height="40">
-                </div>
-            </nav>
-        </div>
-
-    } else {
-        <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;">
-                <h1 class="mb-4">@Model.Title</h1>
-
-                <div class="row  card-deck my-3 mx-auto">
-                    @for (int x = 0; x < Model.Items.Length; x++)
+                    @for (var index = 0; index < Model.Items.Length; index++)
                     {
-                        var item = Model.Items[x];
+                        var item = Model.Items[index];
+                        var image = item.Image;
+                        var description = item.Description;
 
-                        <div class="card my-2" data-id="@x">
-                            @if (!String.IsNullOrWhiteSpace(item.Image))
+                        <div class="js-add-cart card my-2 card-wrapper" data-id="@index">
+                            @if (!String.IsNullOrWhiteSpace(image))
                             {
-                                <img class="card-img-top" src="@item.Image" alt="Card image cap">
+                                @:<img class="card-img-top" src="@image" alt="Card image cap">
                             }
-                            <div class="card-body">
-                                <h5 class="card-title">@item.Title</h5>
-                                @if (!String.IsNullOrWhiteSpace(item.Description))
+                            <div class="card-body p-3">
+                                <h6 class="card-title mb-0">@item.Title</h6>
+                                @if (!String.IsNullOrWhiteSpace(description))
                                 {
-                                    <p class="card-text">@item.Description</p>
-                                }
-                                @if (item.Custom && !Model.EnableShoppingCart)
-                                {
-                                    <form method="post" asp-antiforgery="false" data-buy>
-                                        <input type="hidden" name="choicekey" value="@item.Id"/>
-                                        <div class="input-group">
-                                            <div class="input-group-prepend">
-                                                <span class="input-group-text">@Model.CurrencySymbol</span>
-                                            </div>
-                                            <input class="form-control" type="number" min="@item.Price.Value" step="@Model.Step" name="amount"
-                                                   value="@item.Price.Value" placeholder="Amount">
-                                            <div class="input-group-append">
-                                                <button class="btn btn-primary" type="submit">@Model.CustomButtonText</button>
-                                            </div>
-                                        </div>
-                                    </form>
-                                }
-                                else
-                                {
-                                    <form method="post" asp-antiforgery="false">
-                                        <button type="submit" name="choiceKey" class="js-add-cart btn btn-primary" value="@item.Id">
-                                            @String.Format(Model.ButtonText, @item.Price.Formatted)</button>
-                                    </form>
+                                    <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>
+                            </div>
                         </div>
                     }
-                    @if (Model.ShowCustomAmount)
-                    {
-                        <div class="card  h-100">
-                            <div class="card-body my-auto">
-                                <h5 class="card-title">Custom Amount</h5>
-                                <p class="card-text">Create invoice to pay custom amount</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Sidebar  -->
+        <nav id="sidebar" class="bg-dark">
+            <div class="bg-warning p-3 clearfix">
+                <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-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>
+
+            <table id="js-cart-list" class="table table-responsive bg-light mt-0 mb-0">
+                <thead class="thead-dark">
+                <tr>
+                    <th colspan="3" width="55%">Product</th>
+                    <th class="text-center" width="20%">
+                        <div style="width: 84px">Quantity</div>
+                    </th>
+                    <th class="text-right" width="25%">
+                        <div style="min-width: 50px">Price</div>
+                    </th>
+                </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+
+            <table id="js-cart-extra" class="table bg-light mt-0 mb-0">
+                <tbody></tbody>
+            </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>
+
+            <div class="text-center mb-5 pb-5">
+                <img src="~/img/logo-white.png" height="40">
+            </div>
+        </nav>
+    </div>
+}
+else
+{
+    <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;">
+            <h1 class="mb-4">@Model.Title</h1>
+
+            <div class="row  card-deck my-3 mx-auto">
+                @for (int x = 0; x < Model.Items.Length; x++)
+                {
+                    var item = Model.Items[x];
+
+                    <div class="card my-2" data-id="@x">
+                        @if (!String.IsNullOrWhiteSpace(item.Image))
+                        {
+                            <img class="card-img-top" src="@item.Image" alt="Card image cap">
+                        }
+                        <div class="card-body pb-0">
+                            <h5 class="card-title">@item.Title</h5>
+                            @if (!String.IsNullOrWhiteSpace(item.Description))
+                            {
+                                <p class="card-text">@item.Description</p>
+                            }
+                            
+                        </div>
+                        <div class="card-footer bg-transparent border-0">
+                            @if (item.Custom)
+                            {
                                 <form method="post" asp-antiforgery="false" data-buy>
+                                    <input type="hidden" name="choicekey" value="@item.Id"/>
                                     <div class="input-group">
                                         <div class="input-group-prepend">
                                             <span class="input-group-text">@Model.CurrencySymbol</span>
                                         </div>
-                                        <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>
+                                        <input class="form-control" type="number" min="@item.Price.Value" step="@Model.Step" name="amount"
+                                               value="@item.Price.Value" placeholder="Amount">
+                                        <div class="input-group-append">
+                                            <button class="btn btn-primary" type="submit">@Model.CustomButtonText</button>
+                                        </div>
                                     </div>
                                 </form>
-                            </div>
+                            }
+                            else
+                            {
+                                <form method="post" asp-antiforgery="false">
+                                    <button type="submit" name="choiceKey" class="js-add-cart btn btn-primary" value="@item.Id">
+                                        @String.Format(Model.ButtonText, @item.Price.Formatted)</button>
+                                </form>
+                            }
                         </div>
-                    }
-                </div>
+                    </div>
+                }
+                @if (Model.ShowCustomAmount)
+                {
+                    <div class="card my-2">
+                        <div class="card-body my-auto pb-0">
+                            <h5 class="card-title">Custom Amount</h5>
+                            <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>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text">@Model.CurrencySymbol</span>
+                                    </div>
+                                    <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>
+                            </form>
+                        </div>
+                    </div>
+                }
             </div>
         </div>
-    }
+    </div>
+}
 </body>
 </html>

Summary
Total products	- -
Summary
Total products	+ +
Discount
Tip
Total	- -
Total	+ +