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 9299fc028fe7656dddb5bee891c7808fa008b267..c59961d8ffad099a157912d873a4580bf471828b 100644 --- a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html +++ b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html @@ -1,49 +1,50 @@ <div class="flip-card" tabindex="0"> <div class="flip-card-inner"> - <div class="flip-card-front"> + <div + class="flip-card-front rounded-3xl bg-cover" + + {% if background_url %} + style=" + background-image: url('{{ background_url }}') + " + {% endif %} + > <div class="relative h-[33rem] rounded-3xl overflow-hidden bg-cover" style=" - background-color: {{ bg_color }}; + {% if not background_url %} + background-color: {{ bg_color }}; + {% endif %} {% if image_url %} background-image: url('{{ image_url }}') {% endif %} " > - <div - class=" - absolute top-0 left-0 + {% if not background_url %} + <div + class=" + absolute top-0 left-0 - border border-r-[27rem] border-r-[transparent] - border-l-0 border-t-[33rem] - " - style="border-top-color: {{ bg_color }}" - ></div> + border border-r-[27rem] border-r-[transparent] + border-l-0 border-t-[33rem] + " + style="border-top-color: {{ bg_color }}" + ></div> + {% endif %} <h1 class=" font-alt text-5xl whitespace-pre-line absolute top-10 left-10 max-w-[60%] " + {% if title_color %} + style="color: {{ title_color }}" + {% endif %} >{{ title }}</h1> - {% if icon_url %} - {{ icon_url }} - <img - class=" - absolute w-32 h-32 bottom-8 right-8 - " - src="{{ icon_url }}" - > - {% endif %} - <div class=" - {% if image_url %} - right-4 bottom-4 text-right - {% elif icon_url %} - bottom-8 left-8 text-left - {% endif %} + bottom-8 left-8 text-left absolute block text-white opacity-75 leading-5 font-condensed 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 59052d6572ec5d25eaec5e965ff2fdfe6ec056e0..b06861549642e7315fd2fbb06c05ab8dcdc77c73 100644 --- a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml +++ b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml @@ -3,7 +3,8 @@ context: Staň se členkou nebo členem image_url: '../../../../../static/images/onboarding/member.png' - icon_url: '' + title_color: '' + background_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 0b877a6c98568e4e0d938453897a7b7f0b745a03..e8f85fe80dcd381bdf0415b80e0dbfe9f5423b43 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 icon_url=card.icon_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 background_url=card.background_url title_color=card.title_color 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 4081a3936f74b253f921896e95b5861181938dda..1d5c3aa337ebb41a52863728027c9d8de16e7419 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,8 @@ context: title: |- Staň se členkou nebo členem - icon_url: '../../../../../static/images/onboarding/member.webp' + title_color: 'red' + background_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!