benkyd/legolog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better

Browse Source 
Former-commit-id: 13b1e0f5f992d0dc6650b24b273dd8a510c061b7
This commit is contained in:
Ben
2022-04-14 19:34:12 +01:00
parent 0ae747f6ad
commit cdd78d8acf
2 changed files with 68 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
client/public/components/css/product-listing.css
View File

@@ -111,13 +111,44 @@
margin-block-end: 0.83em;
}
.product-quantity {
font-size: 1.5em;
.product-quantity-selector {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 1em;
}
.product-quantity-button {
cursor: pointer;
font-size: 1.7em;
border: #1A1A1A solid 1px;
background-color: #F5F6F6;
border-radius: 0.2em;
width: 1.5em;
height: 1.5em;
}
/* https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.quantity-input {
width: 5em;
height: 2.2em;
width: 3.7em;
background-color: #F5F6F6;
border-top: #1A1A1A solid 1px;
border-bottom: #1A1A1A solid 1px;
border-right: none;
border-left: none;
text-align: center;
font-size: 1.2em;
}
.product-add-to-basket {

40
client/public/components/product-listing.mjs
View File

@@ -50,9 +50,10 @@ class ProductListing extends Component {
<div class="product-description">{this.state.description}</div>
<div class="product-quantity-selector">
<button class="product-quantity-button" type="button">-</button>
<input class="quantity-input" type="number" value="1" min="1" max="{this.state.quantity}">
<button class="product-quantity-button" type="button">+</button>
<button class="product-quantity-button reduce-quantity" type="button">-</button>
<input class="quantity-input" type="number" value="1" min="1" max="{this.state.stock}">
<button class="product-quantity-button increase-quantity" type="button">+</button>
<span class="product-quantity">&nbsp;{this.state.stock} in stock</span>
</div>
<div class="product-add-to-basket">
@@ -105,6 +106,34 @@ class ProductListing extends Component {
});
// TODO: add event listeners for quantity buttons
const quantityInput = this.root.querySelector('.quantity-input');
const increaseQuantityButton = this.root.querySelector('.increase-quantity');
const reduceQuantityButton = this.root.querySelector('.reduce-quantity');
quantityInput.value = 1;
quantityInput.addEventListener('change', () => {
if (typeof quantityInput.value !== 'number') {
quantityInput.value = 1;
}
if (quantityInput.value > this.state.stock) {
quantityInput.value = this.state.stock;
}
});
increaseQuantityButton.addEventListener('click', () => {
const quantity = parseInt(quantityInput.value);
if (quantity < this.state.stock) {
quantityInput.value = quantity + 1;
}
});
reduceQuantityButton.addEventListener('click', () => {
const quantity = parseInt(quantityInput.value);
if (quantity > 1) {
quantityInput.value = quantity - 1;
}
});
// product details, collapsable
const collapseButton = this.root.querySelector('.product-details-header');
@@ -118,11 +147,10 @@ class ProductListing extends Component {
// add quantity to basket and then update the basket count
const addToBasket = this.root.querySelector('.add-to-basket-button');
const basketCount = this.root.querySelector('.quantity-input');
addToBasket.addEventListener('click', () => {
AddProductToBasket(this.state.id, Math.abs(parseInt(basketCount.value)));
basketCount.value = 1;
AddProductToBasket(this.state.id, Math.abs(parseInt(quantityInput.value)));
quantityInput.value = 1;
});
}
}