mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-04-03 06:59:14 +00:00
Add quantity input to shop front product list
Adding bigger quantities can now be done via an input field instead of clicking a thousand times. The add-button has been widened to match the new space requirements.
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
%button.variant-quantity{type: "button", ng: {if: "variant.line_item.quantity", click: "add(-1)"}}>
|
||||
-# U+FF0D Fullwidth Hyphen-Minus
|
||||
-
|
||||
%input.variant-quantity{type: "number", min: "0", max: "{{ available() }}", ng: {model: "variant.line_item.quantity", if: "variant.line_item.quantity"}}>
|
||||
%button.variant-quantity{type: "button", ng: {if: "variant.line_item.quantity", click: "add(1)", disabled: "!canAdd(1)"}}
|
||||
-# U+FF0B Fullwidth Plus Sign
|
||||
+
|
||||
|
||||
@@ -48,7 +48,7 @@ button.add-variant, button.variant-quantity {
|
||||
}
|
||||
|
||||
button.add-variant {
|
||||
min-width: 6rem;
|
||||
min-width: 7rem;
|
||||
padding: 0 1em;
|
||||
|
||||
&[disabled] {
|
||||
@@ -59,7 +59,7 @@ button.add-variant {
|
||||
}
|
||||
|
||||
button.variant-quantity {
|
||||
width: 3rem;
|
||||
width: 2.25rem;
|
||||
|
||||
&:nth-of-type(1):not(.bulk-buy):not(.bulk-buy-add) {
|
||||
border-right: .1em solid $orange-400;
|
||||
@@ -71,7 +71,7 @@ button.variant-quantity {
|
||||
font-size: 0.875em;
|
||||
margin-top: 0.25em;
|
||||
text-align: center;
|
||||
width: 6rem;
|
||||
width: 7rem;
|
||||
visibility: hidden;
|
||||
|
||||
&.visible {
|
||||
@@ -83,23 +83,28 @@ button.bulk-buy.variant-quantity {
|
||||
background-color: transparent;
|
||||
border: .1em solid $grey-200;
|
||||
color: inherit;
|
||||
width: 3.5rem;
|
||||
}
|
||||
|
||||
button.bulk-buy-add.variant-quantity {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
input[type="number"].bulk-buy.variant-quantity {
|
||||
[type="number"].variant-quantity {
|
||||
border: .1em solid $grey-200;
|
||||
height: 2.5rem;
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
padding: .5em;
|
||||
width: 2.5rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: textfield;
|
||||
|
||||
&.bulk-buy {
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-bulk-buy-price-summary {
|
||||
|
||||
Reference in New Issue
Block a user