From fbe0f421e3eef997ed79a0d8d8443bf84ae205b3 Mon Sep 17 00:00:00 2001 From: Radek Czajka Date: Thu, 11 May 2023 16:49:27 +0200 Subject: [PATCH 1/1] Checkout style --- src/club/models.py | 26 +++-- .../club/2022/donation_step1_form.html | 25 +++-- .../static/2022/styles/layout/_checkout.scss | 100 ++++++++++++------ 3 files changed, 93 insertions(+), 58 deletions(-) diff --git a/src/club/models.py b/src/club/models.py index 8338b554b..98b4ee00e 100644 --- a/src/club/models.py +++ b/src/club/models.py @@ -44,21 +44,27 @@ class Club(models.Model): for tag, amounts in ('single', single), ('monthly', monthly): wide_spot = narrow_spot = 0 for i, p in enumerate(amounts): - if p.description or p.wide: - if not p.description: - p.narrow_wide = True - if narrow_spot == 1: - amounts[i-1].narrow_wide = True - narrow_spot = 0 if p.wide: - if wide_spot == 2: - p.wide_not_wide = True - wide_spot += 1 - else: + # Do we have space for xl? + if wide_spot < 2: + p.box_variant = 'xl' wide_spot += 2 + else: + p.box_variant = 'card' + wide_spot += 1 + narrow_spot = 0 + elif p.description: + p.box_variant = 'card' + if narrow_spot: + amounts[i-1].box_variant = 'bar' + wide_spot += 1 + narrow_spot = 0 else: + p.box_variant = 'half' wide_spot += 1 + narrow_spot += 1 wide_spot %= 3 + narrow_spot %= 2 c[tag] = amounts c[f'{tag}_wide_spot'] = wide_spot return c diff --git a/src/club/templates/club/2022/donation_step1_form.html b/src/club/templates/club/2022/donation_step1_form.html index 2f9886959..cfdd5d387 100644 --- a/src/club/templates/club/2022/donation_step1_form.html +++ b/src/club/templates/club/2022/donation_step1_form.html @@ -20,18 +20,15 @@ {% with amounts=club.get_amounts %}
{% for amount in amounts.single %} -
-
-

{{ amount.amount }} zł

-
- -
-
- {% if amount.description %} -
+
+ +

{{ amount.amount }} zł

+
+ {% if amount.description %}

{{ amount.description|safe }}

-
- {% endif %} + {% endif %} + +
{% endfor %} {% for amount in amounts.monthly %} -
+

{{ amount.amount }} zł /mies.

-

{{ amount.description|safe }}

+ {% if amount.description %} +

{{ amount.description|safe }}

+ {% endif %}
diff --git a/src/wolnelektury/static/2022/styles/layout/_checkout.scss b/src/wolnelektury/static/2022/styles/layout/_checkout.scss index b4423dda4..779324ae6 100644 --- a/src/wolnelektury/static/2022/styles/layout/_checkout.scss +++ b/src/wolnelektury/static/2022/styles/layout/_checkout.scss @@ -275,13 +275,8 @@ transition: box-shadow $ease-out 250ms; box-shadow: 0px 0px 0px rgba(55, 170, 156, 0); margin-bottom: 30px; - width: calc(50% - 8px); + width: 100%; - &.narrow-wide { - flex-direction: row; - width: 100%; - } - @include rwd($break-flow) { width: calc(33.333% - 20px); } @@ -357,13 +352,9 @@ &.is-active { box-shadow: 0px 0px 20px rgba(55, 170, 156, 0.35); - background: #083F4D; - color: white; + background: white; + color: black; - @include rwd($break-flow) { - background: white; - color: black; - } h3 { color: white; background: #083F4D; @@ -377,23 +368,77 @@ } } + &.l-checkout__payments__box--half { + width: calc(50% - 8px); + @include rwd($break-flow) { + width: calc(33.333% - 20px); + } + + &.is-active { + background: #083F4D; + color: white; + + @include rwd($break-flow) { + background: white; + color: black; + } + } + } + &.l-checkout__payments__box--bar { + flex-direction: row; + + @include rwd($break-flow) { + flex-direction: column; + } + + &.is-active { + background: #083F4D; + color: white; + + @include rwd($break-flow) { + background: white; + color: black; + } + } + + h3, .l-checkout__payments__box__btn-wrp { + flex-grow: 1; + } + } + &.l-checkout__payments__box--card { + } + &.l-checkout__payments__box--xl { width: 100%; + justify-content: center; + min-height: 160px; + @include rwd($break-flow) { width: calc(67.4% - 20px); - width: calc(67.4% - 20px); - flex-direction: row; - & > div { - display: flex; - &:first-child { - width: 50%; + padding-left: calc(33.7% - 10px); + position: relative; + + h3 { + position: absolute; + left: 0; + top: 0; + padding-right: 50%; + } + + .l-checkout__payments__box__btn-wrp { + margin: 0; + + p { flex-wrap: wrap; max-width: 340px; margin-right: 20px; } - &:last-child { - width: 49%; + button { + position: absolute; + bottom: 20px; + left: 20px; + width: calc(50% - 50px); align-items: center; justify-content: center; } @@ -915,18 +960,3 @@ } } } - - -.payments-recurring { - .l-checkout__payments__box { - width: 100%; - &.is-active { - background: white; - color: black; - } - @include rwd($break-flow) { - width: calc(33.333% - 20px); - //margin-right: 30px; - } - } -} -- 2.20.1