district: Calendar and countdown snippets for HP

district/migrations/0025_auto_20211119_1708.py

+# Generated by Django 3.2.8 on 2021-11-19 16:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("district", "0024_alter_districtelectionpointpage_list_image"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="districthomepage",
+            name="election_countdown_datetime",
+            field=models.DateTimeField(
+                blank=True,
+                help_text="Pro skrytí nechte nevyplněné",
+                null=True,
+                verbose_name="Datum a čas pro odpočet do voleb",
+            ),
+        ),
+        migrations.AddField(
+            model_name="districthomepage",
+            name="show_calendar_on_hp",
+            field=models.BooleanField(
+                default=True, verbose_name="Zobrazit kalendář dole na homepage"
+            ),
+        ),
+    ]

district/models.py

@@ -43,8 +43,17 @@ class DistrictHomePage(MetadataPageMixin, CalendarMixin, Page):
         verbose_name="Blok pod headerem",
         blank=True,
     )
-
     articles_title = models.CharField("Nadpis článků", max_length=256)
+    election_countdown_datetime = models.DateTimeField(
+        "Datum a čas pro odpočet do voleb",
+        null=True,
+        blank=True,
+        help_text="Pro skrytí nechte nevyplněné",
+    )
+    show_calendar_on_hp = models.BooleanField(
+        "Zobrazit kalendář dole na homepage", default=True
+    )
+
     region_map_button_text = models.CharField(
         "Text tlačítka mapy", max_length=256, default="Piráti v krajích"
     )
@@ -107,6 +116,8 @@ class DistrictHomePage(MetadataPageMixin, CalendarMixin, Page):
     content_panels = Page.content_panels + [
         StreamFieldPanel("subheader"),
         FieldPanel("articles_title"),
+        FieldPanel("election_countdown_datetime"),
+        FieldPanel("show_calendar_on_hp"),
     ]
 
     promote_panels = [
@@ -193,7 +204,7 @@ class DistrictHomePage(MetadataPageMixin, CalendarMixin, Page):
 
     @property
     def election_page(self):
-        return None  # TODO self._first_subpage_of_type(DistrictElectionPage)
+        return self._first_subpage_of_type(DistrictElectionPage)
 
     @property
     def people_page(self):
@@ -253,7 +264,7 @@ class DistrictArticlePage(ArticleMixin, SubpageMixin, MetadataPageMixin, Page):
         context = super().get_context(request)
         context["related_articles"] = (
             self.get_siblings(inclusive=False)
-            .live()  # TODO filtrovat na stejné tagy?
+            .live()  # TODO? filtrovat na stejné tagy?
             .specific()
             .order_by("-uniwebarticlepage__date")[:3]
         )

district/templates/district/base.html

@@ -216,8 +216,10 @@
           <ui-region-map class="container container--default" />
         </div>
         <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
+          <div class="container container--default">
             {% include "shared/calendar_current_events_snippet.html" %}
           </div>
+        </div>
       </aside>
     </ui-view-provider>
   </ui-app>

district/templates/district/blocks/homepage_calendar_block.html

-{% load wagtailimages_tags %}
-
-{% image self.image width-1920 as img %}
-<header
-  class="hero hero--image py-16 "
-  style="--image-url: url({{ img.url }})"
->
-  <div class="container container--default">
-    <h1 class="head-alt-md md:head-alt-lg max-w-2xl ">
-      {{ self.title }}
-    </h1>
-    <h2 class="head-xs mt-2 ">
-      {{ self.subtitle }}
-    </h2>
-  </div>
-</header>

district/templates/district/district_home_page.html

@@ -23,6 +23,18 @@
       {% include "shared/more_articles_snippet.html" %}
     </div>
 
+    {% if page.election_countdown_datetime %}
+      <section class="my-8 lg:my-16 container-padding--zero lg:container-padding--auto">
+        {% include "shared/election_countdown_snippet.html" %}
+      </section>
+    {% endif %}
+
+    {% if page.show_calendar_on_hp %}
+      <section class="my-8 lg:my-16 container-padding--zero lg:container-padding--auto">
+        {% include "shared/calendar_current_events_snippet.html" %}
+      </section>
+    {% endif %}
+
     {% include "shared/followus_snippet.html" %}
   </main>
 {% endblock %}

shared/templates/shared/calendar_current_events_snippet.html

-<div class="container container--default">
 {% if page.root_page.has_calendar %}
   <div class="calendar grid grid-cols-4">
     <div class="col-span-4 xl:col-span-1">
-        <aside class="banner bg-orange-300 text-white h-full"><i class="ico--calendar banner__icon"></i>
+      <aside class="banner bg-orange-300 text-white h-full">
+        <i class="ico--calendar banner__icon"></i>
         <div class="banner__body"><h1 class="head-alt-md banner__cta">Kalendář</h1>
           <button class="btn btn--white btn--fullwidth sm:btn--autowidth mt-8">
             <div class="btn__body">Zobrazit další</div>
@@ -56,4 +56,3 @@
     <p>Žádné události.</p>
   </div>
 {% endif %}
-</div>

shared/templates/shared/election_countdown_snippet.html

+<aside class="bg-black text-white px-4 py-12 lg:py-16 lg:px-24 {{ classes }}">
+  <div class="flex flex-col lg:flex-row items-center">
+    <h1 class="head-alt-md md:head-alt-xl flex-grow text-center lg:text-left mb-8 lg:mb-0">
+      Do voleb<br>nám zbývá
+    </h1>
+    <div class="__js-root">
+      <ui-flip-clock
+        clock-classes="text-6xl md:text-7xl lg:text-9xl"
+        slot-classes="text-2xl md:text-3xl lg:text-4xl"
+        deadline="{{ page.election_countdown_datetime | date:"Y-m-d" }} {{ page.election_countdown_datetime | time }}"
+        units="days,hours"
+      />
+    </div>
+  </div>
+</aside>