From bc6d03734120f524e496a8093a17a67d19154dbd Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Wed, 10 Jul 2024 17:12:58 +0200
Subject: [PATCH] POS: Improve padding on mobile and unify card look with tiles
 (#6088)

On mobile, the description content was lacking horizontal padding. This adjusts it while also unifying the cards to work like the tiles on checkout: Below 400px width, we pull the to the edges of the screen, which makes it looks nicer and display better than as if they'd also have an outer margin.

Adjustments take effect on all POS view variants.
---
 .../Shared/PointOfSale/Public/Cart.cshtml      |  6 +++---
 .../Shared/PointOfSale/Public/Print.cshtml     |  4 ++--
 .../Shared/PointOfSale/Public/Static.cshtml    |  6 +++---
 BTCPayServer/wwwroot/main/site.css             |  2 ++
 BTCPayServer/wwwroot/pos/cart.css              | 18 ++++++++++++------
 BTCPayServer/wwwroot/pos/common.css            | 14 ++++++++++++++
 6 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml b/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
index d933706d1..d64453640 100644
--- a/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
+++ b/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
@@ -78,12 +78,12 @@
                         buttonText = buttonText.Replace("{0}", formatted).Replace("{Price}", formatted);
                         var categories = new JArray(item.Categories ?? new object[] { });
                         <div class="col posItem posItem--displayed" :class="{ 'posItem--inStock': inStock(@index) }" data-index="@index" data-search="@Safe.RawEncode(item.Title + " " + item.Description)" data-categories='@Safe.Json(categories)'>
-                            <div class="card h-100 px-0" v-on:click="addToCart(@index, 1)">
+                            <div class="tile card" v-on:click="addToCart(@index, 1)">
                                 @if (!string.IsNullOrWhiteSpace(item.Image))
                                 {
                                     <img class="card-img-top" src="@item.Image" alt="@item.Title" asp-append-version="true">
                                 }
-                                <div class="card-body p-3 d-flex flex-column gap-2 mb-auto">
+                                <div class="card-body d-flex flex-column gap-2 mb-auto">
                                     <h5 class="card-title m-0">@Safe.Raw(item.Title)</h5>
                                     <div class="d-flex gap-2 align-items-center">
                                         @if (item.PriceType == ViewPointOfSaleViewModel.ItemPriceType.Topup || item.Price == 0)
@@ -108,7 +108,7 @@
                                 </div>
                                 @if (inStock)
                                 {
-                                    <form class="card-footer bg-transparent border-0 pt-0 pb-3">
+                                    <form class="card-footer">
                                         @if (item.PriceType != ViewPointOfSaleViewModel.ItemPriceType.Fixed)
                                         {
                                             <div class="input-group mb-2">
diff --git a/BTCPayServer/Views/Shared/PointOfSale/Public/Print.cshtml b/BTCPayServer/Views/Shared/PointOfSale/Public/Print.cshtml
index 875109b6f..22a395e39 100644
--- a/BTCPayServer/Views/Shared/PointOfSale/Public/Print.cshtml
+++ b/BTCPayServer/Views/Shared/PointOfSale/Public/Print.cshtml
@@ -78,8 +78,8 @@ else
                 var formatted = DisplayFormatter.Currency(item.Price ?? 0, Model.CurrencyCode, DisplayFormatter.CurrencyFormat.Symbol);
                 if (item.PriceType == ViewPointOfSaleViewModel.ItemPriceType.Fixed && item.Price == 0) continue;
                 <div class="d-flex flex-wrap">
-                    <div class="card px-0" data-id="@x">
-                        <div class="card-body p-3 d-flex flex-column gap-2">
+                    <div class="tile card w-100" data-id="@x">
+                        <div class="card-body pt-0 d-flex flex-column gap-2">
                             <h5 class="card-title m-0">@Safe.Raw(item.Title)</h5>
                             <div class="d-flex gap-2 align-items-center">
                                 <span class="fw-semibold">
diff --git a/BTCPayServer/Views/Shared/PointOfSale/Public/Static.cshtml b/BTCPayServer/Views/Shared/PointOfSale/Public/Static.cshtml
index 35cd25e23..038571e12 100644
--- a/BTCPayServer/Views/Shared/PointOfSale/Public/Static.cshtml
+++ b/BTCPayServer/Views/Shared/PointOfSale/Public/Static.cshtml
@@ -36,12 +36,12 @@
                 buttonText = buttonText.Replace("{0}", formatted).Replace("{Price}", formatted);
 
                 <div class="col posItem posItem--displayed@(x == 0 ? " posItem--first" : null)@(x == Model.Items.Length - 1 && !Model.ShowCustomAmount ? " posItem--last" : null)">
-                    <div class="card h-100 px-0" data-id="@x">
+                    <div class="tile card" data-id="@x">
                         @if (!string.IsNullOrWhiteSpace(item.Image))
                         {
                             <img class="card-img-top" src="@item.Image" alt="@Safe.Raw(item.Title)" asp-append-version="true">
                         }
-                        <div class="card-body p-3 d-flex flex-column gap-2 mb-auto">
+                        <div class="card-body d-flex flex-column gap-2 mb-auto">
                             <h5 class="card-title m-0">@Safe.Raw(item.Title)</h5>
                             <div class="d-flex gap-2 align-items-center">
                                 @if (item.PriceType == ViewPointOfSaleViewModel.ItemPriceType.Topup || item.Price == 0)
@@ -64,7 +64,7 @@
                                 <p class="card-text">@Safe.Raw(item.Description)</p>
                             }
                         </div>
-                        <div class="card-footer bg-transparent border-0 pt-0 pb-3">
+                        <div class="card-footer">
                             @if (inStock)
                             {
                                 <form method="post" asp-action="ViewPointOfSale" asp-route-appId="@Model.AppId" asp-antiforgery="false" autocomplete="off">
diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css
index 672c78e5c..6faa26f87 100644
--- a/BTCPayServer/wwwroot/main/site.css
+++ b/BTCPayServer/wwwroot/main/site.css
@@ -732,6 +732,8 @@ input:checked + label.btcpay-list-select-item {
     .tile {
         --tile-padding: 1rem;
         --tile-border-radius: none;
+        margin-left: calc(var(--wrap-padding-horizontal) * -1);
+        margin-right: calc(var(--wrap-padding-horizontal) * -1);
     }
 }
 
diff --git a/BTCPayServer/wwwroot/pos/cart.css b/BTCPayServer/wwwroot/pos/cart.css
index 3fa2dcf05..6036d966b 100644
--- a/BTCPayServer/wwwroot/pos/cart.css
+++ b/BTCPayServer/wwwroot/pos/cart.css
@@ -7,11 +7,6 @@
     
     padding-top: 0;
 }
-@media (max-width: 400px) {
-    #PosCart .public-page-wrap {
-        --wrap-padding-horizontal: var(--btcpay-space-s);
-    }
-}
 
 #PosCart .offcanvas-backdrop {
     top: var(--mobile-header-height);
@@ -59,8 +54,19 @@
 }
 
 #RecentTransactionsToggle {
+    left: -.5rem;
+}
+#RecentTransactionsToggle.btn .icon {
     --icon-size: 1.5rem;
-    left: 0;
+}
+@media screen and (max-width: 400px) {
+    header {
+        padding-left: .5rem;
+        padding-right: .5rem;
+    }
+    #RecentTransactionsToggle {
+        left: -.125rem;
+    }
 }
 
 header .cart-toggle-btn {
diff --git a/BTCPayServer/wwwroot/pos/common.css b/BTCPayServer/wwwroot/pos/common.css
index 157e0542c..e9b776ea7 100644
--- a/BTCPayServer/wwwroot/pos/common.css
+++ b/BTCPayServer/wwwroot/pos/common.css
@@ -45,6 +45,12 @@
 .lead :last-child {
     margin-bottom: 0;
 }
+@media screen and (max-width: 400px) {
+    .lead {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}
 .posItem {
     display: none;
     position: relative;
@@ -123,3 +129,11 @@
     width: 1rem;
     height: 1rem;
 }
+.tile.card {
+    --btcpay-card-cap-bg: transparent;
+    --btcpay-card-border-width: 0;
+    --btcpay-card-spacer-x: 0;
+    --btcpay-card-cap-padding-x: 0;
+    --btcpay-card-cap-padding-y: 0;
+    height: 100%;
+}