Skip to content
Snippets Groups Projects
Commit cb04b5b1 authored by Alexa Valentová's avatar Alexa Valentová
Browse files

add card background image

parent f088edc0
No related branches found
No related tags found
2 merge requests!1143Release,!1142Fix templates, add card background image
Pipeline #19867 passed
Showing
with 390 additions and 18 deletions
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
from wagtail.blocks import CharBlock, RichTextBlock, StructBlock, TextBlock, URLBlock
from wagtail.images.blocks import ImageChooserBlock
from django.forms.utils import ErrorList
from django.utils.safestring import mark_safe
from wagtail.blocks.struct_block import StructBlockValidationError
from .mixins import CTAMixin
......@@ -40,20 +41,35 @@ class PersonContactBlockMixin(StructBlock):
class FlipCardBlock(StructBlock):
bg_color = CharBlock(label="Barva pozadí", default="FEC900")
bg_color = CharBlock(
label="Barva pozadí",
default="FEC900",
help_text=mark_safe(
"Kód barvy lze vytvořit např. <a href='https://mdn.github.io/css-examples/tools/color-picker/'"
" target='_blank'>zde</a>."
)
)
image = ImageChooserBlock(
label="Obrázek",
help_text="Nahrazuje ikonu. Nelze vybrat obě najednou.",
help_text="Nahrazuje pozadí. Nelze vybrat obě najednou.",
required=False
)
icon = ImageChooserBlock(
label="Ikona",
background = ImageChooserBlock(
label="Pozadí",
help_text="Nahrazuje obrázek. Nelze vybrat obě najednou.",
required=False
)
title = TextBlock(label="Nadpis", help_text="Řádkování je manuální.")
title_color = CharBlock(
label="Barva textu",
default="000000",
help_text=mark_safe(
"Kód barvy lze vytvořit např. <a href='https://mdn.github.io/css-examples/tools/color-picker/'"
" target='_blank'>zde</a>."
)
)
content = RichTextBlock(label="Obsah")
......@@ -67,12 +83,12 @@ class FlipCardBlock(StructBlock):
def clean(self, value):
errors = {}
if value["image"] and value["icon"]:
if value["image"] and value["background"]:
errors["image"] = ErrorList(
["Obrázek nemůže být vybrán současně s ikonou."]
["Obrázek nemůže být vybrán současně s pozadím."]
)
errors["icon"] = ErrorList(
["Ikona nemůže být vybrána současně s obrázkem."]
errors["background"] = ErrorList(
["Pozadí nemůže být vybráno současně s obrázkem."]
)
if errors:
......
......@@ -2,14 +2,26 @@
<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 self.background %}
style="
{% image self.background fill-1024x1024 as background_image %}
background-image: url('{{ background_image.url }}')
"
{% endif %}
>
{% image self.image max-1000x1000 as resized_image %}
<div
class="relative h-[33rem] rounded-3xl overflow-hidden bg-cover"
style="
{% if not self.background %}
background-color: #{{ self.bg_color }};
{% endif %}
{% if self.image %}
{% image self.image max-1000x1000 as resized_image %}
......@@ -17,6 +29,7 @@
{% endif %}
"
>
{% if not self.background %}
<div
class="
absolute top-0 left-0
......@@ -26,9 +39,14 @@
"
style="border-top-color: #{{ self.bg_color }}"
></div>
{% endif %}
<h1
class="font-alt text-5xl whitespace-pre-line absolute top-10 left-10"
{% if self.title_color %}
style="color: #{{ self.title_color }}"
{% endif %}
>{{ self.title }}</h1>
<div
......
This diff is collapsed.
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment