diff --git a/core/static/core/accordion.scss b/core/static/core/accordion.scss index 28a7f75b..23bb2fa6 100644 --- a/core/static/core/accordion.scss +++ b/core/static/core/accordion.scss @@ -46,6 +46,10 @@ details.accordion>.accordion-content { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; overflow: hidden; + + @media screen and (max-width: 600px) { + padding: .75em 1.5em; + } } @mixin animation($selector) { diff --git a/counter/static/bundled/counter/components/counter-product-select-index.ts b/counter/static/bundled/counter/components/counter-product-select-index.ts index ec1d2773..d4e96a81 100644 --- a/counter/static/bundled/counter/components/counter-product-select-index.ts +++ b/counter/static/bundled/counter/components/counter-product-select-index.ts @@ -1,6 +1,6 @@ -import type { RecursivePartial, TomSettings } from "tom-select/dist/types/types"; -import { AutoCompleteSelectBase } from "#core:core/components/ajax-select-base.ts"; -import { registerComponent } from "#core:utils/web-components.ts"; +import type { RecursivePartial, TomSettings } from "tom-select/src/types"; +import { AutoCompleteSelectBase } from "#core:core/components/ajax-select-base"; +import { registerComponent } from "#core:utils/web-components"; const productParsingRegex = /^(\d+x)?(.*)/i; const codeParsingRegex = / \((\w+)\)$/; @@ -63,13 +63,6 @@ export class CounterProductSelect extends AutoCompleteSelectBase { ); }, ); - - this.widget.hook("after", "onOptionSelect", () => { - /* Focus the next element if it's an input */ - if (this.nextElementSibling.nodeName === "INPUT") { - (this.nextElementSibling as HTMLInputElement).focus(); - } - }); } protected tomSelectSettings(): RecursivePartial { /* We disable the dropdown on focus because we're going to always autofocus the widget */ @@ -80,9 +73,7 @@ export class CounterProductSelect extends AutoCompleteSelectBase { // We need to manually set weights or it results on an inconsistent // behavior between production and development environment searchField: [ - // @ts-expect-error documentation says it's fine, specified type is wrong { field: "code", weight: 2 }, - // @ts-expect-error documentation says it's fine, specified type is wrong { field: "text", weight: 0.5 }, ], }; diff --git a/counter/static/bundled/counter/counter-click-index.ts b/counter/static/bundled/counter/counter-click-index.ts index c8cea6a3..7228f067 100644 --- a/counter/static/bundled/counter/counter-click-index.ts +++ b/counter/static/bundled/counter/counter-click-index.ts @@ -25,6 +25,9 @@ document.addEventListener("alpine:init", () => { } this.codeField = this.$refs.codeField; + this.codeField.widget.hook("after", "onOptionSelect", () => { + this.handleCode(); + }); this.codeField.widget.focus(); // It's quite tricky to manually apply attributes to the management part @@ -154,6 +157,7 @@ document.addEventListener("alpine:init", () => { this.addToBasket(code, quantity); } this.codeField.widget.clear(); + this.codeField.widget.setTextboxValue(""); this.codeField.widget.focus(); }, })); diff --git a/counter/static/counter/css/counter-click.scss b/counter/static/counter/css/counter-click.scss index 6288f902..00f882bf 100644 --- a/counter/static/counter/css/counter-click.scss +++ b/counter/static/counter/css/counter-click.scss @@ -42,7 +42,28 @@ min-width: 350px; ul { - list-style-type: none; + list-style: none; + display: flex; + flex-direction: column; + gap: .5rem; + margin-left: 0; + + .basket-row { + display: flex; + align-items: center; + gap: 1rem; + + .product-name { + flex: 1 2 0; + min-width: 0; + text-wrap: wrap; + } + } + } + + form { + margin-top: .5rem; + margin-bottom: .5rem; } } diff --git a/counter/templates/counter/counter_click.jinja b/counter/templates/counter/counter_click.jinja index 44220599..e93b1110 100644 --- a/counter/templates/counter/counter_click.jinja +++ b/counter/templates/counter/counter_click.jinja @@ -56,10 +56,15 @@
{% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %} -
+ - + @@ -68,13 +73,11 @@ {%- for category, prices in categories.items() -%} {%- for price in prices -%} - + {%- endfor -%} {%- endfor -%} - - {% for error in form.non_form_errors() %} @@ -102,7 +105,9 @@ {{ form.management_form }}