mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-03-10 09:19:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

POS: Increase size of quantity buttons (#5877)

Browse source 
Closes #5873.
This commit is contained in:
d11n 2024-03-28 01:01:56 +01:00 • committed by GitHub
parent 529075f64c
commit 14f8c73b08
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 40 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
View file

@ -163,13 +163,13 @@
<span class="badge text-bg-warning inventory" v-if="item.inventory">
{{ item.inventory > 0 ? `${item.inventory} left` : "Sold out" }}
</span>
<div class="d-flex align-items-center gap-2">
<button type="button" v-on:click="updateQuantity(item.id, -1)" class="btn btn-light p-1 rounded-pill d-flex align-items-center justify-content-center">
<vc:icon symbol="minus" />
<div class="d-flex align-items-center gap-2 quantities">
<button type="button" v-on:click="updateQuantity(item.id, -1)" class="btn btn-minus">
<span><vc:icon symbol="minus" /></span>
</button>
<input class="form-control hide-number-spin w-50px" type="number" placeholder="Qty" min="1" step="1" :max="item.inventory" v-model.number="item.count">
<button type="button" v-on:click="updateQuantity(item.id, +1)" class="btn btn-light p-1 rounded-pill d-flex align-items-center justify-content-center">
<vc:icon symbol="plus" />
<input class="form-control hide-number-spin w-50px text-center" type="number" placeholder="Qty" min="1" step="1" :max="item.inventory" v-model.number="item.count">
<button type="button" v-on:click="updateQuantity(item.id, +1)" class="btn btn-plus">
<span><vc:icon symbol="plus" /></span>
</button>
</div>
</div>

14
BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml
View file

@ -115,7 +115,7 @@
<div class="d-flex align-items-start w-100 gap-3">
@if (!string.IsNullOrWhiteSpace(item.Image))
{
<div class="img">
<div class="img d-none d-sm-block">
<img src="@item.Image" alt="@item.Title" asp-append-version="true" />
</div>
}
@ -138,13 +138,13 @@
}
</div>
</div>
<div class="d-flex align-items-center gap-2 ms-auto" v-if="inStock(@index)">
<button type="button" v-on:click="updateQuantity(`@Safe.Raw(item.Id)`, -1, true)" class="btn btn-light p-1 rounded-pill d-flex align-items-center justify-content-center btn-minus" :disabled="getQuantity(`@Safe.Raw(item.Id)`) <= 0">
<vc:icon symbol="minus" />
<div class="d-flex align-items-center gap-2 ms-auto quantities">
<button type="button" v-on:click="updateQuantity(`@Safe.Raw(item.Id)`, -1, true)" class="btn btn-minus" :disabled="getQuantity(`@Safe.Raw(item.Id)`) <= 0">
<span><vc:icon symbol="minus" /></span>
</button>
<div class="quantity text-center fs-6" style="width:2rem">{{ getQuantity(`@Safe.Raw(item.Id)`) }}</div>
<button type="button" v-on:click="updateQuantity(`@Safe.Raw(item.Id)`, +1, true)" class="btn btn-light p-1 rounded-pill d-flex align-items-center justify-content-center btn-plus">
<vc:icon symbol="plus" />
<div class="quantity text-center fs-5" style="width:2rem">{{ getQuantity(`@Safe.Raw(item.Id)`) }}</div>
<button type="button" v-on:click="updateQuantity(`@Safe.Raw(item.Id)`, +1, true)" class="btn btn-plus" :disabled="!inStock(@index)">
<span><vc:icon symbol="plus" /></span>
</button>
</div>
</div>

8
BTCPayServer/wwwroot/pos/cart.css
View file

@ -100,14 +100,6 @@ header .cart-toggle-btn {
background-color: var(--btcpay-bg-tile);
}
#cart .quantity .btn {
width: 2rem;
height: 2rem;
}
#cart .quantity .btn .icon{
--btn-icon-size: .75rem;
}
#CartBadge {
position: absolute;
top: 0;

27
BTCPayServer/wwwroot/pos/common.css
View file

@ -96,3 +96,30 @@
max-height: 210px;
object-fit: scale-down;
}
.quantities .btn {
--btcpay-btn-disabled-opacity: .3;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
background: none;
border: transparent;
padding: 0;
}
.quantities .btn span {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--btcpay-light);
}
.quantities .btn:hover span {
background: var(--btcpay-light-bg-hover);
}
.quantities .icon {
width: 1rem;
height: 1rem;
}