From 7d7bb6889b72f8319a8c366ded9c2231a6b18f63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexa=20Valentov=C3=A1?= <git@imaniti.org>
Date: Wed, 18 Sep 2024 19:07:45 +0200
Subject: [PATCH] flip cards with icons
---
.../molecules/boxes/flip_card_box.html | 18 +++++++++++++++++-
.../molecules/boxes/flip_card_box.yaml | 1 +
.../organisms/cards/flip_card_list.html | 2 +-
.../organisms/cards/flip_card_list.yaml | 2 +-
4 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html
index 0bae577..9299fc0 100644
--- a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html
@@ -27,9 +27,25 @@
"
>{{ title }}</h1>
+ {% if icon_url %}
+ {{ icon_url }}
+ <img
+ class="
+ absolute w-32 h-32 bottom-8 right-8
+ "
+ src="{{ icon_url }}"
+ >
+ {% endif %}
+
<div
class="
- absolute bottom-4 right-4 block text-white opacity-75 text-right leading-5 font-condensed
+ {% if image_url %}
+ right-4 bottom-4 text-right
+ {% elif icon_url %}
+ bottom-8 left-8 text-left
+ {% endif %}
+
+ absolute block text-white opacity-75 leading-5 font-condensed
md:hidden
"
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml
index 942a18c..59052d6 100644
--- a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml
@@ -3,6 +3,7 @@ context:
Staň se členkou
nebo členem
image_url: '../../../../../static/images/onboarding/member.png'
+ icon_url: ''
content: |-
<h2>
Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
diff --git a/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html b/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html
index 162341f..0b877a6 100644
--- a/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html
+++ b/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html
@@ -1,5 +1,5 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-4">
{% for card in cards %}
- {% include 'patterns/molecules/boxes/flip_card_box.html' with title=card.title image_url=card.image_url content=card.content button_text=card.button_text %}
+ {% include 'patterns/molecules/boxes/flip_card_box.html' with title=card.title image_url=card.image_url icon_url=card.icon_url content=card.content button_text=card.button_text %}
{% endfor %}
</div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml b/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml
index 6884696..4081a39 100644
--- a/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml
+++ b/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml
@@ -4,7 +4,7 @@ context:
title: |-
Staň se členkou
nebo členem
- image_url: '../../../../../static/images/onboarding/member.webp'
+ icon_url: '../../../../../static/images/onboarding/member.webp'
content: |-
<h2>
Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!
--
GitLab