From 66423a1ec3876fb6568722a3571c0e08086016d6 Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Tue, 5 Jan 2021 14:37:14 +1100
Subject: [PATCH] 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.
---
 .../shop_variant_no_group_buy.html.haml         |  1 +
 .../stylesheets/darkswarm/_shop-inputs.scss     | 17 +++++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml b/app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml
index 0d6563bc2a..fb04e916eb 100644
--- a/app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml
+++ b/app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml
@@ -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
     ＋
diff --git a/app/assets/stylesheets/darkswarm/_shop-inputs.scss b/app/assets/stylesheets/darkswarm/_shop-inputs.scss
index 9c840a912a..5b797a6bdb 100644
--- a/app/assets/stylesheets/darkswarm/_shop-inputs.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-inputs.scss
@@ -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 {