region: Duplicate functionality from district module

district/blocks.py

@@ -56,7 +56,7 @@ class CandidateListBlock(StructBlock):
         label = "List kanditátů"
 
 
-class ContactBlock(StructBlock):
+class CenterContactBlock(StructBlock):
     title = CharBlock(label="Titulek", required=True)
     contact_list = ListBlock(
         PageChooserBlock(label="Osoba", page_type=["district.DistrictPersonPage"]),
@@ -69,6 +69,18 @@ class ContactBlock(StructBlock):
         label = "Kontakt"
 
 
+class ContactItemBlock(StructBlock):
+    name = CharBlock(label="Role")
+    person = PageChooserBlock(
+        label="Osoba",
+        page_type=["district.DistrictPersonPage"],
+    )
+
+    class Meta:
+        icon = "mail"
+        label = "Kontakt"
+
+
 class ElectionHeaderBlock(StructBlock):
     flag_text = CharBlock(label="Text ve 'vlajce'", max_length=32, required=False)
     motto = CharBlock(label="Motto (podnadpis)", max_length=128, required=False)
@@ -86,14 +98,26 @@ class ElectionHeaderBlock(StructBlock):
 
 
 class HomepageHeaderBlock(StructBlock):
+    title = CharBlock(label="Titulek", required=False, help_text="Nap")
+    image = ImageChooserBlock()
+    button_text = CharBlock(label="Text tlačítka", required=False)
+    button_link = URLBlock(label="Odkaz tlačítka", required=False)
+
+    class Meta:
+        template = "district/blocks/homepage_header_block.html"
+        icon = "placeholder"
+        label = "Nadpis s obrázkem a tlačítky"
+
+
+class HomepageSimpleHeaderBlock(StructBlock):
     title = CharBlock(label="Titulek", required=True)
     subtitle = CharBlock(label="Podtitulek", required=False)
     image = ImageChooserBlock()
 
     class Meta:
-        template = "district/blocks/homepage_header_block.html"
+        template = "district/blocks/homepage_simple_header_block.html"
         icon = "image"
-        label = "Nadpis s obrázkem"
+        label = "Nadpis s obrázkem v pozadí"
 
 
 class PeopleGroupListBlock(StructBlock):

district/models.py

@@ -26,9 +26,11 @@ from uniweb.constants import RICH_TEXT_FEATURES
 from .blocks import (
     AddressBlock,
     CandidateListBlock,
-    ContactBlock,
+    CenterContactBlock,
+    ContactItemBlock,
     ElectionHeaderBlock,
     HomepageHeaderBlock,
+    HomepageSimpleHeaderBlock,
     PeopleGroupListBlock,
     RedmineProgramBlock,
     StaticProgramBlock,
@@ -39,7 +41,10 @@ class DistrictHomePage(MetadataPageMixin, CalendarMixin, Page):
     ### FIELDS
 
     subheader = StreamField(
-        [("header", HomepageHeaderBlock())],
+        [
+            ("header_simple", HomepageSimpleHeaderBlock()),
+            ("header", HomepageHeaderBlock()),
+        ],
         verbose_name="Blok pod headerem",
         blank=True,
     )
@@ -304,16 +309,6 @@ class DistrictArticlesPage(SubpageMixin, MetadataPageMixin, Page):
 
 
 class DistrictContactPage(SubpageMixin, MetadataPageMixin, Page):
-    class ContactItemBlock(blocks.StructBlock):
-        name = blocks.CharBlock(label="Role")
-        person = blocks.PageChooserBlock(
-            label="Osoba",
-            page_type=["district.DistrictPersonPage"],
-        )
-
-        class Meta:
-            label = "Kontakt"
-
     ### FIELDS
 
     contact_people = StreamField(
@@ -722,7 +717,7 @@ class DistrictCenterPage(CalendarMixin, SubpageMixin, MetadataPageMixin, Page):
     )
     text = RichTextField("Text", null=True)
     sidebar_content = StreamField(
-        [("address", AddressBlock()), ("contact", ContactBlock())],
+        [("address", AddressBlock()), ("contact", CenterContactBlock())],
         verbose_name="Obsah bočního panelu",
         blank=True,
     )

district/templates/district/blocks/homepage_header_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>
+<header class="hero py-8 lg:py-16">
+  <div class="container container--default grid lg:grid-cols-7 lg:grid-rows-3 gap-2 items-center">
+    <div class="lg:col-span-3 lg:row-span-2 order-1">
+      <h1 class="head-alt-md md:head-alt-xl">{% firstof self.title page.title %}</h1>
+    </div>
+
+    <div class="lg:row-span-1 lg:col-span-3 order-3">
+      <div class="mt-4 md:mt-8 space-y-4 ">
+        <a href="{{ self.button_link }}"
+           class="btn btn--icon btn--hoveractive btn--fullwidth md:btn--autowidth text-lg">
+          <div class="btn__body-wrap">
+            <div class="btn__body ">{{ self.button_text }}</div>
+            <div class="btn__icon ">
+              <i class="ico--chevron-right"></i>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+
+    <div class="lg:col-span-4 order-2 row-span-1 lg:row-span-3">
+      {% image self.image width-495 as img %}
+      <img src="{{ img.url }}" alt="" class="object-contain h-32 lg:h-80 lg:m-auto hidden md:block">
+    </div>
   </div>
 </header>

district/templates/district/blocks/homepage_simple_header_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_contact_page.html

@@ -6,7 +6,6 @@
   <div class="container container--default py-8">
     <div class="lg:flex lg:mt-8 space-y-16 lg:space-y-0 lg:space-x-8 xl:space-x-16 mb-5">
       <section class="lg:w-3/5 xl:w-2/3">
-
         <header>
           <h1 itemprop="headline" class="head-alt-md md:head-alt-lg max-w-5xl mb-8">{{ page.title }}</h1>
         </header>

region/blocks.py

-from wagtail.core.blocks import CharBlock, StructBlock, URLBlock
+from wagtail.core.blocks import (
+    CharBlock,
+    IntegerBlock,
+    ListBlock,
+    PageChooserBlock,
+    StructBlock,
+    TextBlock,
+    URLBlock,
+)
 from wagtail.images.blocks import ImageChooserBlock
 
 
+class AddressBlock(StructBlock):
+    title = CharBlock(label="Titulek", required=True)
+    embed_map = URLBlock(
+        label="Odkaz na embed mapku",
+        required=False,
+        help_text="Hodnota 'src' v <iframe>",
+    )
+    address = TextBlock(label="Adresa", required=True)
+    address_info = TextBlock(label="Info k adrese", required=False)
+
+    class Meta:
+        template = "region/blocks/address_block.html"
+        icon = "home"
+        label = "Adresa"
+
+
+class CallToActionButtonBlock(StructBlock):
+    button_link = URLBlock(label="Odkaz", max_length=64)
+    button_text = CharBlock(label="Text")
+
+    class Meta:
+        template = "region/blocks/call_to_action_button_block.html"
+        icon = "link"
+        label = "Call-to-action tlačítko"
+
+
+class CandidateListBlock(StructBlock):
+    title = CharBlock(label="Titulek", required=True)
+    call_to_action_text = CharBlock(label="Text 'call-to-action' baneru")
+    call_to_action_link = URLBlock(
+        label="Odkaz 'call-to-action' baneru", required=False
+    )
+    call_to_action_button_text = CharBlock(
+        label="Text tlačítka 'call-to-action' baneru", max_length=24, required=False
+    )
+    candidate_list = ListBlock(
+        PageChooserBlock(label="Osoba", page_type=["region.RegionPersonPage"]),
+        label="Kandidáti",
+    )
+
+    class Meta:
+        template = "region/blocks/candidate_list_block.html"
+        icon = "list-ol"
+        label = "List kanditátů"
+
+
+class CenterContactBlock(StructBlock):
+    title = CharBlock(label="Titulek", required=True)
+    contact_list = ListBlock(
+        PageChooserBlock(label="Osoba", page_type=["region.RegionPersonPage"]),
+        label="List kontaktů",
+    )
+
+    class Meta:
+        template = "region/blocks/contact_block.html"
+        icon = "mail"
+        label = "Kontakt"
+
+
+class ContactItemBlock(StructBlock):
+    name = CharBlock(label="Role")
+    person = PageChooserBlock(
+        label="Osoba",
+        page_type=["region.RegionPersonPage"],
+    )
+
+    class Meta:
+        icon = "mail"
+        label = "Kontakt"
+
+
+class ElectionHeaderBlock(StructBlock):
+    flag_text = CharBlock(label="Text ve 'vlajce'", max_length=32, required=False)
+    motto = CharBlock(label="Motto (podnadpis)", max_length=128, required=False)
+    image = ImageChooserBlock(label="Obrázek (kandidátů)", required=False)
+    background_image = ImageChooserBlock(label="Obrázek na pozadí", required=True)
+    button_list = ListBlock(
+        CallToActionButtonBlock(),
+        label="Call to action tlačítka",
+    )
+
+    class Meta:
+        template = "region/blocks/election_header_block.html"
+        icon = "mail"
+        label = "Header pro volební rozcestník"
+
+
 class HomepageHeaderBlock(StructBlock):
     title = CharBlock(label="Titulek", required=False, help_text="Nap")
     image = ImageChooserBlock()
@@ -11,4 +106,60 @@ class HomepageHeaderBlock(StructBlock):
     class Meta:
         template = "region/blocks/homepage_header_block.html"
         icon = "image"
-        label = "Nadpis s obrázkem"
+        label = "Nadpis s obrázkem a tlačítky"
+
+
+class HomepageSimpleHeaderBlock(StructBlock):
+    title = CharBlock(label="Titulek", required=True)
+    subtitle = CharBlock(label="Podtitulek", required=False)
+    image = ImageChooserBlock()
+
+    class Meta:
+        template = "region/blocks/homepage_simple_header_block.html"
+        icon = "image"
+        label = "Nadpis s obrázkem v pozadí"
+
+
+class PeopleGroupListBlock(StructBlock):
+    group_title = CharBlock(label="Titulek", required=True)
+    person_list = ListBlock(
+        PageChooserBlock(label="Osoba", page_type=["region.RegionPersonPage"]),
+        label="List osob",
+    )
+
+    class Meta:
+        template = "region/blocks/people_group_block.html"
+        icon = "list-ul"
+        label = "Skupina členů"
+
+
+class ProgramItemBlock(StructBlock):
+    title = CharBlock(label="Název", required=True)
+    completion_percentage = IntegerBlock(label="Procento dokončení", required=True)
+
+
+class StaticProgramBlock(StructBlock):
+    headline = CharBlock(label="Titulek bloku", required=True)
+    perex = TextBlock(label="Krátký text pod nadpisem", required=True)
+    person = PageChooserBlock(label="Garant", page_type=["region.RegionPersonPage"])
+    completion_percentage = IntegerBlock(label="Procento dokončení", required=True)
+    program_items = ListBlock(ProgramItemBlock())
+    # program_items = TableBlock(label="Tabulka plnění programu", required=True)
+    person = PageChooserBlock(label="Garant", page_type=["region.RegionPersonPage"])
+
+    class Meta:
+        template = "region/blocks/static_program_block.html"
+        icon = "list-ul"
+        label = "Blok programu"
+
+
+class RedmineProgramBlock(StructBlock):
+    headline = CharBlock(label="Titulek bloku", required=True)
+    perex = TextBlock(label="Krátký text pod nadpisem", required=True)
+    person = PageChooserBlock(label="Garant", page_type=["region.RegionPersonPage"])
+    redmine_issue = IntegerBlock(label="Číslo Redmine issue", required=True)
+
+    class Meta:
+        template = "region/blocks/redmine_program_block.html"
+        icon = "site"
+        label = "Blok programu stahovaný z Redmine"

region/templates/region/blocks/address_block.html

+<h2 class="head-heavy-sm mb-2">
+  {{ self.title }}
+</h2>
+
+<iframe
+  src="{{ self.embed_map }}"
+  width="100%" height="300" id="mapa-mobile" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
+  tabindex="0"
+></iframe>
+
+<p>
+  {{ self.address | linebreaks }}
+</p>
+
+{% if self.address_info %}
+  <p>
+    <small>
+      {{ self.address_info }}
+    </small>
+  </p>
+{% endif %}

region/templates/region/blocks/call_to_action_button_block.html

+<a
+  href="{{ self.button_link }}"
+  class="btn btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg"
+>
+  <div class="btn__body ">{{ self.button_text }}</div>
+</a>

region/templates/region/blocks/candidate_list_block.html

+
+<h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">
+  Kandidáti do zastupitelstva Pardubického kraje
+</h1>
+<div class="candidate-card-list grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+  {% for person_page in self.candidate_list %}
+    {% if forloop.counter < 8 %}
+      {% include "shared/full_candidate_snippet.html" %}
+    {% endif %}
+  {% endfor %}
+  <aside class="banner bg-black text-white container-padding--zero sm:container-padding--auto">
+    <i class="ico--pirati banner__icon"></i>
+    <div class="banner__body">
+      <h1 class="head-alt-lg banner__cta">
+        {{ self.call_to_action_text }}
+      </h1>
+      {% if self.call_to_action_button_text %}
+        <a href="{{ self.call_to_action_link }}" class="btn btn--white btn--fullwidth mt-8">
+          <div class="btn__body ">
+            {{ self.call_to_action_button_text}}
+          </div>
+        </a>
+      {% endif %}
+    </div>
+  </aside>
+</div>
+<div>
+  <ui-view-provider :initial="{fullCandidateTable: false}" v-slot="{ isCurrentView, setView }">
+    <div class="candidate-table pt-8 container-padding--zero lg:container-padding--auto"
+         :class="{'candidate-table--fadeout': !isCurrentView('fullCandidateTable')}">
+      {% for person_page in self.candidate_list %}
+        {# Záměrně neomezuju list přes indexy, abych si držel counter pro snippet #}
+        {% if forloop.counter >= 8 and forloop.counter < 16  %}
+          {% include "shared/compact_candidate_snippet.html" %}
+        {% endif %}
+      {% endfor %}
+      <template v-if="isCurrentView('fullCandidateTable')">
+        {% for person_page in self.candidate_list %}
+          {# Záměrně neomezuju list přes indexy, abych si držel counter pro snippet #}
+          {% if forloop.counter >= 16  %}
+            {% include "shared/compact_candidate_snippet.html" %}
+          {% endif %}
+        {% endfor %}
+      </template>
+    </div>
+
+    <div class="text-center pt-8" v-if="!isCurrentView('fullCandidateTable')">
+      <button class="btn btn--icon text-xl btn--black btn--hoveractive"
+              @click="setView('fullCandidateTable', true)">
+        <div class="btn__body-wrap">
+          <div class="btn__body ">Zobrazit vše</div>
+          <div class="btn__icon "><i class="ico--chevron-right"></i></div>
+        </div>
+      </button>
+    </div>
+  </ui-view-provider>
+</div>

region/templates/region/blocks/contact_block.html

+<h2 class="head-heavy-sm mb-2">
+  {{ self.title }}
+</h2>
+
+{% for person_page in self.contact_list %}
+  <div class="{% if not forloop.last %}mb-4{% endif %}">
+    {% include "shared/person_badge_snippet.html" %}
+  </div>
+{% endfor %}

region/templates/region/blocks/election_header_block.html

+{% load wagtailcore_tags wagtailimages_tags %}
+
+{% image self.background_image width-1920 as bg_img %}
+<header class="hero hero--image py-16 " style="--image-url: url({{ bg_img.url }})">
+  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
+    <div class="lg:row-span-2 lg:col-span-3 order-1">
+      {% if self.flag_text %}
+        <div class="flag bg-violet-400 text-white head-alt-base mb-6">
+          {{ self.flag_text }}
+        </div>
+      {% endif %}
+      <h1 class="head-alt-md md:head-alt-xl">
+        {{ page.title }}
+      </h1>
+      {% if self.motto %}
+        <h2 class="head-xs md:head-base mt-2">
+          {{ self.motto }}
+        </h2>
+      {% endif %}
+    </div>
+    <div class="lg:row-span-1 lg:col-span-3 order-3">
+      <div class="mt-4 md:mt-8 space-y-4">
+        {% for button_block in self.button_list %}
+          {% include_block button_block %}
+        {% endfor %}
+      </div>
+    </div>
+    <div class="lg:row-span-3 lg:col-span-4 order-2">
+      {% if self.image %}
+        {% image self.image width-490 as img %}
+        <img src="{{ img.url }}" class="h-32 lg:h-80 lg:m-auto hidden md:block object-contain" alt="">
+      {% endif %}
+    </div>
+  </div>
+</header>

region/templates/region/blocks/homepage_simple_header_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>

region/templates/region/blocks/people_group_block.html

+<h2 class="head-heavy-base mb-4">
+  {{ self.group_title }}
+</h2>
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 row-gap-8 col-gap-8">
+  {% for person_page in self.person_list %}
+    {% include "shared/person_badge_snippet.html" %}
+  {% endfor %}
+</div>

region/templates/region/blocks/program_block.html

-<article class="mt-8">
-  <div class="lg:flex lg:space-x-16">
-    <div class="lg:w-3/5 xl:w-2/3">
-      <h2 class="head-heavy-sm mb-2 lg:mb-4">
-        {{ self.headline }}
-      </h2>
-      <div itemprop="description" class="w-full content-block">
-        <p>
-          {{ self.perex }}
-        </p>
-      </div>
-    </div>
-    <div class="pt-8 lg:w-1/3 md:pt-0">
-      <div class="card">
-        <div class="card__body">
-          <div class="badge badge--condensed">
-            <a href="/lide/martin-stanek.html" class="avatar badge__avatar avatar--sm">
-              <img src="/assets/bac4c3-0c8ce9ef9b8e4b48c898da14ee6fba5b78836ed019538622f72b4c6584aee7b6.jpg"
-                   alt="Martin Staněk">
-            </a>
-            <div class="badge__body">
-              <h2 class="head-heavy-2xs badge__title">
-                <a href="/lide/martin-stanek.html" title="Martin Staněk" class="content-block--nostyle">
-                  Martin Staněk
-                </a>
-              </h2>
-              <p class="badge__occupation">
-                Garant
-              </p>
-
-              <a href="tel:775 058 555"
-                 class="contact-line icon-link content-block--nostyle contact-line--responsive badge__link">
-                <i class="ico--phone"></i>
-                <span>775 058 555</span>
-              </a>
-
-              <a href="mailto:martin.stanek@pirati.cz"
-                 class="contact-line icon-link content-block--nostyle contact-line--responsive badge__link">
-                <i class="ico--envelope"></i>
-                <span>martin.stanek@pirati.cz</span>
-              </a>
-            </div>
-          </div>
-
-          <div class="content-block">
-            <div class="space-y-4 mt-8">
-              <div>
-                <a href="https://redmine.pirati.cz/issues/28177" class="contact-line icon-link content-block--nostyle">
-                  <i class="ico--info"></i>
-                  <span id="redmineid_28177">Plnění programu: 10%</span>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="mt-4">
-    <table class="table table--striped table--bordered w-full">
-      <thead>
-      <tr>
-        <td>Název</td>
-        <td>Stav plnění</td>
-      </tr>
-      </thead>
-      <tbody>
-      {% for item in self.program_items %}
-        <tr>
-          <td>
-            <a href="{{ item.issue_link }}" target="_blank">
-              {{ item.title }}
-            </a>
-          </td>
-          <td>{{ item.completion_percentage }} %</td>
-        </tr>
-      {% endfor %}
-      </tbody>
-    </table>
-  </div>
-</article>
-
-<div class="content-block">
-  <div class="space-y-4 mt-8">
-    <div>
-      <a href="https://redmine.pirati.cz/issues/28177" class="contact-line icon-link content-block--nostyle">
-        <i class="ico--info"></i>
-        <span id="redmineid_28177">Plnění programu: 10%</span>
-      </a>
-    </div>
-  </div>
-</div>
-
-<script>
-  fetch('https://redmine.pirati.cz/issues/28177.json')
-  .then(response => response.json())
-  .then(data => console.log(data));
-
-  fetch('https://redmine.pirati.cz/issues.json?parent_id=28177&sort=id:as')
-  .then(response => response.json())
-  .then(data => console.log(data));
-
-    {#pirates.priorityStack.push(function (context) {#}
-    {#    var url = 'https://redmine.pirati.cz/issues/28177.json';#}
-    {#    var xhr = pirates.createCORSRequest('GET', url);#}
-    {#    if (!xhr) {#}
-    {#        alert('CORS not supported');#}
-    {#        return;#}
-    {#    }#}
-    {#    xhr.onload = function () {#}
-    {#        var doc = JSON.parse(xhr.responseText);#}
-    {#        var redmine = document.getElementById('redmineid_28177');#}
-    {#        redmine.textContent = "Plnění programu: " + doc.issue.done_ratio + "%";#}
-    {#    }#}
-    {#    xhr.onerror = function () {#}
-    {#        console.log('Woops, there was an error making the request.');#}
-    {#    };#}
-    {#    xhr.send();#}
-    {#});#}
-    {#pirates.priorityStack.push(function (context) {#}
-    {#    var url = 'https://redmine.pirati.cz/issues.json?parent_id=28177&sort=id:asc';#}
-    {#    var xhr = pirates.createCORSRequest('GET', url);#}
-    {#    if (!xhr) {#}
-    {#        alert('CORS not supported');#}
-    {#        return;#}
-    {#    }#}
-    {#    xhr.onload = function () {#}
-    {#        var doc = JSON.parse(xhr.responseText);#}
-    {#        var div = document.getElementById('redmine_tasks_28177');#}
-    {#        div.appendChild(pirates.integrations.redmine.tasks(doc));#}
-    {#    }#}
-    {#    xhr.onerror = function () {#}
-    {#        console.log('Woops, there was an error making the request.');#}
-    {#    };#}
-    {#    xhr.send();#}
-    {#});#}
-</script>

region/templates/region/blocks/redmine_program_block.html

+<article class="mt-8">
+  <div class="lg:flex lg:space-x-16">
+    <div class="lg:w-3/5 xl:w-2/3">
+      <h2 class="head-heavy-sm mb-2 lg:mb-4">
+        {{ self.headline }}
+      </h2>
+      <div itemprop="description" class="w-full content-block">
+        <p>
+          {{ self.perex }}
+        </p>
+      </div>
+    </div>
+    <div class="pt-8 lg:w-1/3 md:pt-0">
+      <div class="card">
+        <div class="card__body">
+          {% include "shared/person_badge_snippet.html" with person_page=self.person %}
+
+          <div class="content-block">
+            <div class="space-y-4 mt-8">
+              <div>
+                <a href="https://redmine.pirati.cz/issues/{{ self.redmine_issue }}" class="contact-line icon-link content-block--nostyle">
+                  <i class="ico--info"></i>
+                  <span>
+                    Plnění programu:
+                    <span data-redmine-issue-id="{{ self.redmine_issue }}">10</span>%
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="mt-4">
+    <table class="table table--striped table--bordered w-full">
+      <thead>
+      <tr>
+        <td>Název</td>
+        <td>Stav plnění</td>
+      </tr>
+      </thead>
+      <tbody data-redmine-table-id="{{ self.redmine_issue }}">
+      </tbody>
+    </table>
+  </div>
+</article>
+
+<script>
+  (function () {
+    const redmineIssueId = '{{ self.redmine_issue }}'
+
+    fetch(`https://redmine.pirati.cz/issues/${redmineIssueId}.json`)
+      .then(response => response.json())
+      .then(data => handleOverallData(data.issue || {}))
+
+    fetch(`https://redmine.pirati.cz/issues.json?parent_id=${redmineIssueId}&sort=id:as`)
+      .then(response => response.json())
+      .then(data => handleIssueList(data.issues || []))
+
+    function handleOverallData(issue) {
+      document.querySelector('[data-redmine-issue-id="{{ self.redmine_issue }}"]').innerText = issue.done_ratio || 0
+    }
+
+    function handleIssueList(issueList) {
+      const table = document.querySelector('[data-redmine-table-id="{{ self.redmine_issue }}"]')
+      for (const issue of issueList) {
+        table.innerHTML +=
+          `<tr>
+            <td>
+              <a href="https://redmine.pirati.cz/issues/${issue.id}" target="_blank">
+                ${issue.subject || ''}
+              </a>
+            </td>
+            <td>${issue.done_ratio || 0} %</td>
+          </tr>`
+      }
+    }
+  })()
+</script>

region/templates/region/blocks/static_program_block.html

+<article class="mt-8">
+  <div class="lg:flex lg:space-x-16">
+    <div class="lg:w-3/5 xl:w-2/3">
+      <h2 class="head-heavy-sm mb-2 lg:mb-4">
+        {{ self.headline }}
+      </h2>
+      <div itemprop="description" class="w-full content-block">
+        <p>
+          {{ self.perex }}
+        </p>
+      </div>
+    </div>
+    <div class="pt-8 lg:w-1/3 md:pt-0">
+      <div class="card">
+        <div class="card__body">
+          {% include "shared/person_badge_snippet.html" with person_page=self.person %}
+
+          <div class="content-block">
+            <div class="space-y-4 mt-8">
+              <div>
+                <a href="https://redmine.pirati.cz/issues/28177" class="contact-line icon-link content-block--nostyle">
+                  <i class="ico--info"></i>
+                  <span>Plnění programu: {{ self.completion_percentage }}%</span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="mt-4">
+    <table class="table table--striped table--bordered w-full">
+      <thead>
+      <tr>
+        <td>Název</td>
+        <td>Stav plnění</td>
+      </tr>
+      </thead>
+      <tbody>
+      {% for item in self.program_items %}
+        <tr>
+          <td>
+            <a href="{{ item.issue_link }}" target="_blank">
+              {{ item.title }}
+            </a>
+          </td>
+          <td>{{ item.completion_percentage }} %</td>
+        </tr>
+      {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</article>

region/templates/region/region_after_election_page.html

+{% extends "region/base.html" %}
+{% load wagtailcore_tags wagtailimages_tags shared_filters %}
+
+{% block content %}
+  <div class="container container--default py-8 lg:py-24">
+    <main>
+      <div class="lg:flex lg:space-x-8 xl:space-x-16">
+        <section class="lg:w-3/5 xl:w-2/3">
+          <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-4">
+            {{ page.title }}
+          </h1>
+          <div class="content-block w-full">
+            {{ page.text | richtext }}
+          </div>
+        </section>
+        <section class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
+          <div class="lg:card lg:elevation-10">
+            <div class="lg:card__body">
+              <div class="content-block">
+                <h2>Volby</h2>
+                <h3>Program</h3>
+                <ul class="unordered-list unordered-list--linked ">
+                  {% for point_page in election_points %}
+                    <li>
+                      <a
+                        href="{{ point_page.url }}"
+                        class="{% if point_page.id == page.id %}font-bold {% endif %}content-block--nostyle"
+                      >
+                        {{ point_page.title }}
+                      </a>
+                    </li>
+                  {% endfor %}
+                </ul>
+                <hr>
+                <h3>Financování kampaně</h3>
+                <p>Transparentní financování kampaně je pro nás samozřejmost.</p>
+                <a
+                  href="https://wiki.pirati.cz/ft/start"
+                  class="btn btn--icon btn--black btn--hoveractive btn--fullwidth md:btn--autowidth"
+                >
+                  <div class="btn__body-wrap">
+                    <div class="btn__body ">Zjistit víc</div>
+                    <div class="btn__icon ">
+                      <i class="ico--chevron-right"></i>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  </div>
+
+{% endblock content %}

region/templates/region/region_article_page.html

@@ -2,52 +2,52 @@
 {% load static wagtailcore_tags wagtailimages_tags %}
 
 {% block content %}
-
   <div class="container container--default py-8 lg:py-24">
-
-  <article itemtype="http://schema.org/BlogPosting" itemscope="">
-
-    <header>
+    <article>
       <link itemprop="mainEntityOfPage" href="{{ page.url }}">
       <meta itemprop="datePublished" content="{{ page.last_published_at }}">
-      <meta itemprop="dateModified" content="">
+      <meta itemprop="dateModified" content="{{ page.latest_revision_created_at }}">
 
-      <h1 itemprop="headline" class="head-alt-md md:head-alt-lg max-w-5xl mb-4">{{ page.title }}</h1>
+      <h1 class="head-alt-md md:head-alt-lg max-w-5xl mb-4">
+        {{ page.title }}
+      </h1>
 
       <div class="flex flex-col md:flex-row md:items-center">
-
         <div class="inline-flex divide-x flex-grow">
           <span class="pr-2">{{ page.date|date:"SHORT_DATE_FORMAT" }}</span>
           <span class="pl-2" itemprop="author" itemtype="http://schema.org/Person" itemscope="">
+            {% if page.author_page %}
+              <a href="{{ page.author_page.url }}" itemprop="name">{{ page.author }}</a>
+            {% else %}
               <span itemprop="name">{{ page.author }}</span>
+            {% endif %}
           </span>
         </div>
-
         <div class="my-4">
           {% for tag in page.tags.all %}
-              <a href="{{ page.root_page.tags_page.url }}#{{ tag}}" class="btn btn--grey-125 btn--condensed" ><div class="btn__body ">{{ tag }}</div></a>
+            <a href="{{ page.root_page.tags_page.url }}#{{ tag }}" class="btn btn--grey-125 btn--condensed">
+              <div class="btn__body ">{{ tag }}</div>
+            </a>
           {% endfor %}
         </div>
-
       </div>
-
       <figure class="figure">
         {% image page.image width-2000 as img %}
         <img src="{{ img.url }}" alt="{{ page.title }}" />
       </figure>
 
-    </header>
-
       <div class="lg:flex mt-8 lg:space-x-16">
-
         <div class="lg:w-2/3">
-        <div itemprop="description" class="w-full content-block">
+          <div itemprop="description" class="content-block w-full">
             {{ page.text|richtext }}
-        </div>
+
+            {% if page.author_page %}
+              {% include "shared/person_badge_snippet.html" with person_page=page.author_page title="Autor" %}
+            {% endif %}
           </div>
 
+        </div>
         <div class="pt-8 lg:w-1/3 md:pt-0">
-        <div class="space-y-8">
           <div class="sharebox md:card md:elevation-10 ">
             <div class="md:card__body">
               <span class="head-alt-base md:head-alt-md">Sdílení je aktem lásky</span>
@@ -68,16 +68,25 @@
               <img src="{% static "shared/img/flag.png" %}" alt="Pirátská strana" class="w-80 object-cover m-auto"/>
             </div>
           </div>
-
         </div>
       </div>
-
-    </div>
     </article>
 
+    {% if related_articles|length %}
+      <section class="mt-16 md:mt-24">
+        <h1 class="head-alt-base md:head-alt-md pb-4">
+          Další podobné články
+        </h1>
+
+        <div class="article-card-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
+          {% for article in related_articles %}
+            {% include "shared/article_preview.html" %}
+          {% endfor %}
         </div>
 
         {% include "shared/more_articles_snippet.html" %}
-
+      </section>
+    {% endif %}
+  </div>
 
 {% endblock %}

region/templates/region/region_articles_page.html

@@ -15,39 +15,7 @@
         {% endfor %}
       </div>
 
-    <div class="pagination-container" role="navigation" aria-label="Pagination">
-      <nav>
-
-      {% if articles.has_previous %}
-      <a href="{{ page.root_page.articles_page.url }}?page={{ articles.previous_page_number }}" class="btn btn--icon btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon px-0"  aria-label="Předchozí stránka">
-          <div class="btn__body-wrap">
-            <div class="btn__body ">Předchozí</div>
-            <div class="btn__icon ">
-              <i class="ico--chevron-left"></i>
-            </div>
-          </div>
-      </a>
-      {% endif %}
-
-     {% for i in articles.paginator.page_range %}
-      <a href="{{ page.root_page.articles_page.url }}?page={{ i }}" class="btn {% if i == articles.number %} btn--grey-500 {% else %} btn--grey-125 {% endif %} btn--hoveractive btn--to-black btn--condensed hidden md:inline-block px-0"  aria-label="Stránka {{ i }}">
-          <div class="btn__body ">{{ i }}</div>
-      </a>
-     {% endfor %}
-
-     {% if articles.has_next %}
-      <a href="{{ page.root_page.articles_page.url }}?page={{ articles.next_page_number }}" class="btn btn--icon btn--grey-125 btn--hoveractive btn--to-black btn--condensed px-0"  aria-label="Další stránka">
-          <div class="btn__body-wrap">
-            <div class="btn__body ">Další</div>
-            <div class="btn__icon ">
-              <i class="ico--chevron-right"></i>
-            </div>
-          </div>
-      </a>
-      {% endif %}
-
-      </nav>
-    </div>
+      {% include 'styleguide/2.3.x/pagination.html' with paginator=article_page_list %}
     </div>
 
   </main>