Merge branch 'next-2.x' into 'main'

fix: code input design

See merge request !16

bin/frontend/controls/CouponCodeInput.css

-div + .quiqqer-coupons-field {
-    margin-left: 20px;
-}
-
 .quiqqer-coupons-couponcodeinput {
-    background: rgba(0, 0, 0, 0.05);
-    display: flex;
-    padding: 5px;
+    container-type: inline-size;
 }
 
-.quiqqer-coupons-couponcodeinput-input {
-    min-width: 220px;
+:where(.quiqqer-coupons-couponcodeinput label) {
+    display: block;
+    margin-bottom: 0.25em;
 }
 
-.quiqqer-coupons-couponcodeinput-title,
-.quiqqer-coupons-couponcodeinput-input {
-    margin-right: 1rem;
+.quiqqer-coupons-couponcodeinput__inputGroup {
+    display: inline-grid;
+    grid-template-columns: 1fr auto;
+    gap: 1rem;
 }
 
-.quiqqer-coupons-couponcodeinput input {
-    line-height: 36px;
-    margin-right: 1rem;
+.quiqqer-coupons-couponcodeinput-input {
+    min-width: min(250px, 100cqi);
 }
 
 .quiqqer-coupons-remove {
     margin-left: 1rem;
 }
 
-.quiqqer-coupons-remove .fa {
-    margin-right: 0;
-}
-
 /**
  * Simple Checkout
  */
-
 .quiqqer-coupons-field-simpleCheckout {
-    margin-top: 20px;
-    margin-left: 0 !important;
+    margin-top: 1rem;
 }
 
 .quiqqer-coupons-field-simpleCheckout .quiqqer-coupons-couponcodeinput {
     background: var(--_sectionBgColor);
-    display: flex;
     padding: var(--_sectionPadding);
 }
 
-.quiqqer-coupons-field-simpleCheckout .quiqqer-coupons-couponcodeinput label {
-    flex-grow: 1;
+.quiqqer-coupons-field-simpleCheckout .quiqqer-coupons-couponcodeinput__inputGroup {
+    width: 100%;
+}
+
+/*****************************/
+/* media / container queries */
+/*****************************/
+@media screen and (max-width: 767px) {
+    .quiqqer-coupons-couponcodeinput__inputGroup {
+        width: 100%;
+    }
 }
 
-.quiqqer-coupons-field-simpleCheckout .quiqqer-coupons-couponcodeinput-input {
-    width: calc(100% - 1rem);
+@container (max-inline-size: 400px) {
+    .quiqqer-coupons-couponcodeinput__inputGroup {
+        grid-template-columns: 1fr;
+    }
 }
\ No newline at end of file

bin/frontend/controls/CouponCodeInput.html

 <div class="quiqqer-coupons-couponcodeinput">
-    <label>
+    <label for="code-input">
         <span class="quiqqer-coupons-couponcodeinput-title">{{labelInput}}</span>
-        <input class="quiqqer-coupons-couponcodeinput-input" type="text" name="code"
-               placeholder="{{labelInputPlaceholder}}"/>
     </label>
-    <button class="quiqqer-coupons-couponcodeinput-btn btn btn-success">
-        <span>{{submitBtnText}}</span>
-    </button>
+    <div class="quiqqer-coupons-couponcodeinput__inputGroup">
+        <input class="quiqqer-coupons-couponcodeinput-input"
+               type="text" name="code-input" id="code-input" data-name="code-input"
+               placeholder="{{labelInputPlaceholder}}"
+        />
+        <button class="quiqqer-coupons-couponcodeinput-btn btn btn-success" data-name="submit-coupon-code">
+            {{submitBtnText}}
+        </button>
+    </div>
 </div>
\ No newline at end of file

bin/frontend/controls/CouponCodeInput.js

@@ -67,7 +67,7 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
 
             this.Loader.inject(this.$Elm);
 
-            this.$Input = this.$Elm.getElement('input[name="code"]');
+            this.$Input = this.$Elm.getElement('input[data-name="code-input"]');
 
             this.$Input.addEvent('keyup', function(event) {
                 if (event.code === 13) {
@@ -75,9 +75,7 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
                 }
             });
 
-            this.$Elm.getElement(
-                'button.quiqqer-coupons-couponcodeinput-btn'
-            ).addEvent('click', function(event) {
+            this.$Elm.getElement('[data-name="submit-coupon-code"]').addEvent('click', function(event) {
                 event.stop();
                 self.$submit();
             });