elections2021: Going to vote page

elections2021/migrations/0048_elections2021goingtovotepage_header_text.py

+# Generated by Django 3.2.6 on 2021-09-02 22:34
+
+import wagtail.core.fields
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("elections2021", "0047_auto_20210902_2033"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="elections2021goingtovotepage",
+            name="header_text",
+            field=wagtail.core.fields.RichTextField(
+                blank=True, null=True, verbose_name="text v hlavičce"
+            ),
+        ),
+    ]

elections2021/models.py

@@ -383,6 +383,10 @@ class Elections2021HomePage(MetadataPageMixin, RoutablePageMixin, Page):
     def government_team_page_url(self):
         return get_subpage_url(self, Elections2021GovernmentTeamPage)
 
+    @cached_property
+    def going_to_vote_page_url(self):
+        return get_subpage_url(self, Elections2021GoingToVotePage)
+
     @cached_property
     def has_calendar(self):
         try:
@@ -2863,6 +2867,9 @@ class Elections2021GoingToVotePage(SubpageMixin, MetadataPageMixin, Page):
     ### FIELDS
 
     subtitle = models.CharField("podnadpis", blank=True, null=True, max_length=255)
+    header_text = RichTextField(
+        "text v hlavičce", blank=True, null=True, features=ARTICLE_RICH_TEXT_FEATURES
+    )
     video = models.URLField("video na youtube", blank=True, null=True)
     bottom_title = models.CharField(
         "spodní nadpis", blank=True, null=True, max_length=255
@@ -2972,6 +2979,7 @@ class Elections2021GoingToVotePage(SubpageMixin, MetadataPageMixin, Page):
 
     content_panels = Page.content_panels + [
         FieldPanel("subtitle"),
+        FieldPanel("header_text"),
         FieldPanel("video"),
         MultiFieldPanel(
             [FieldPanel("bottom_title"), FieldPanel("bottom_text")], "spodní obsah"

elections2021/templates/elections2021/_going_to_vote_section.html

@@ -10,7 +10,7 @@
       <h3 class="accordeon-row-heading head-alt-xs">{{ title }}</h3>
     {% endif %}
   </label>
-  <div class="accordeon-row-body text-left pl-11">
+  <div class="accordeon-row-body text-left pl-11 pr-12">
     <div class="content-block">
       <h3 class="head-alt-md pt-2">{{ title|default:"" }}</h3>
       {{ text|richtext }}

elections2021/templates/elections2021/base.html

@@ -38,6 +38,12 @@
       padding-left: 0.5em !important;
       margin-left: 1.5em;
     }
+    .text-white li::before {
+      color: white !important;
+    }
+    .navbar-menu__submenu {
+      line-height: 200%;
+    }
   </style>
   {% block head %}{% endblock %}
 
@@ -102,6 +108,7 @@
                       <li><a href="{{ page.root_page.program_page_url }}" class="navbar-menu__link">Úplný program</a></li>
                       <li><a href="{{ page.root_page.program_strategic_page_url }}" class="navbar-menu__link">Program v 5 minutách</a></li>
                       <li><a href="{{ page.root_page.program_silver_page_url }}" class="navbar-menu__link">Stříbrný program pro seniory</a></li>
+                      <li><a href="{{ page.root_page.going_to_vote_page_url }}" class="navbar-menu__link">Program pro mladé</a></li>
                     </ul>
                   </ui-navbar-subtitem>
                 </li>
@@ -133,10 +140,12 @@
   </nav>
 
   {% block content_header %}{% endblock %}
+  {% block content_full %}
     <div class="relative">
       {% include "elections2021/_side_panel.html" %}
       {% block content %}{% endblock %}
     </div>
+  {% endblock %}
 
   <footer class="footer footer-pirati-stan bg-black text-white __js-root">
     <ui-app inline-template>

elections2021/templates/elections2021/elections2021_going_to_vote_page.html

@@ -16,8 +16,13 @@
       max-height: 2000px !important;
     }
 
+    #young_voters .accordeon-row {
+      color: black;
+    }
+
     #young_voters .accordeon-row-body {
       background: white;
+      color: white;
     }
 
     #young_voters .accordeon-row:nth-of-type(1),
@@ -28,7 +33,7 @@
     #young_voters .accordeon-row:nth-of-type(2),
     #young_voters .accordeon-row:nth-of-type(6),
     #young_voters .accordeon-row:nth-of-type(7) {
-      background: var(--color-yellow-100);
+      background: #FFFF00;
     }
 
     #young_voters .accordeon-row:nth-of-type(3),
@@ -37,11 +42,11 @@
     }
 
     #young_voters .accordeon-row:nth-of-type(4) {
-      background: var(--color-darkacidgreen);
+      background: #CFFF04;
     }
 
     #young_voters .accordeon-row:nth-of-type(5) {
-      background: var(--color-white);
+      background: black;
     }
 
     ul.actions {
@@ -92,7 +97,7 @@
 
     @media (min-width: 1366px) {
       #young_voters .accordeon-row {
-        border-left: 4px solid var(--color-white);
+        border-left: 8px solid black;
         text-align: center;
       }
 
@@ -108,8 +113,8 @@
 
       #young_voters .accordeon-row:nth-of-type(5) img {
         position: absolute;
-        max-width: 150px;
-        max-height: 150px;
+        max-width: 153px;
+        max-height: 153px;
         top: 0;
         overflow: hidden;
       }
@@ -131,7 +136,7 @@
       }
 
       #young_voters .accordeon-row:nth-of-type(1) .accordeon-row-heading {
-        background: var(--color-yellow-100);
+        background: #FFFF00;
       }
 
       #young_voters .accordeon-row:nth-of-type(2) .accordeon-row-heading,
@@ -158,7 +163,7 @@
       }
 
       .accordeon-row-body .content-block {
-        padding: 0.2rem;
+        padding: 8px;
       }
 
       .container--default {
@@ -199,19 +204,25 @@
 
 {% block content_header %}
   <article class="relative bg-lemon md:bg-split-color px-4 md:pl-8 md:pr-0 2xl:px-8 hero py-0 w-full ">
-    <div class="2xl:container w-auto bg-lemon md:pl-20 pr-0 grid lg:grid-rows-1 h-40 sm:h-56 md:h-64 lg:grid-cols-7 items-center 2xl:mx-auto">
-      <div class="lg:row-span-1 lg:col-span-4 order-1 md:pr-20">
-        <h1 class="head-alt-md sm:head-alt-lg pt-1 max-w-xl">{{ page.title }}</h1>
-        <h2 class="head-alt-sm sm:head-alt-md pt-1 max-w-xl">{{ page.subtitle }}</h2>
+    <div class="2xl:container w-auto bg-lemon md:pl-8 lg:pl-20 pr-0 grid grid-rows-1 md:grid-cols-3 md:h-64 items-center 2xl:mx-auto">
+      <div class="md:row-span-1 md:col-span-1 order-1 md:pr-16">
+        <h1 class="head-alt-md sm:head-alt-lg pt-1 mt-4 mb-2">{{ page.title }}</h1>
+        <h2 class="head-alt-sm sm:head-alt-md pt-1 my-2">{{ page.subtitle }}</h2>
+      </div>
+      <div class="md:row-span-1 md:col-span-2 order-2 my-4 content-block">
+        {{ page.header_text|richtext }}
       </div>
     </div>
   </article>
 {% endblock %}
 
-{% block content %}
+{% block content_full %}
+<div class="relative bg-black text-white">
+  {% include "elections2021/_side_panel.html" %}
 
   <article class="2xl:container w-auto container--default pt-8 pb-20">
-  <section id="young_voters" class="space-y-1 faq-accordeon">
+
+    <section id="young_voters" class="space-y-2 faq-accordeon">
 
       {% include "elections2021/_going_to_vote_section.html" with id=1 section_image=page.section1_image title=page.section1_title text=page.section1_text %}
       {% include "elections2021/_going_to_vote_section.html" with id=2 section_image=page.section2_image title=page.section2_title text=page.section2_text %}
@@ -228,7 +239,7 @@
         <div class="accordeon-row-body">
           <div class="content-block">
             {% if page.video %}
-            <iframe width="640" height="440" src="{{ page.video }}" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+              <iframe width="640" height="446" src="{{ page.video }}" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
             {% endif %}
             <!-- <ul class="actions"> -->
             <!--   <li><a href="#" title="další informace" class="hover:elevation-1 text-2xl"><i class="ico--search"></i></a></li> -->
@@ -324,4 +335,5 @@
 
   </article>
 
+</div>
 {% endblock %}