From 64ed5e26544753dc57e74d3e1dc2a6f55a487708 Mon Sep 17 00:00:00 2001
From: Michael Danielczok <michael@pcsg.de>
Date: Wed, 12 Feb 2025 13:44:56 +0100
Subject: [PATCH] fix: code input design
Related: quiqqer/coupons#17
---
bin/frontend/controls/CouponCodeInput.css | 53 +++++++++++-----------
bin/frontend/controls/CouponCodeInput.html | 16 ++++---
bin/frontend/controls/CouponCodeInput.js | 6 +--
3 files changed, 38 insertions(+), 37 deletions(-)
diff --git a/bin/frontend/controls/CouponCodeInput.css b/bin/frontend/controls/CouponCodeInput.css
index cf95da7..cde8605 100644
--- a/bin/frontend/controls/CouponCodeInput.css
+++ b/bin/frontend/controls/CouponCodeInput.css
@@ -1,54 +1,53 @@
-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
diff --git a/bin/frontend/controls/CouponCodeInput.html b/bin/frontend/controls/CouponCodeInput.html
index e43048a..ccc1a19 100644
--- a/bin/frontend/controls/CouponCodeInput.html
+++ b/bin/frontend/controls/CouponCodeInput.html
@@ -1,10 +1,14 @@
<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
diff --git a/bin/frontend/controls/CouponCodeInput.js b/bin/frontend/controls/CouponCodeInput.js
index d24f612..3cb20e5 100644
--- a/bin/frontend/controls/CouponCodeInput.js
+++ b/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();
});
--
GitLab