From df4da84750ba1e69a99e53f1a3cc57b1ad056761 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@hebeler.club>
Date: Thu, 27 Apr 2023 13:24:57 +0200
Subject: [PATCH] fixed styling for token packets
---
pass/lang/de/cost.json | 4 +--
pass/lang/de/key.json | 4 +--
pass/public/styles/key/checkout-amount.less | 32 +++++++++++---------
pass/public/styles/key/checkout-payment.less | 2 +-
pass/resources/js/checkout_paypal.js | 28 ++++++++++-------
pass/views/checkout/charge.ejs | 10 ++++--
6 files changed, 46 insertions(+), 34 deletions(-)
diff --git a/pass/lang/de/cost.json b/pass/lang/de/cost.json
index aae9d5c..4b03fbe 100644
--- a/pass/lang/de/cost.json
+++ b/pass/lang/de/cost.json
@@ -20,7 +20,7 @@
},
{
"heading": "Schlüssel wird automatisch im Browser eingerichtet und verwendet",
- "text": "Um Ihren MetaGer Schlüssel bei der Suche zu verwenden, brauchen Sie nichts weiter tun. Nach dem Auffüllen ist er automatisch in Ihrem Browser eingerichtet und Sie erhalten Informationen zur einfachen Einrichtung auf weiteren Geräten."
+ "text": "Um Ihren MetaGer Schlüssel bei der Suche zu verwenden, brauchen Sie nichts weiter tun. Nach dem Aufladen ist er automatisch in Ihrem Browser eingerichtet und Sie erhalten Informationen zur einfachen Einrichtung auf weiteren Geräten."
},
{
"heading": "Genauso anonym wie eine Suche ohne Schlüssel",
@@ -36,4 +36,4 @@
"anonymous": "Anonyme Zahlungsmethoden",
"more": "Weitere Zahlungsmethoden"
}
-}
+}
\ No newline at end of file
diff --git a/pass/lang/de/key.json b/pass/lang/de/key.json
index 4e19ade..125f5e1 100644
--- a/pass/lang/de/key.json
+++ b/pass/lang/de/key.json
@@ -10,7 +10,7 @@
},
"store": "In Datei sichern",
"tokens": "Token",
- "fill": "Auffüllen",
+ "fill": "Aufladen",
"orders": "Bestellungen",
"valid_until": "gültig bis",
"startpagelinks": {
@@ -23,4 +23,4 @@
"charge": "Schlüssel jetzt aufladen"
}
}
-}
+}
\ No newline at end of file
diff --git a/pass/public/styles/key/checkout-amount.less b/pass/public/styles/key/checkout-amount.less
index 0029bf8..2379983 100644
--- a/pass/public/styles/key/checkout-amount.less
+++ b/pass/public/styles/key/checkout-amount.less
@@ -12,34 +12,36 @@
> .checkout-amount {
text-decoration: none;
color: inherit;
- width: clamp(150px, calc(33% - 2rem), 300px);
@media (max-width: 350px) {
width: 100%;
}
display: grid;
- grid-template-columns: 1fr 3.5em;
+ grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr;
place-items: stretch;
border: 1px solid @color-main;
border-radius: 10px;
- > span {
+ > div {
display: grid;
place-content: center;
- &.checkout-amount {
+ place-items: center;
+ white-space: nowrap;
+ padding: 0 0.5rem;
+ > .checkout-amount {
font-size: 1.8rem;
font-weight: bold;
- padding: 0.25rem;
- }
- &.checkout-cost {
- grid-row: span 2;
- background-color: @color-main;
- border-top-right-radius: 10px;
- border-bottom-right-radius: 10px;
- border: 1px solid @color-main;
- color: white;
- padding: 1rem 0.5rem;
- font-size: 1.25rem;
}
}
+ > .checkout-cost {
+ grid-row: span 2;
+ background-color: @color-main;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+ border: 1px solid @color-main;
+ color: white;
+ font-size: 1.25rem;
+ display: grid;
+ place-content: center;
+ }
}
}
diff --git a/pass/public/styles/key/checkout-payment.less b/pass/public/styles/key/checkout-payment.less
index 7ebcf8a..7dfb086 100644
--- a/pass/public/styles/key/checkout-payment.less
+++ b/pass/public/styles/key/checkout-payment.less
@@ -117,7 +117,7 @@
&.input-group {
grid-column: span 3;
}
- &:not(.input-group) {
+ &:not(.input-group, .error) {
display: flex;
flex-direction: column;
gap: 0.5rem;
diff --git a/pass/resources/js/checkout_paypal.js b/pass/resources/js/checkout_paypal.js
index fecea2f..1241341 100644
--- a/pass/resources/js/checkout_paypal.js
+++ b/pass/resources/js/checkout_paypal.js
@@ -85,16 +85,7 @@ function get_paypal_checkout_data(funding_source) {
},
fundingSource: funding_source,
onClick: () => {
- let revocation_checkbox = document.getElementById("revocation");
- console.log(revocation_checkbox);
- if (!revocation_checkbox.checkValidity()) {
- if (!revocation_checkbox.reportValidity()) {
- document.querySelector("#revocation-container > div.revocation-required-error").style.display = "block";
- }
- return;
- } else {
- document.querySelector("#revocation-container > div.revocation-required-error").style.display = "none";
- }
+ validateRevocation();
},
createOrder: () => {
let checkout_paypal_create_order_url =
@@ -206,6 +197,9 @@ function loadCardPayment(checkout_data) {
.getElementById("loading_paypal_funding_source")
.classList.add("hidden");
document.getElementById("paypal-payment-card").classList.remove("hidden");
+ document.getElementById("revocation").addEventListener("invalid", e => {
+ document.querySelector("div.revocation-required-error").style.display = "block";
+ });
paypal.HostedFields.render({
styles: {
input: {
@@ -233,7 +227,7 @@ function loadCardPayment(checkout_data) {
.getElementById("paypal-card-form")
.addEventListener("submit", (e) => {
e.preventDefault();
-
+ document.querySelector("div.revocation-required-error").style.display = "none";
// Hide all errors
document
.querySelectorAll("#paypal-card-errors > p")
@@ -333,4 +327,16 @@ function loadCardPayment(checkout_data) {
});
}
+function validateRevocation() {
+ let revocation_checkbox = document.getElementById("revocation");
+ if (!revocation_checkbox.checkValidity()) {
+ if (!revocation_checkbox.reportValidity()) {
+ document.querySelector("div.revocation-required-error").style.display = "block";
+ }
+ return;
+ } else {
+ document.querySelector("div.revocation-required-error").style.display = "none";
+ }
+}
+
module.exports = initialize_paypal_payments;
diff --git a/pass/views/checkout/charge.ejs b/pass/views/checkout/charge.ejs
index 756c879..9c6ef90 100644
--- a/pass/views/checkout/charge.ejs
+++ b/pass/views/checkout/charge.ejs
@@ -2,9 +2,13 @@
<div id="summary">
<div class="checkout-amounts">
<a href="<%= change_url.amount %>" class="checkout-amount" title="Menge ändern">
- <span class="checkout-amount"><%= checkout.amount %></span>
- <span class="checkout-cost"><%= (checkout.amount * price.per_token).toFixed(0) %>€</span>
- <span class="checkout-duration"><%= req.t("charge.includes-vat", {ns: "checkout"}) _%></span>
+ <div>
+ <span class="checkout-amount"><%= checkout.amount %></span>
+ <span class="checkout-vat"><%= req.t("charge.includes-vat", {ns: "checkout"}) _%></span>
+ </div>
+ <span class="checkout-cost">
+ <%= (checkout.amount * price.per_token).toFixed(0) %>€
+ </span>
</a>
</div>
--
GitLab