more extensible cards

main/blocks.py

@@ -321,7 +321,9 @@ class TeamBlock(StructBlock):
 
 
 class FlipCardBlock(StructBlock):
-    image = ImageChooserBlock(label="Obrázek")
+    bg_color = CharBlock(label="Barva pozadí", default="FEC900")
+
+    image = ImageChooserBlock(label="Obrázek", required=False)
 
     title = TextBlock(label="Nadpis", help_text="Řádkování je manuální.")
 

main/migrations/0077_alter_mainresultspage_content.py

+# Generated by Django 4.1.13 on 2024-02-22 09:31
+
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("main", "0076_alter_mainresultspage_content"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="mainresultspage",
+            name="content",
+            field=wagtail.fields.StreamField(
+                [
+                    (
+                        "flip_cards",
+                        wagtail.blocks.StructBlock(
+                            [
+                                (
+                                    "cards",
+                                    wagtail.blocks.ListBlock(
+                                        wagtail.blocks.StructBlock(
+                                            [
+                                                (
+                                                    "bg_color",
+                                                    wagtail.blocks.CharBlock(
+                                                        default="FEC900",
+                                                        label="Barva pozadí",
+                                                    ),
+                                                ),
+                                                (
+                                                    "image",
+                                                    wagtail.images.blocks.ImageChooserBlock(
+                                                        label="Obrázek", required=False
+                                                    ),
+                                                ),
+                                                (
+                                                    "title",
+                                                    wagtail.blocks.TextBlock(
+                                                        help_text="Řádkování je manuální.",
+                                                        label="Nadpis",
+                                                    ),
+                                                ),
+                                                (
+                                                    "content",
+                                                    wagtail.blocks.RichTextBlock(
+                                                        label="Obsah"
+                                                    ),
+                                                ),
+                                                (
+                                                    "button_text",
+                                                    wagtail.blocks.CharBlock(
+                                                        help_text="Pokud není vyplněn, tlačítko se neukáže.",
+                                                        label="Nadpis tlačítka",
+                                                        required=False,
+                                                    ),
+                                                ),
+                                                (
+                                                    "button_url",
+                                                    wagtail.blocks.CharBlock(
+                                                        label="Odkaz tlačítka",
+                                                        required=False,
+                                                    ),
+                                                ),
+                                            ],
+                                            label="Karta",
+                                        ),
+                                        label="Karty",
+                                    ),
+                                )
+                            ]
+                        ),
+                    ),
+                    (
+                        "text",
+                        wagtail.blocks.RichTextBlock(
+                            template="styleguide2/includes/atoms/text/prose_richtext.html"
+                        ),
+                    ),
+                ],
+                blank=True,
+                use_json_field=True,
+                verbose_name="Obsah",
+            ),
+        ),
+    ]

shared/templates/styleguide2/includes/molecules/boxes/flip_card_box.html

@@ -6,25 +6,47 @@
       {% image self.image max-1000x1000 as resized_image %}
 
       <div
-        class="relative h-[33rem] bg-black rounded-3xl overflow-hidden bg-cover"
-        style="background-image:url('{{ resized_image.url }}')"
+        class="relative h-[33rem] rounded-3xl overflow-hidden bg-cover"
+
+        style="
+          background-color: #{{ self.bg_color }};
+
+          {% if self.image %}
+            {% image self.image max-1000x1000 as resized_image %}
+            background-image:url('{{ resized_image.url }}')
+          {% endif %}
+        "
       >
         <div
           class="
             absolute top-0 left-0
 
             border border-r-[27rem] border-r-[transparent]
-            border-l-0 border-t-[33rem] border-t-pirati-yellow
+            border-l-0 border-t-[33rem]
           "
+          style="border-top-color: #{{ self.bg_color }}"
         ></div>
 
         <h1
           class="font-alt text-5xl whitespace-pre-line absolute top-10 left-10"
         >{{ self.title }}</h1>
+
+        <div
+          class="
+            absolute bottom-4 right-4 block text-white opacity-75 text-right leading-5 font-condensed
+
+            md:hidden
+          "
+        >
+          Pro zobrazení detailů
+          <br>
+          se dotkni karty.
+        </div>
       </div>
     </div>
     <div
-      class="flip-card-back bg-pirati-yellow rounded-3xl p-10"
+      class="flip-card-back rounded-3xl p-10"
+      style="background-color: #{{ self.bg_color }}"
     >
       <div class="prose prose-black">
         {{ self.content|richtext }}

shared/templates/styleguide2/includes/organisms/layout/navbar.html

@@ -252,6 +252,17 @@
 
 {% block observer_script %}
   <script>
+    const navbar = document.querySelector("#navbar")
+
+    const transparentClass = "{% block observer_script_toggled_class %}navbar--transparent{% endblock %}"
+    let initiallyHadTransparentClass = false
+
+    if (navbar.classList.contains(transparentClass)) {
+      initiallyHadTransparentClass = true
+    }
+
+    console.log(initiallyHadTransparentClass)
+
     window.onscroll = () => {
       const screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
 
@@ -259,11 +270,10 @@
         return
       }
 
-      const navbar = document.querySelector("#navbar")
-      const transparentClass = "{% block observer_script_toggled_class %}{% if is_transparent %}navbar--transparent{% endif %}{% endblock %}"
-
       if (window.scrollY === 0) {
-        navbar.classList.add(transparentClass)
+        if (initiallyHadTransparentClass) {
+          navbar.classList.add(transparentClass)
+        }
       } else {
         navbar.classList.remove(transparentClass)
       }