aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2025-12-29 20:04:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

POS: Improve padding on mobile and unify card look with tiles (#6088)

Browse Source 
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.
This commit is contained in:
d11n
2024-07-10 17:12:58 +02:00
committed by GitHub
parent a4a1fa0746
commit bc6d037341
6 changed files with 36 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
View File

@@ -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">

4
BTCPayServer/Views/Shared/PointOfSale/Public/Print.cshtml
View File

@@ -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">

6
BTCPayServer/Views/Shared/PointOfSale/Public/Static.cshtml
View File

@@ -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">

2
BTCPayServer/wwwroot/main/site.css
View File

@@ -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);
}
}

18
BTCPayServer/wwwroot/pos/cart.css
View File

@@ -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 {

14
BTCPayServer/wwwroot/pos/common.css
View File

@@ -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%;
}