From ba925522aa7616a3a698f10a02a9b5d4940389bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <tomas@imaniti.org>
Date: Mon, 1 Jul 2024 14:45:52 +0200
Subject: [PATCH] add classes to blocks, add custom css

---
 district/blocks.py                            |  4 ++--
 .../0239_districthomepage_custom_css.py       | 18 +++++++++++++++
 .../0240_alter_districthomepage_content.py    | 22 +++++++++++++++++++
 district/models.py                            | 18 ++++++++++-----
 .../district/district_calendar_page.html      |  2 +-
 .../district_geo_feature_collection_page.html |  2 +-
 .../templates/district/district_pdf_page.html |  2 ++
 shared/templates/styleguide2/base.html        |  8 ++++++-
 .../includes/molecules/menus/carousel.html    |  6 ++---
 .../organisms/header/simple_header.html       |  2 ++
 .../includes/organisms/layout/navbar.html     | 18 ++++++++++-----
 shared/templates/styleguide2/simple_page.html |  2 +-
 12 files changed, 85 insertions(+), 19 deletions(-)
 create mode 100644 district/migrations/0239_districthomepage_custom_css.py
 create mode 100644 district/migrations/0240_alter_districthomepage_content.py

diff --git a/district/blocks.py b/district/blocks.py
index 26530f8f..2857f69f 100644
--- a/district/blocks.py
+++ b/district/blocks.py
@@ -58,10 +58,10 @@ class FullscreenHeaderBlock(StructBlock):
         required=False,
     )
 
-    desktop_line_1 = TextBlock(label="Desktop první řádek")
+    desktop_line_1 = TextBlock(label="Desktop první řádek", required=False)
     desktop_line_2 = TextBlock(label="Desktop druhý řádek", required=False)
 
-    mobile_line_1 = TextBlock(label="První mobilní řádek")
+    mobile_line_1 = TextBlock(label="První mobilní řádek", required=False)
     mobile_line_2 = TextBlock(label="Druhý mobilní řádek", required=False)
     mobile_line_3 = TextBlock(label="Třetí mobilní řádek", required=False)
 
diff --git a/district/migrations/0239_districthomepage_custom_css.py b/district/migrations/0239_districthomepage_custom_css.py
new file mode 100644
index 00000000..44b9adc5
--- /dev/null
+++ b/district/migrations/0239_districthomepage_custom_css.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.0.6 on 2024-07-01 12:39
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('district', '0238_alter_districtcustompage_content'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='districthomepage',
+            name='custom_css',
+            field=models.TextField(blank=True, help_text='Pokud si rozumíš s CSS a potřebuješ manuálně upravit něco ve vzhledu webu, můžeš do tohoto pole zadat pravidla, která se aplikují napříč celým webem. V opačném případě sem prosím nic nezadávej.', null=True, verbose_name='Vlastní CSS'),
+        ),
+    ]
diff --git a/district/migrations/0240_alter_districthomepage_content.py b/district/migrations/0240_alter_districthomepage_content.py
new file mode 100644
index 00000000..787a77c6
--- /dev/null
+++ b/district/migrations/0240_alter_districthomepage_content.py
@@ -0,0 +1,22 @@
+# Generated by Django 5.0.6 on 2024-07-01 12:44
+
+import shared.blocks.main
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('district', '0239_districthomepage_custom_css'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='districthomepage',
+            name='content',
+            field=wagtail.fields.StreamField([('fullscreen_header_block', wagtail.blocks.StructBlock([('desktop_image', wagtail.images.blocks.ImageChooserBlock(help_text='Pokud není vybráno video, ukáže se na desktopu.', label='Obrázek na pozadí (desktop)', required=False)), ('mobile_image', wagtail.images.blocks.ImageChooserBlock(help_text='Pokud není vybráno video, ukáže se na mobilu.', label='Obrázek na pozadí (mobil)', required=False)), ('desktop_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='Video (desktop)', required=False)), ('mobile_video_url', wagtail.blocks.URLBlock(help_text='Pokud je vybráno, ukáže se na mobilech s povoleným autoplayem místo obrázku.', label='Video (mobil)', required=False)), ('desktop_line_1', wagtail.blocks.TextBlock(label='Desktop první řádek', required=False)), ('desktop_line_2', wagtail.blocks.TextBlock(label='Desktop druhý řádek', required=False)), ('mobile_line_1', wagtail.blocks.TextBlock(label='První mobilní řádek', required=False)), ('mobile_line_2', wagtail.blocks.TextBlock(label='Druhý mobilní řádek', required=False)), ('mobile_line_3', wagtail.blocks.TextBlock(label='Třetí mobilní řádek', required=False)), ('button_url', wagtail.blocks.URLBlock(help_text='Bez odkazu tlačítko nebude viditelné.', label='Odkaz tlačítka', required=False)), ('button_text', wagtail.blocks.CharBlock(label='Text tlačítka', required=False))])), ('news_block', 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', required=False))], template='styleguide2/includes/organisms/articles/district/articles_section.html')), ('elections_block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(label='Titulek', required=True)), ('text_before_countdown', wagtail.blocks.CharBlock(default='Aktuálně zbývá', label='Text před odpočtem', required=True)), ('countdown_timestamp', wagtail.blocks.DateTimeBlock(label='Datum & čas voleb', required=True)), ('buttons', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(label='Titulek', max_length=128, required=True)), ('page', wagtail.blocks.PageChooserBlock(label='Stránka', required=False)), ('link', wagtail.blocks.URLBlock(label='Odkaz', required=False))]), label='Tlačítka', required=False))])), ('people_block', wagtail.blocks.StructBlock([('title_line_1', wagtail.blocks.CharBlock(label='První řádek titulku')), ('title_line_2', wagtail.blocks.CharBlock(label='Druhý řádek titulku')), ('description', wagtail.blocks.TextBlock(label='Popis')), ('list', wagtail.blocks.ListBlock(shared.blocks.main.BoxBlock, label='Boxíky'))], template='styleguide2/includes/organisms/main_section/district/representatives_section.html')), ('calendar_block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(label='Titulek', required=False))])), ('carousel_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))])), ('newsletter_block', wagtail.blocks.StructBlock([]))], blank=True, verbose_name='Obsah'),
+        ),
+    ]
diff --git a/district/models.py b/district/models.py
index 68bcd839..0398fc55 100644
--- a/district/models.py
+++ b/district/models.py
@@ -76,8 +76,6 @@ CONTENT_BLOCKS = DEFAULT_CONTENT_BLOCKS + [
 class DistrictHomePage(CalendarMixin, MainHomePageMixin):
     ### FIELDS
 
-    # --- BEGIN New fields ---
-
     # Main section
     content = StreamField(
         [
@@ -131,9 +129,18 @@ class DistrictHomePage(CalendarMixin, MainHomePageMixin):
         "Text tlačítka kalendáře", max_length=256, default="Kalendář"
     )
 
-    # --- END New fields ---
+    custom_css = models.TextField(
+        "VlastnĂ­ CSS",
+        help_text=(
+            "Pokud si rozumíš s CSS a potřebuješ manuálně upravit něco ve vzhledu "
+            "webu, můžeš do tohoto pole zadat pravidla, která se aplikují napříč "
+            "celým webem. V opačném případě sem prosím nic nezadávej."
+        ),
+        blank=True,
+        null=True,
+    )
 
-    # Extra komentar v paticce
+    # Extra komentar v paticce (TODO)
     footer_extra_content = RichTextField(
         verbose_name="Extra obsah na začátku patičky",
         blank=True,
@@ -163,7 +170,8 @@ class DistrictHomePage(CalendarMixin, MainHomePageMixin):
             ],
             "Formulář pro odběr newsletteru",
         ),
-        FieldPanel("matomo_id")
+        FieldPanel("matomo_id"),
+        FieldPanel("custom_css")
     ]
 
     ### EDIT HANDLERS
diff --git a/district/templates/district/district_calendar_page.html b/district/templates/district/district_calendar_page.html
index 7d008b1a..4a037ffc 100644
--- a/district/templates/district/district_calendar_page.html
+++ b/district/templates/district/district_calendar_page.html
@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block inner_content %}
-  <div class="__js-root">
+  <div class="__js-root __inner-content">
     <ui-full-calendar
       {% if page.calendar_url %}
         events='{{ page.get_fullcalendar_data|safe }}'
diff --git a/district/templates/district/district_geo_feature_collection_page.html b/district/templates/district/district_geo_feature_collection_page.html
index f75f4eed..ef9e7253 100644
--- a/district/templates/district/district_geo_feature_collection_page.html
+++ b/district/templates/district/district_geo_feature_collection_page.html
@@ -13,7 +13,7 @@
 
   <main class="container--wide mb-2 lg:mb-12">
     {% block inner_content %}
-      <div class="mt-8">
+      <div class="mt-8 __inner-content">
         <section>
           {% for block in page.content %}
             {% include_block block with block_id=block.id %}
diff --git a/district/templates/district/district_pdf_page.html b/district/templates/district/district_pdf_page.html
index b6040ebd..631ad626 100644
--- a/district/templates/district/district_pdf_page.html
+++ b/district/templates/district/district_pdf_page.html
@@ -5,5 +5,7 @@
 {% endblock %}
 
 {% block inner_content %}
+  <div class="__inner-content">
     {% include "shared/pdf_snippet.html" with download_link=True %}
+  </div>
 {% endblock %}
diff --git a/shared/templates/styleguide2/base.html b/shared/templates/styleguide2/base.html
index 239855c8..9f0faae4 100644
--- a/shared/templates/styleguide2/base.html
+++ b/shared/templates/styleguide2/base.html
@@ -30,9 +30,15 @@
     {% if page.root_page.matomo_id %}
       {% include "shared/matomo_snippet.html" with matomo_id=page.root_page.matomo_id %}
     {% endif %}
+
+    {% if page.root_page.custom_css %}
+      <style type="text/css">
+        {{ page.root_page.custom_css }}
+      </style>
+    {% endif %}
   </head>
 
-  <body>
+  <body class="__{{ page.content_type.model }}">
     {% include 'styleguide2/includes/organisms/layout/messages.html' %}
 
     {% block content %}{% endblock content %}
diff --git a/shared/templates/styleguide2/includes/molecules/menus/carousel.html b/shared/templates/styleguide2/includes/molecules/menus/carousel.html
index d4bbb283..aea8c1f2 100644
--- a/shared/templates/styleguide2/includes/molecules/menus/carousel.html
+++ b/shared/templates/styleguide2/includes/molecules/menus/carousel.html
@@ -79,19 +79,19 @@
           style="box-sizing: border-box"
         >
 
-          <h1 class="mb-4 px-5 flex-col text-black flex lg:hidden">
+          <h1 class="__header-carousel-mobile-text mb-4 px-5 flex-col text-black flex lg:hidden">
             <div>{{ self.mobile_line_1 }}</div>
             <div>{{ self.mobile_line_2 }}</div>
             <div>{{ self.mobile_line_3 }}</div>
           </h1>
 
-          <h1 class="mb-4 px-5 flex-col text-black hidden lg:flex">
+          <h1 class="__header-carousel-desktop-text mb-4 px-5 flex-col text-black hidden lg:flex">
             <div>{{ self.desktop_line_1 }}</div>
             <div>{{ self.desktop_line_2 }}</div>
           </h1>
 
           {% if self.button_url %}
-            <div class="ml-4 text-lg group">
+            <div class="__header-carousel-button-wrapper ml-4 text-lg group">
               {% firstof self.button_text "VĂ­ce informacĂ­" as button_text %}
 
               {% include "styleguide2/includes/atoms/buttons/round_button_without_url.html" with url=self.button_text text=button_text show_arrow_on_hover=True %}
diff --git a/shared/templates/styleguide2/includes/organisms/header/simple_header.html b/shared/templates/styleguide2/includes/organisms/header/simple_header.html
index 4aa2dfeb..8f48d296 100644
--- a/shared/templates/styleguide2/includes/organisms/header/simple_header.html
+++ b/shared/templates/styleguide2/includes/organisms/header/simple_header.html
@@ -9,6 +9,8 @@
 >
   <div
     class="
+      __simple-header
+      
       {% block classes %}
         flex items-center w-full pt-28 pb-8
 
diff --git a/shared/templates/styleguide2/includes/organisms/layout/navbar.html b/shared/templates/styleguide2/includes/organisms/layout/navbar.html
index 93c6dbfe..08961682 100644
--- a/shared/templates/styleguide2/includes/organisms/layout/navbar.html
+++ b/shared/templates/styleguide2/includes/organisms/layout/navbar.html
@@ -15,11 +15,17 @@
     {% endblock %}
   "
 >
-  <div class="container--wide py-3 xl:py-6 flex justify-between items-center">
-
+  <div
+    class="
+      __navbar-inner container--wide py-3 xl:py-6 flex justify-between items-center
+    "
+  >
     <div class="flex items-center xl:items-start">
       <!-- BEGIN Logo-->
-      <a href="{{ page.root_page.url }}" class="z-20 xl:mt-2 hover:no-underline">
+      <a
+        href="{{ page.root_page.url }}"
+        class="__navbar-logo-wrapper z-20 xl:mt-2 hover:no-underline"
+      >
         {% block navbar_logo_images %}
           <img
             class="navbar__logo--white w-[150px] lg:w-[180px]"
@@ -39,7 +45,7 @@
     <div class="flex-col gap-3 xl:flex hidden">
 
       <!-- BEGIN Social media-->
-      <div class="flex gap-7 justify-end items-center">
+      <div class="__navbar-social-media flex gap-7 justify-end items-center">
         <div class="flex gap-5 text-lg">
           {% for social_link_block in page.root_page.social_links %}
             <a href="{{ social_link_block.value.link }}" class="hover:no-underline">
@@ -58,7 +64,7 @@
 
       <!-- BEGIN Menu -->
       <div
-        class="flex text-2xl gap-4 font-alt items-center justify-end"
+        class="__navbar-menu flex text-2xl gap-4 font-alt items-center justify-end"
       >
         {% if page.root_page.important_item_name %}
           {% firstof page.root_page.important_item_page.url page.root_page.important_item_url as target %}
@@ -181,6 +187,8 @@
 
       <div
         class="
+          __navbar-search
+          
           flex flex-col gap-8 md:flex-row pt-6 px-8
           md:justify-between
           xl:pl-32
diff --git a/shared/templates/styleguide2/simple_page.html b/shared/templates/styleguide2/simple_page.html
index 3f06a695..5735d3b7 100644
--- a/shared/templates/styleguide2/simple_page.html
+++ b/shared/templates/styleguide2/simple_page.html
@@ -12,7 +12,7 @@
 
   <main class="mb-2 lg:mb-12">
     {% block inner_content %}
-      <div class="mt-8">
+      <div class="mt-8 __inner-content">
         {% for block in page.content %}
           {% if block.block_type != "newsletter" %}
             <div class="container--wide">
-- 
GitLab