Add MakeAWish page

make_a_wish/blocks.py

@@ -39,4 +39,22 @@ class TourDateBlock(StructBlock):
         label="Detaily",
         required=True,
         help_text="Např. 13:00 - 17:00 Parkoviště před Olympií"
-    )
+    )
\ No newline at end of file
+
+    class Meta:
+        icon = "heart"
+        label = "Datum tour"
+
+
+class StatBlock(StructBlock):
+    count = CharBlock(
+        label="Číslo"
+    )
+
+    description = CharBlock(
+        label="Popis"
+    )
+
+    class Meta:
+        icon = "heart"
+        label = "Statistika"
\ No newline at end of file

make_a_wish/migrations/0002_alter_makeawishroot_main_text.py

+# Generated by Django 5.0.7 on 2025-03-18 16:34
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('make_a_wish', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='makeawishroot',
+            name='main_text',
+            field=models.TextField(verbose_name='Hlavní text'),
+        ),
+    ]

make_a_wish/migrations/0003_makeawishroot_stats.py

+# Generated by Django 5.0.7 on 2025-03-18 16:52
+
+import wagtail.fields
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('make_a_wish', '0002_alter_makeawishroot_main_text'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='makeawishroot',
+            name='stats',
+            field=wagtail.fields.StreamField([('stat', 2)], block_lookup={0: ('wagtail.blocks.CharBlock', (), {'label': 'Číslo'}), 1: ('wagtail.blocks.CharBlock', (), {'label': 'Popis'}), 2: ('wagtail.blocks.StructBlock', [[('count', 0), ('description', 1)]], {})}, default=[], verbose_name='Statistiky'),
+            preserve_default=False,
+        ),
+    ]

make_a_wish/models.py

 from django.db import models
 
 from wagtail.models import Page
-from wagtail.fields import RichTextField, StreamField
-from shared.const import RICH_TEXT_DEFAULT_FEATURES
-from .blocks import CommonWishBlock, TourDateBlock
+from wagtail.fields import StreamField
+
 from shared.models import (
     ExtendedMetadataHomePageMixin,
 )
 from wagtailmetadata.models import MetadataPageMixin
 from wagtail.admin.panels import FieldPanel
 
+from .blocks import (
+    CommonWishBlock,
+    TourDateBlock,
+    StatBlock,
+)
+
 
 class MakeAWishRoot(
     Page, ExtendedMetadataHomePageMixin, MetadataPageMixin
 ):
-    main_text = RichTextField(verbose_name="Hlavní text", features=RICH_TEXT_DEFAULT_FEATURES)
+    main_text = models.TextField(verbose_name="Hlavní text")
 
     new_wish_image = models.ForeignKey(
         "wagtailimages.Image",
@@ -43,12 +48,20 @@ class MakeAWishRoot(
         verbose_name="Tour termíny"
     )
 
+    stats = StreamField(
+        [
+            ("stat", StatBlock())
+        ],
+        verbose_name="Statistiky"
+    )
+
     content_panels = Page.content_panels + [
         FieldPanel("main_text"),
         FieldPanel("new_wish_image"),
         FieldPanel("video_url"),
         FieldPanel("common_wishes"),
         FieldPanel("tour_dates"),
+        FieldPanel("stats"),
     ]
 
     class Meta:

make_a_wish/templates/make_a_wish/header/wish_header.html

+{% extends 'styleguide2/includes/organisms/header/simple_header.html' %}
+{% load wagtailcore_tags wagtailimages_tags %}
+
+{% block wrapper_sizing_classes %}pb-0{% endblock %}
+
+{% block content_container %}
+    <div class="w-full">
+        <div class="container--wide flex justify-between items-end w-full">
+            <div class="text-white flex flex-col">
+                <h1
+                    class="mb-1 head-14xl xl:pb-14 xl:block hidden"
+                >
+                    {{ title }}
+                </h1>
+            </div>
+
+            <div class="xl:block xl:w-auto w-full flex justify-center items-center">
+                {% image new_wish_image original class="pb-4 xl:mr-32 xl:w-[300px] w-[200px]" %}
+            </div>
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file

make_a_wish/templates/make_a_wish/make_a_wish_root.html

+{% extends "styleguide2/base.html" %}
+{% load wagtailcore_tags wagtailimages_tags %}
+
+{% block content %}
+    {% include 'styleguide2/includes/organisms/layout/navbar.html' %}
+    {% include 'make_a_wish/header/wish_header.html' with title=page.title new_wish_image=page.new_wish_image %}
+
+    <main role="main">
+        <div class="container--wide grid grid-cols-1 xl:grid-cols-2 gap-8">
+            <div>
+                <div class="prose prose-black text-2xl xl:text-3xl mb-8">
+                    {{ page.main_text }}
+                </div>
+    
+                <div class="bg-grey-175 border-grey-200 border-2">
+                    <div class="flex gap-0 xl:flex-row flex-col">
+                        {% image page.new_wish_image original class="h-32 xl:flex-1" style="height:6rem" %}
+                        
+                        <div
+                            class="
+                                font-alt text-3xl xl:border-l-2 border-grey-200 xl:w-48 justify-center items-center flex
+                                hover:bg-grey-200 duration-100 cursor-pointer
+                                h-24
+                            "
+                            id="open_wish"
+                        >
+                            + Přidat přání
+                        </div>
+                    </div>
+    
+                    <div class="hidden duration-150" id="make_a_wish">
+                        <form class="border-t-2 border-grey-200 p-8">
+                            <input
+                                type="text"
+                                class="bg-white font-alt p-3 text-3xl border-2 border-grey-200 w-full"
+                                placeholder="Přeju si, aby..."
+                            >
+    
+                            <div class="flex xl:gap-6 gap-4 justify-center mt-4 xl:flex-row flex-col">
+                                <input
+                                    type="text"
+                                    class="bg-white font-alt p-3 text-3xl border-2 border-grey-200 flex-1"
+                                    placeholder="Jméno & příjmení"
+                                >
+    
+                                <input
+                                    type="email"
+                                    class="bg-white font-alt p-3 text-3xl border-2 border-grey-200 flex-1"
+                                    placeholder="E-mail"
+                                >
+                            </div>
+                            
+                            <div class="mt-4">
+                                <input
+                                    type="submit"
+                                    class="bg-black duration-150 font-alt text-4xl p-3 hover:bg-grey-600 text-white w-full cursor-pointer"
+                                    value="Odeslat přání"
+                                >
+                            </div>
+                        </form>
+                    </div>
+                </div>
+    
+                <div class="xl:mb-16 hidden" id="separator"></div>
+            </div>
+    
+            <div class="flex xl:justify-end xl:absolute xl:ml-[920px] xl:mt-[-8px] xl:mb-0 mb-8">
+                <video
+                    width="720"
+                    height="1280"
+                    class="w-96 mr-16"
+                    autoplay controls muted
+                >
+                    <source src="{{ page.video_url }}" type="video/mp4">
+                </video>
+            </div>
+        </div>
+    
+        <div class="bg-black">
+            <div class="container--wide text-white pb-16 pt-24 xl:pr-[71px]">
+                <div class="grid grid-cols-1 xl:grid-cols-3">
+                    <div class="xl:col-span-2 xl:pr-32">
+                        <h2 class="head-14xl xl:text-8xl">Co trápí čechy a češky</h2>
+                        <div class="text-7xl xl:text-center">▼</div>
+                    </div>
+                </div>
+    
+                <div class="mt-16 p-12 bg-grey-50">
+                    <ul class="flex flex-col xl:gap-6 gap-12">
+                        {% for wish in page.common_wishes %}
+                            <li>
+                                <div class="flex xl:gap-8 gap-6 items-center xl:flex-row flex-col">
+                                    {% image wish.value.image original class="rounded-full h-32 w-32" %}
+
+                                    <div class="text-black">
+                                        <h4 class="font-alt text-5xl mb-3">{{ wish.value.title }}</h4>
+                                        <p class="text-2xl xl:mb-0">{{ wish.value.description }}</p>
+                                    </div>
+                                </div>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+    
+                <div class="mt-12 xl:p-12 p-6 bg-grey-50 text-black">
+                    <h3 class="head-4xl text-5xl px-6 pt-6">Máte přání tour</h3>
+    
+                    <ul class="flex flex-col gap-4 mt-8">
+                        {% for tour_date in page.tour_dates %}
+                            <li class="py-4">
+                                <div class="font-alt text-4xl">
+                                    {{ tour_date.value.date }}
+                                </div>
+                                <div class="text-2xl">
+                                    {{ tour_date.value.details }}
+                                </div>
+                            </li>
+    
+                            {% if not forloop.last %}
+                                <div class="mx-24 border-t-2 border-grey-200"></div>
+                            {% endif %}
+                        {% endfor %}
+                    </ul>
+                </div>
+    
+                <h3 class="mt-12 xl:head-6xl head-9xl text-white">Naše data</h3>
+    
+                <div class="mt-4 p-6 bg-grey-50 text-black flex gap-8 xl:gap-16 justify-between xl:flex-row flex-col">
+                    {% for stat_info in page.stats %}
+                        <div class="flex gap-4 items-center">
+                            <div class="text-6xl font-alt">{{ stat_info.value.count }}</div>
+                            <div class="text-3xl font-alt">
+                                {{ stat_info.value.description }}
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </main>
+    
+    <script>
+        document.getElementById("open_wish").onclick = ((e) => {
+            const makeAWish = document.getElementById("make_a_wish");
+            const separator = document.getElementById("separator");
+    
+            if (makeAWish.classList.contains("hidden")) {
+                makeAWish.classList.remove("hidden");
+                separator.classList.remove("hidden");
+    
+                e.currentTarget.innerHTML = "← Zrušit"
+            } else {
+                makeAWish.classList.add("hidden");
+                separator.classList.add("hidden");
+    
+                e.currentTarget.innerHTML = "+ Přidat přání"
+            }
+        });
+    </script>
+{% endblock %}

shared/static/styleguide2/pirati-ui.svg

@@ -127,4 +127,4 @@
 <glyph unicode="&#xe976;" glyph-name="price-tags" horiz-adv-x="1280" d="M1232 960h-384c-26.4 0-63.274-15.274-81.942-33.942l-476.116-476.116c-18.668-18.668-18.668-49.214 0-67.882l412.118-412.118c18.668-18.668 49.214-18.668 67.882 0l476.118 476.118c18.666 18.666 33.94 55.54 33.94 81.94v384c0 26.4-21.6 48-48 48zM992 576c-53.020 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96zM128 416l544 544h-80c-26.4 0-63.274-15.274-81.942-33.942l-476.116-476.116c-18.668-18.668-18.668-49.214 0-67.882l412.118-412.118c18.668-18.668 49.214-18.668 67.882 0l30.058 30.058-416 416z" />
 <glyph unicode="&#xe977;" glyph-name="twitter" horiz-adv-x="1001" d="M596.009 526.629l372.819 433.371h-88.346l-323.718-376.29-258.553 376.29h-298.21l390.983-569.018-390.983-454.457h88.351l341.855 397.375 273.051-397.375h298.21l-405.458 590.103zM475 385.969l-354.815 507.521h135.702l624.636-893.48h-135.702l-269.821 385.959z" />
 <glyph unicode="&#xe99b;" glyph-name="stats-dots" d="M128 64h896v-128h-1024v1024h128zM288 128c-53.020 0-96 42.98-96 96s42.98 96 96 96c2.828 0 5.622-0.148 8.388-0.386l103.192 171.986c-9.84 15.070-15.58 33.062-15.58 52.402 0 53.020 42.98 96 96 96s96-42.98 96-96c0-19.342-5.74-37.332-15.58-52.402l103.192-171.986c2.766 0.238 5.56 0.386 8.388 0.386 2.136 0 4.248-0.094 6.35-0.23l170.356 298.122c-10.536 15.408-16.706 34.036-16.706 54.11 0 53.020 42.98 96 96 96s96-42.98 96-96c0-53.020-42.98-96-96-96-2.14 0-4.248 0.094-6.35 0.232l-170.356-298.124c10.536-15.406 16.706-34.036 16.706-54.11 0-53.020-42.98-96-96-96s-96 42.98-96 96c0 19.34 5.74 37.332 15.578 52.402l-103.19 171.984c-2.766-0.238-5.56-0.386-8.388-0.386s-5.622 0.146-8.388 0.386l-103.192-171.986c9.84-15.068 15.58-33.060 15.58-52.4 0-53.020-42.98-96-96-96z" />
-</font></defs></svg>
+</font></defs></svg>
\ No newline at end of file

shared/templates/styleguide2/includes/organisms/header/simple_header.html

@@ -22,7 +22,7 @@
       {% block classes %}
         flex items-center w-full pt-28 pb-8
 
-        xl:pt-48 xl:pb-24
+        {% block wrapper_sizing_classes %}xl:pt-48 xl:pb-24{% endblock %}
 
         {% block extra_classes %}{% endblock %}
 
@@ -45,59 +45,61 @@
     {% endif %}
   >
     <div class="flex justify-start w-full">
-      <div class="container--wide w-full">
-        {% block content %}
-          <div class="text-white flex flex-col">
-            {% block before_heading %}{% endblock %}
-
-            {% block heading %}
-              <h1
-                class="
-                  {% block heading_classes %}
-                    mb-1
-
-                    {% if is_short %}head-short{% endif %}
-
-                    {% if description %}
-                      {% if title|length <= 100 %}head-10xl{% else %}head-7xl{% endif %}
-                    {% else %}
-                      head-14xl
-                    {% endif %}
-                  {% endblock %}
-                "
-              >
-                {{ title }}
-              </h1>
-            {% endblock %}
-
-            {% block after_heading %}
-              {% if sub_heading %}
-                <h2
-                  class="head-6xl"
-                >{{ sub_heading }}</h2>
-              {% endif %}
-            {% endblock %}
-
-            {% block description %}
-              {% if description %}
-                <p
+      {% block content_container %}
+        <div class="container--wide w-full">
+          {% block content %}
+            <div class="text-white flex flex-col">
+              {% block before_heading %}{% endblock %}
+
+              {% block heading %}
+                <h1
                   class="
-                    text-lg leading-7 pr-4 whitespace-pre-line
+                    {% block heading_classes %}
+                      mb-1
 
-                    xl:pr-0
+                      {% if is_short %}head-short{% endif %}
 
-                    lg:max-w-screen-lg
-
-                    {% block description_classes %}{% endblock %}
+                      {% if description %}
+                        {% if title|length <= 100 %}head-10xl{% else %}head-7xl{% endif %}
+                      {% else %}
+                        head-14xl
+                      {% endif %}
+                    {% endblock %}
                   "
-                >{{ description }}</p>
-              {% endif %}
-            {% endblock %}
-
-            {% block after_description %}{% endblock %}
-          </div>
-        {% endblock %}
-      </div>
+                >
+                  {{ title }}
+                </h1>
+              {% endblock %}
+
+              {% block after_heading %}
+                {% if sub_heading %}
+                  <h2
+                    class="head-6xl"
+                  >{{ sub_heading }}</h2>
+                {% endif %}
+              {% endblock %}
+
+              {% block description %}
+                {% if description %}
+                  <p
+                    class="
+                      text-lg leading-7 pr-4 whitespace-pre-line
+
+                      xl:pr-0
+
+                      lg:max-w-screen-lg
+
+                      {% block description_classes %}{% endblock %}
+                    "
+                  >{{ description }}</p>
+                {% endif %}
+              {% endblock %}
+
+              {% block after_description %}{% endblock %}
+            </div>
+          {% endblock %}
+        </div>
+      {% endblock %}
     </div>
   </div>