From e507013c479fe8c35342be6dda4637b541ce5ad4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <git@imaniti.org>
Date: Sun, 21 Jan 2024 20:50:11 +0100
Subject: [PATCH] update mobile europarl carousel
---
elections/blocks.py | 3 +
...electionsarticlepage_show_initial_image.py | 13 +-
.../0020_alter_electionshomepage_content.py | 228 ++++++++++++++++++
...0072_mainarticlepage_show_initial_image.py | 13 +-
.../molecules/menus/elections/carousel.html | 53 +++-
5 files changed, 287 insertions(+), 23 deletions(-)
create mode 100644 elections/migrations/0020_alter_electionshomepage_content.py
diff --git a/elections/blocks.py b/elections/blocks.py
index 77e7976e..d6b08f35 100644
--- a/elections/blocks.py
+++ b/elections/blocks.py
@@ -23,6 +23,9 @@ class ElectionsCarouselBlock(StructBlock):
required=False,
)
+ mobile_line_1 = TextBlock(label="První mobilní řádek")
+ mobile_line_2 = TextBlock(label="Druhý mobilní řádek")
+
class Meta:
template = "styleguide2/includes/molecules/menus/elections/carousel.html"
icon = "form"
diff --git a/elections/migrations/0019_electionsarticlepage_show_initial_image.py b/elections/migrations/0019_electionsarticlepage_show_initial_image.py
index a6684aec..c33a30f2 100644
--- a/elections/migrations/0019_electionsarticlepage_show_initial_image.py
+++ b/elections/migrations/0019_electionsarticlepage_show_initial_image.py
@@ -4,15 +4,18 @@ from django.db import migrations, models
class Migration(migrations.Migration):
-
dependencies = [
- ('elections', '0018_alter_electionshomepage_content'),
+ ("elections", "0018_alter_electionshomepage_content"),
]
operations = [
migrations.AddField(
- model_name='electionsarticlepage',
- name='show_initial_image',
- field=models.BooleanField(default=True, help_text='Pokud je tato volba zaškrtnutá, obrázek nastavený u tohoto článku se automaticky vloží do prvního odstavce.', verbose_name='Ukázat obrázek v textu'),
+ model_name="electionsarticlepage",
+ name="show_initial_image",
+ field=models.BooleanField(
+ default=True,
+ help_text="Pokud je tato volba zaškrtnutá, obrázek nastavený u tohoto článku se automaticky vloží do prvního odstavce.",
+ verbose_name="Ukázat obrázek v textu",
+ ),
),
]
diff --git a/elections/migrations/0020_alter_electionshomepage_content.py b/elections/migrations/0020_alter_electionshomepage_content.py
new file mode 100644
index 00000000..b2eb4018
--- /dev/null
+++ b/elections/migrations/0020_alter_electionshomepage_content.py
@@ -0,0 +1,228 @@
+# Generated by Django 4.1.10 on 2024-01-21 19:46
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+ dependencies = [
+ ("elections", "0019_electionsarticlepage_show_initial_image"),
+ ]
+
+ operations = [
+ migrations.AlterField(
+ model_name="electionshomepage",
+ name="content",
+ field=wagtail.fields.StreamField(
+ [
+ (
+ "carousel",
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "image",
+ wagtail.images.blocks.ImageChooserBlock(
+ help_text="Pokud není vybráno video, ukáže se na mobilu i desktopu.",
+ label="Obrázek na pozadí",
+ ),
+ ),
+ (
+ "video_url",
+ wagtail.blocks.URLBlock(
+ help_text="Pokud je vybráno, ukáže se na desktopech s povoleným autoplayem místo obrázku.",
+ label="URL videa",
+ required=False,
+ ),
+ ),
+ (
+ "mobile_line_1",
+ wagtail.blocks.TextBlock(
+ label="První mobilní řádek"
+ ),
+ ),
+ (
+ "mobile_line_2",
+ wagtail.blocks.TextBlock(
+ label="Druhý mobilní řádek"
+ ),
+ ),
+ ]
+ ),
+ ),
+ (
+ "candidates",
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "candidates",
+ wagtail.blocks.ListBlock(
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "page",
+ wagtail.blocks.PageChooserBlock(
+ label="Stránka",
+ page_type=[
+ "elections.ElectionsCandidatePage"
+ ],
+ ),
+ ),
+ (
+ "image",
+ wagtail.images.blocks.ImageChooserBlock(
+ help_text="Pokud není vybrán, použije se obrázek ze stránky kandidáta",
+ label="Obrázek",
+ required=False,
+ ),
+ ),
+ (
+ "description",
+ wagtail.blocks.TextBlock(
+ label="Popis"
+ ),
+ ),
+ ]
+ ),
+ label="Kandidáti",
+ ),
+ )
+ ]
+ ),
+ ),
+ (
+ "secondary_candidates",
+ wagtail.blocks.StructBlock(
+ [
+ ("heading", wagtail.blocks.CharBlock(label="Nadpis")),
+ (
+ "candidates",
+ wagtail.blocks.ListBlock(
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "number",
+ wagtail.blocks.CharBlock(
+ label="Číslo"
+ ),
+ ),
+ (
+ "page",
+ wagtail.blocks.PageChooserBlock(
+ label="Stránka",
+ page_type=[
+ "elections.ElectionsCandidatePage"
+ ],
+ ),
+ ),
+ (
+ "image",
+ wagtail.images.blocks.ImageChooserBlock(
+ help_text="Pokud není vybrán, použije se obrázek ze stránky kandidáta",
+ label="Obrázek",
+ required=False,
+ ),
+ ),
+ ]
+ ),
+ label="Kandidáti",
+ ),
+ ),
+ ]
+ ),
+ ),
+ (
+ "program",
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "label",
+ wagtail.blocks.CharBlock(
+ default="Program",
+ help_text="Např. 'Program'",
+ label="Nadpis",
+ ),
+ ),
+ (
+ "categories",
+ wagtail.blocks.ListBlock(
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "number",
+ wagtail.blocks.IntegerBlock(
+ label="Číslo"
+ ),
+ ),
+ (
+ "name",
+ wagtail.blocks.CharBlock(
+ label="Název"
+ ),
+ ),
+ (
+ "points",
+ wagtail.blocks.ListBlock(
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "content",
+ wagtail.blocks.TextBlock(
+ label="Obsah"
+ ),
+ )
+ ]
+ ),
+ label="Body",
+ ),
+ ),
+ ]
+ ),
+ label="Kategorie",
+ ),
+ ),
+ (
+ "long_version_url",
+ wagtail.blocks.URLBlock(
+ help_text="Pro zobrazení odkazu na celou verzi programu musí být obě následující pole vyplněná.",
+ label="Odkaz na celou verzi programu",
+ required=False,
+ ),
+ ),
+ (
+ "long_version_text",
+ wagtail.blocks.CharBlock(
+ label="Nadpis odkazu na celou verzi programu",
+ required=False,
+ ),
+ ),
+ ]
+ ),
+ ),
+ (
+ "news",
+ wagtail.blocks.StructBlock(
+ [
+ (
+ "title",
+ wagtail.blocks.CharBlock(
+ help_text="Nejnovější články se načtou automaticky",
+ label="Titulek",
+ ),
+ ),
+ (
+ "description",
+ wagtail.blocks.TextBlock(label="Popis"),
+ ),
+ ],
+ template="styleguide2/includes/organisms/articles/elections/articles_section.html",
+ ),
+ ),
+ ],
+ blank=True,
+ use_json_field=True,
+ verbose_name="Hlavní obsah",
+ ),
+ ),
+ ]
diff --git a/main/migrations/0072_mainarticlepage_show_initial_image.py b/main/migrations/0072_mainarticlepage_show_initial_image.py
index 994962fd..c2064bf5 100644
--- a/main/migrations/0072_mainarticlepage_show_initial_image.py
+++ b/main/migrations/0072_mainarticlepage_show_initial_image.py
@@ -4,15 +4,18 @@ from django.db import migrations, models
class Migration(migrations.Migration):
-
dependencies = [
- ('main', '0071_rename_date_mainarticlepage_timestamp'),
+ ("main", "0071_rename_date_mainarticlepage_timestamp"),
]
operations = [
migrations.AddField(
- model_name='mainarticlepage',
- name='show_initial_image',
- field=models.BooleanField(default=True, help_text='Pokud je tato volba zaškrtnutá, obrázek nastavený u tohoto článku se automaticky vloží do prvního odstavce.', verbose_name='Ukázat obrázek v textu'),
+ model_name="mainarticlepage",
+ name="show_initial_image",
+ field=models.BooleanField(
+ default=True,
+ help_text="Pokud je tato volba zaškrtnutá, obrázek nastavený u tohoto článku se automaticky vloží do prvního odstavce.",
+ verbose_name="Ukázat obrázek v textu",
+ ),
),
]
diff --git a/shared/templates/styleguide2/includes/molecules/menus/elections/carousel.html b/shared/templates/styleguide2/includes/molecules/menus/elections/carousel.html
index 51db6863..9182b422 100644
--- a/shared/templates/styleguide2/includes/molecules/menus/elections/carousel.html
+++ b/shared/templates/styleguide2/includes/molecules/menus/elections/carousel.html
@@ -5,10 +5,21 @@
<div class="h-[700px] xl:h-screen relative bg-white">
{% image self.image original as image %}
- <img
- class="header-carousel--image opacity-60 inline xl:hidden"
- src="{{ image.url }}"
+ <video
+ class="
+ header-carousel--image
+ lg:hidden
+ "
+ autoplay
+ muted
+ loop
+ playsinline
+ preload="metadata"
+
+ poster="{% static 'styleguide2/images/background-images/bg-flag-mobile-preview.jpg' %}"
>
+ <source src="{% static 'styleguide2/images/background-images/bg-flag-mobile.mp4' %}">
+ </video>
<video
class="header-carousel--image opacity-60 hidden xl:block"
@@ -24,18 +35,34 @@
{% endif %}
</video>
- <div class="elections--header-carousel--text-wrapper {% if self.video_url %}xl:hidden{% endif %}">
- <div
- class="container--wide h-full flex flex-col justify-end items-start"
- >
- <div class="2.5xl:ml-[-10rem]">
- <img
- class="w-4/6"
- src="{% static 'elections/europarl-header.png' %}"
- >
+ {% comment %}
+ (No longer needed. So far.)
+
+ <div class="elections--header-carousel--text-wrapper hidden xl:block">
+ <div
+ class="container--wide h-full flex flex-col justify-end items-start"
+ >
+ <div class="2.5xl:ml-[-10rem]">
+ <img
+ class="w-4/6"
+ src="{% static 'elections/europarl-header.png' %}"
+ >
+ </div>
+ </div>
+ </div>
+ {% endcomment %}
+
+ {% if self.mobile_line_1 or self.mobile_line_2 %}
+ <div class="header-carousel--text-wrapper" style="box-sizing: border-box">
+ <div class="container--wide px-0 h-full flex flex-col justify-end items-start" style="box-sizing: border-box">
+
+ <h1 class="mb-4 px-5 flex flex-col text-black block lg:hidden">
+ <div>{{ self.mobile_line_1 }}</div>
+ <div>{{ self.mobile_line_2 }}</div>
+ </h1>
</div>
</div>
- </div>
+ {% endif %}
</div>
</div>
</div>
--
GitLab