From dda43fcb5e7e23e13ef2398938d09a7b105aaf85 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Wed, 7 Dec 2022 09:47:02 +0100
Subject: [PATCH] amount selection completed
---
pass/public/styles/base.less | 40 +++++++++++++++++++-----------------
pass/public/styles/key.less | 33 ++++++++++++++++++++++++++---
pass/views/key.ejs | 30 +++++++++++++++++++++++++--
3 files changed, 79 insertions(+), 24 deletions(-)
diff --git a/pass/public/styles/base.less b/pass/public/styles/base.less
index 028481b..13ba96d 100644
--- a/pass/public/styles/base.less
+++ b/pass/public/styles/base.less
@@ -43,6 +43,7 @@ html {
margin: 0;
padding: 0;
min-width: @body-scroll-break-point;
+ color: @font-color-on-white;
}
}
@@ -77,7 +78,8 @@ button {
}
&.success img {
- filter: brightness(0) invert(74%) sepia(42%) saturate(2242%) hue-rotate(65deg) brightness(102%) contrast(104%);
+ filter: brightness(0) invert(74%) sepia(42%) saturate(2242%)
+ hue-rotate(65deg) brightness(102%) contrast(104%);
}
img {
@@ -114,7 +116,7 @@ nav {
position: relative;
align-items: center;
gap: 0 2rem;
- padding: .5rem 1rem;
+ padding: 0.5rem 1rem;
#page-logo a {
display: flex;
@@ -123,17 +125,17 @@ nav {
text-decoration: none;
color: inherit;
- >img {
+ > img {
width: 1.7rem;
filter: brightness(0) invert(1);
}
}
- >input#nav-opener {
+ > input#nav-opener {
display: none;
}
- >label[for="nav-opener"] {
+ > label[for="nav-opener"] {
display: none;
}
@@ -151,7 +153,7 @@ nav {
flex-grow: 1;
}
- >a {
+ > a {
text-decoration: none;
color: inherit;
white-space: nowrap;
@@ -170,31 +172,31 @@ nav {
}
@media (max-width: @logo-break-point) {
- >ul {
+ > ul {
max-height: 0;
visibility: hidden;
transition: max-height 0.5s, padding 0.5s;
justify-content: space-around;
- >li.whitespace {
+ > li.whitespace {
display: none;
}
}
- >input#nav-opener {
+ > input#nav-opener {
display: block;
visibility: hidden;
flex-grow: 1;
&:checked {
- +label {
+ + label {
border-width: 0;
transition: border-width 0ms 0ms;
- >svg {
+ > svg {
fill: red;
- >.line {
+ > .line {
transition: y 300ms ease-in 0ms, rotate 300ms ease-in 300ms,
opacity 0ms 300ms, fill 300ms ease-in 300ms;
@@ -217,7 +219,7 @@ nav {
}
}
- ~ul {
+ ~ ul {
max-height: 500px;
padding: 1rem 0;
visibility: visible;
@@ -225,7 +227,7 @@ nav {
}
}
- >label[for="nav-opener"] {
+ > label[for="nav-opener"] {
--navbar-opener-color: white;
display: flex;
align-items: center;
@@ -234,10 +236,10 @@ nav {
cursor: pointer;
transition: border-width 0ms 600ms;
- >svg {
+ > svg {
fill: var(--navbar-opener-color);
- >.line {
+ > .line {
transition: rotate 300ms ease-in 0ms, opacity 0ms 300ms,
y 300ms ease-in 300ms, fill 300ms ease-in 300ms;
rotate: 0deg;
@@ -248,12 +250,12 @@ nav {
}
@media (max-width: @nav-items-break-point) {
- >ul {
+ > ul {
flex-direction: column;
width: 100%;
gap: 1rem;
- >li {
+ > li {
text-align: center;
&.whitespace {
@@ -262,4 +264,4 @@ nav {
}
}
}
-}
\ No newline at end of file
+}
diff --git a/pass/public/styles/key.less b/pass/public/styles/key.less
index c4e821c..6bff593 100644
--- a/pass/public/styles/key.less
+++ b/pass/public/styles/key.less
@@ -1,5 +1,7 @@
+@import "./misc/vars.less";
+
@max-width: 980px;
-@key-breakpoint-1: 675px;
+@key-breakpoint-1: 770px;
@key-breakpoint-2: 430px;
main {
@@ -68,7 +70,6 @@ main {
grid-area: amount;
max-width: 200px;
justify-self: center;
- align-self: center;
display: flex;
flex-direction: column;
align-items: center;
@@ -93,13 +94,25 @@ main {
}
> #checkout {
+ > h2 {
+ margin: 0 0 1rem;
+ text-align: center;
+ border-bottom: 1px solid @color-main;
+ }
#checkout-amount {
+ @checkout-amount-breakpoint-1: 800px;
+ @checkout-amount-breakpoint-2: 470px;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 1rem;
+ justify-items: center;
+ align-items: center;
> a {
text-decoration: none;
color: inherit;
display: grid;
width: max-content;
- grid-template-columns: 7em 3em;
+ grid-template-columns: 7em 3.5em;
grid-template-rows: 2.5em 2em;
height: max-content;
> .checkout-amount {
@@ -144,6 +157,16 @@ main {
align-self: center;
}
}
+ @media (max-width: @checkout-amount-breakpoint-1) {
+ grid-template-columns: 1fr 1fr;
+ }
+ @media (max-width: @checkout-amount-breakpoint-2) {
+ grid-template-columns: 1fr;
+ > a {
+ width: 100%;
+ grid-template-columns: 1fr 3em;
+ }
+ }
}
}
}
@@ -168,6 +191,10 @@ main {
margin-bottom: 0;
}
+ > #amount {
+ align-self: center;
+ }
+
> #charge {
> #store {
display: flex;
diff --git a/pass/views/key.ejs b/pass/views/key.ejs
index ef7e2d9..f5daf02 100644
--- a/pass/views/key.ejs
+++ b/pass/views/key.ejs
@@ -39,7 +39,7 @@
</div>
<% }else { %>
<div id="checkout">
- <h1>Aufladen</h1>
+ <h2>Suchanfragen auffüllen</h2>
<div id="charge-steps">
<div id="charge-steps-amount"></div>
</div>
@@ -48,9 +48,35 @@
<a href="/key/<%= key.key %>/300">
<span class="checkout-amount">300</span>
<span class="checkout-cost">5€</span>
- <span class="checkout-duration">~1 Monat</span>
+ <span class="checkout-duration">~1 Monat*</span>
+ </a>
+ <a href="/key/<%= key.key %>/600">
+ <span class="checkout-amount">600</span>
+ <span class="checkout-cost">10€</span>
+ <span class="checkout-duration">~2 Monate*</span>
+ </a>
+ <a href="/key/<%= key.key %>/900">
+ <span class="checkout-amount">900</span>
+ <span class="checkout-cost">15€</span>
+ <span class="checkout-duration">~3 Monate*</span>
+ </a>
+ <a href="/key/<%= key.key %>/1200">
+ <span class="checkout-amount">1200</span>
+ <span class="checkout-cost">20€</span>
+ <span class="checkout-duration">~4 Monate*</span>
+ </a>
+ <a href="/key/<%= key.key %>/1800">
+ <span class="checkout-amount">1800</span>
+ <span class="checkout-cost">30€</span>
+ <span class="checkout-duration">~6 Monate*</span>
+ </a>
+ <a href="/key/<%= key.key %>/3600">
+ <span class="checkout-amount">3600</span>
+ <span class="checkout-cost">60€</span>
+ <span class="checkout-duration">~1 Jahr*</span>
</a>
</div>
+ <p>* Die angegebenen Zeiträume sind Schätzungen, die auf unseren Erfahrungswerten basieren und sollen einen Anhaltspunkt geben, wie viele Suchanfragen benötigt werden.</p>
<% } %>
</div>
<% } %>
--
GitLab