From 92a832540eeb863f42e4f10b4a353d5cc3358e93 Mon Sep 17 00:00:00 2001 From: Marino Linderhof Date: Wed, 19 May 2021 10:03:57 +0200 Subject: [PATCH 1/2] marino/fix-button-to-borwser-general-error small error and min height --- example-1/script.js | 19 ++++++++++--------- example-1/styles.css | 11 ++++++++++- example-2/script.js | 19 ++++++++++--------- example-2/styles.css | 13 ++++++++++--- example-3/script.js | 20 +++++++++++--------- example-3/styles.css | 11 +++++++++-- example-4/index.html | 3 ++- example-4/script.js | 3 +++ example-4/styles.css | 9 +++++++++ example-5/script.js | 3 +++ example-5/styles.css | 26 ++++++++++++++++++++++++++ 11 files changed, 103 insertions(+), 34 deletions(-) diff --git a/example-1/script.js b/example-1/script.js index e8ef1fe..451252c 100644 --- a/example-1/script.js +++ b/example-1/script.js @@ -1,21 +1,21 @@ /** * Initialize Mollie Components instance */ - var mollie = Mollie( +var mollie = Mollie( "pfl_HgMrHhRAFm", // You can find your Profile ID in the Dashboard (https://www.mollie.com/dashboard/developers/api-keys) { locale: "en_US", // Optional. If not provided, we will determine the users' language by looking at the document and/or userAgent. - testmode: false // Set to true to enable test mode. + testmode: false, // Set to true to enable test mode. } ); var options = { styles: { base: { - color: 'rgba(0, 0, 0, 0.8)', - } - } -} + color: "rgba(0, 0, 0, 0.8)", + }, + }, +}; /** * Get elements @@ -78,9 +78,7 @@ expiryDate.addEventListener("change", function (event) { var verificationCode = mollie.createComponent("verificationCode", options); verificationCode.mount("#verification-code"); -var verificationCodeError = document.getElementById( - "verification-code-error" -); +var verificationCodeError = document.getElementById("verification-code-error"); verificationCode.addEventListener("change", function (event) { if (event.error && event.touched) { @@ -120,9 +118,12 @@ form.addEventListener("submit", function (event) { var token = result.token; var error = result.error; + formError.classList.remove("has-error"); + if (error) { enableForm(); formError.textContent = error.message; + formError.classList.add("has-error"); return; } diff --git a/example-1/styles.css b/example-1/styles.css index b2fe9dc..59e1d64 100644 --- a/example-1/styles.css +++ b/example-1/styles.css @@ -24,7 +24,7 @@ label { opacity: 0.6; font-size: 18px; padding-bottom: 7px; - padding-top: 13px; + padding-top: 5px; font-weight: 500; display: block; } @@ -50,6 +50,14 @@ label { transition: 0.3s border-color cubic-bezier(0.4, 0, 0.2, 1); } +#form-error.has-error { + background-color: rgba(206, 0, 0, 0.1); + padding: 5px; + border: 1px solid #ff1717; + margin-top: 10px; + border-radius: 4px; +} + .field-error { font-size: 12px; margin-top: 2px; @@ -85,6 +93,7 @@ button.submit-button:hover { .form-group { width: 100%; + min-height: 100px; } .form-group--expiry-date { diff --git a/example-2/script.js b/example-2/script.js index e8ef1fe..451252c 100644 --- a/example-2/script.js +++ b/example-2/script.js @@ -1,21 +1,21 @@ /** * Initialize Mollie Components instance */ - var mollie = Mollie( +var mollie = Mollie( "pfl_HgMrHhRAFm", // You can find your Profile ID in the Dashboard (https://www.mollie.com/dashboard/developers/api-keys) { locale: "en_US", // Optional. If not provided, we will determine the users' language by looking at the document and/or userAgent. - testmode: false // Set to true to enable test mode. + testmode: false, // Set to true to enable test mode. } ); var options = { styles: { base: { - color: 'rgba(0, 0, 0, 0.8)', - } - } -} + color: "rgba(0, 0, 0, 0.8)", + }, + }, +}; /** * Get elements @@ -78,9 +78,7 @@ expiryDate.addEventListener("change", function (event) { var verificationCode = mollie.createComponent("verificationCode", options); verificationCode.mount("#verification-code"); -var verificationCodeError = document.getElementById( - "verification-code-error" -); +var verificationCodeError = document.getElementById("verification-code-error"); verificationCode.addEventListener("change", function (event) { if (event.error && event.touched) { @@ -120,9 +118,12 @@ form.addEventListener("submit", function (event) { var token = result.token; var error = result.error; + formError.classList.remove("has-error"); + if (error) { enableForm(); formError.textContent = error.message; + formError.classList.add("has-error"); return; } diff --git a/example-2/styles.css b/example-2/styles.css index 04f95b2..d6ff323 100644 --- a/example-2/styles.css +++ b/example-2/styles.css @@ -39,7 +39,7 @@ label { } .mollie-component.has-focus { - border-color: rgba(255,255,255,0.5); + border-color: rgba(255, 255, 255, 0.5); } .mollie-component.is-invalid { @@ -50,6 +50,13 @@ label { border-color: rgba(140, 252, 136, 0.5); } +#form-error.has-error { + background-color: rgba(206, 0, 0, 0.1); + padding: 5px; + border: 1px solid #ff5555; + margin-top: 10px; +} + .field-error { font-size: 12px; margin-top: 2px; @@ -69,7 +76,6 @@ button.submit-button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; outline: 0; - cursor: pointer; transition: 0.3s opacity cubic-bezier(0.4, 0, 0.2, 1); } @@ -84,7 +90,7 @@ button.submit-button:hover { .row { display: flex; width: 100%; - margin-bottom: 20px; + margin-bottom: 10px; } .row:last-child { @@ -103,6 +109,7 @@ button.submit-button:hover { width: 100%; margin: 0 8px; flex: 1 1 20%; + min-height: 85px; } .form-group--card-holder { diff --git a/example-3/script.js b/example-3/script.js index e8ef1fe..5975059 100644 --- a/example-3/script.js +++ b/example-3/script.js @@ -1,21 +1,21 @@ /** * Initialize Mollie Components instance */ - var mollie = Mollie( +var mollie = Mollie( "pfl_HgMrHhRAFm", // You can find your Profile ID in the Dashboard (https://www.mollie.com/dashboard/developers/api-keys) { locale: "en_US", // Optional. If not provided, we will determine the users' language by looking at the document and/or userAgent. - testmode: false // Set to true to enable test mode. + testmode: false, // Set to true to enable test mode. } ); var options = { styles: { base: { - color: 'rgba(0, 0, 0, 0.8)', - } - } -} + color: "rgba(0, 0, 0, 0.8)", + }, + }, +}; /** * Get elements @@ -78,9 +78,7 @@ expiryDate.addEventListener("change", function (event) { var verificationCode = mollie.createComponent("verificationCode", options); verificationCode.mount("#verification-code"); -var verificationCodeError = document.getElementById( - "verification-code-error" -); +var verificationCodeError = document.getElementById("verification-code-error"); verificationCode.addEventListener("change", function (event) { if (event.error && event.touched) { @@ -120,9 +118,13 @@ form.addEventListener("submit", function (event) { var token = result.token; var error = result.error; + formError.classList.remove("has-error"); + if (error) { enableForm(); formError.textContent = error.message; + formError.classList.add("has-error"); + return; } diff --git a/example-3/styles.css b/example-3/styles.css index bd3824e..e1b8423 100644 --- a/example-3/styles.css +++ b/example-3/styles.css @@ -52,6 +52,14 @@ label { border-color: #dfedfa; } +#form-error.has-error { + background-color: rgba(206, 0, 0, 0.1); + padding: 5px; + border: 1px solid #ff1717; + margin-top: 10px; + border-radius: 100px; +} + .field-error { font-size: 10px; margin-top: 4px; @@ -72,7 +80,6 @@ button.submit-button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; outline: 0; - cursor: pointer; transition: 0.3s opacity cubic-bezier(0.4, 0, 0.2, 1); } @@ -82,11 +89,11 @@ button.submit-button:hover { .form-group { width: 100%; - margin: 14px 0 0 0; flex: 1 1 20%; display: flex; width: 100%; align-items: center; + min-height: 70px; } .form-group.button { diff --git a/example-4/index.html b/example-4/index.html index 0d09f38..4f9ca0b 100644 --- a/example-4/index.html +++ b/example-4/index.html @@ -15,6 +15,8 @@
+ +
@@ -111,7 +113,6 @@ -
diff --git a/example-4/script.js b/example-4/script.js index 9f9a892..2440a69 100644 --- a/example-4/script.js +++ b/example-4/script.js @@ -132,9 +132,12 @@ form.addEventListener("submit", function (event) { var token = result.token; var error = result.error; + formError.classList.remove("has-error"); + if (error) { enableForm(); formError.textContent = error.message; + formError.classList.add("has-error"); return; } diff --git a/example-4/styles.css b/example-4/styles.css index 8218aff..d621474 100644 --- a/example-4/styles.css +++ b/example-4/styles.css @@ -102,6 +102,15 @@ input:focus ~ label, width: 100%; } +#form-error.has-error { + background-color: rgba(206, 0, 0, 0.1); + padding: 5px; + border: 1px solid #ce0000; + color: #ce0000; + font-size: 13px; + margin-bottom: 10px; +} + .form-group.is-touched.is-valid .field-error { padding: 0; } diff --git a/example-5/script.js b/example-5/script.js index df80171..799cf37 100644 --- a/example-5/script.js +++ b/example-5/script.js @@ -129,9 +129,12 @@ form.addEventListener("submit", function (event) { var token = result.token; var error = result.error; + formError.classList.remove("has-error"); + if (error) { enableForm(); formError.textContent = error.message; + formError.classList.add("has-error"); return; } diff --git a/example-5/styles.css b/example-5/styles.css index 212b02f..403fb00 100644 --- a/example-5/styles.css +++ b/example-5/styles.css @@ -97,6 +97,32 @@ body { border-radius: 0 0 8px 0; } +#form-error.has-error { + margin-top: 4px; + background-color: #f9e1e1; + padding: 5px; + color: #ff1717; + font-size: 13px; + margin-bottom: 10px; + position: absolute; + max-width: 75vw; + left: 50%; + transform: translateX(-50%); + border-radius: 8px; +} + +#form-error.has-error::before { + position: absolute; + top: -8px; + left: 8px; + content: ""; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #f9e1e1; +} + .form-group.is-touched.is-valid .field-error { padding: 0; } From ebf99cc27b4a590d7ac0f729b70155df45f13ab1 Mon Sep 17 00:00:00 2001 From: Marino Linderhof Date: Wed, 19 May 2021 11:31:04 +0200 Subject: [PATCH 2/2] marino/fix-button-to-borwser-general-error removed unused code --- example-1/styles.css | 20 ++++++++++---------- example-2/styles.css | 14 +++++--------- example-3/styles.css | 16 ++++++---------- example-4/styles.css | 8 ++++---- example-5/styles.css | 6 +++--- 5 files changed, 28 insertions(+), 36 deletions(-) diff --git a/example-1/styles.css b/example-1/styles.css index 59e1d64..1f37c3b 100644 --- a/example-1/styles.css +++ b/example-1/styles.css @@ -2,7 +2,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; - background: #e6f1ff; + background: #eef; } .wrapper { @@ -31,8 +31,8 @@ label { .mollie-component { background: #fff; - box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1), - 0px 4px 8px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1), + 0 4px 8px rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 13px; border: 1px solid transparent; @@ -41,7 +41,7 @@ label { } .mollie-component.has-focus { - border-color: #0077ff; + border-color: #07f; transition: 0.3s border-color cubic-bezier(0.4, 0, 0.2, 1); } @@ -53,7 +53,7 @@ label { #form-error.has-error { background-color: rgba(206, 0, 0, 0.1); padding: 5px; - border: 1px solid #ff1717; + border: 1px solid #f11; margin-top: 10px; border-radius: 4px; } @@ -61,19 +61,19 @@ label { .field-error { font-size: 12px; margin-top: 2px; - color: #ff1717; + color: #f11; font-weight: 400; } button.submit-button { width: 100%; border: 0; - background: #0077ff; - box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1), - 0px 4px 8px rgba(0, 0, 0, 0.05); + background: #07f; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1), + 0 4px 8px rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 14px; - color: #ffffff; + color: #fff; font-weight: 600; font-size: 18px; opacity: 0.9; diff --git a/example-2/styles.css b/example-2/styles.css index d6ff323..ac3a647 100644 --- a/example-2/styles.css +++ b/example-2/styles.css @@ -2,7 +2,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; - background: #000000; + background: #000; color: #fff; } @@ -13,10 +13,6 @@ body { max-width: 718px; } -input { - color: #fff; -} - .wrapper form { width: 100%; } @@ -25,7 +21,7 @@ label { opacity: 0.6; font-size: 16px; font-weight: 400; - color: #ffffff; + color: #fff; padding-bottom: 7px; display: block; } @@ -60,7 +56,7 @@ label { .field-error { font-size: 12px; margin-top: 2px; - color: #ff5555; + color: #f55; font-weight: 500; } @@ -68,7 +64,7 @@ button.submit-button { width: 100%; border: 0; border-radius: 0; - background: #fedd00; + background: #fd0; padding: 14px; color: #000; font-weight: 600; @@ -94,7 +90,7 @@ button.submit-button:hover { } .row:last-child { - margin-bottom: 0px; + margin-bottom: 0; } .form-group:first-child { diff --git a/example-3/styles.css b/example-3/styles.css index e1b8423..cd3cfb8 100644 --- a/example-3/styles.css +++ b/example-3/styles.css @@ -13,10 +13,6 @@ body { max-width: 718px; } -input { - color: #fff; -} - .wrapper form { width: 100%; } @@ -31,7 +27,7 @@ label { } .mollie-component { - background: #dfedfa; + background: #def; border-radius: 56px; padding: 12px 24px; border: 1px solid transparent; @@ -40,7 +36,7 @@ label { } .mollie-component.has-focus { - border-color: #8799af; + border-color: #89a; } .mollie-component.is-invalid { @@ -49,13 +45,13 @@ label { } .mollie-component.is-valid { - border-color: #dfedfa; + border-color: #def; } #form-error.has-error { background-color: rgba(206, 0, 0, 0.1); padding: 5px; - border: 1px solid #ff1717; + border: 1px solid #f11; margin-top: 10px; border-radius: 100px; } @@ -63,7 +59,7 @@ label { .field-error { font-size: 10px; margin-top: 4px; - color: #ce0000; + color: #c00; font-weight: normal; padding-left: 24px; } @@ -72,7 +68,7 @@ button.submit-button { width: 100%; border: 0; border-radius: 100px; - background: #173d68; + background: #036; padding: 18px; color: #fff; font-weight: 600; diff --git a/example-4/styles.css b/example-4/styles.css index d621474..0d159ba 100644 --- a/example-4/styles.css +++ b/example-4/styles.css @@ -95,7 +95,7 @@ input:focus ~ label, bottom: -1px; width: 0%; left: 0; - border-bottom: 1px solid #ce0000; + border-bottom: 1px solid #c00; } .mollie-component.is-invalid::after { @@ -105,8 +105,8 @@ input:focus ~ label, #form-error.has-error { background-color: rgba(206, 0, 0, 0.1); padding: 5px; - border: 1px solid #ce0000; - color: #ce0000; + border: 1px solid #c00; + color: #c00; font-size: 13px; margin-bottom: 10px; } @@ -116,7 +116,7 @@ input:focus ~ label, } .form-group.is-touched .field-error { - color: #ce0000; + color: #c00; font-weight: 400; padding: 1px 0; font-size: 10px; diff --git a/example-5/styles.css b/example-5/styles.css index 403fb00..c1ffb45 100644 --- a/example-5/styles.css +++ b/example-5/styles.css @@ -71,12 +71,12 @@ body { .mollie-component.is-invalid::before { opacity: 1; - background-color: #ff1717; + background-color: #f11; } .mollie-component.is-valid::before { opacity: 1; - background-color: #4ddd9e; + background-color: #5d9; } .mollie-component.is-dirty::before, @@ -141,7 +141,7 @@ button.submit-button { background: #4a3eee; border-radius: 8px; padding: 14px; - color: #ffffff; + color: #fff; font-weight: 600; font-size: 18px; opacity: 0.9;