feat(district): improve geo feature detail page looks

district/templates/district/district_geo_feature_collection_page.html

@@ -4,12 +4,21 @@
 
 {% block subheader %}
   {% image page.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">
-      <h1 class="head-alt-md md:head-alt-lg max-w-2xl">
+  <header class="hero hero--image pt-16 pb-24 lg:pt-32 pb-24" style="--image-url: url({{ bg_img.url }})">
+    <div class="container container--default text-center lg:text-left">
+      {% comment %} Page index for screens up to md {% endcomment %}
+      {% if page.index %}
+        <div class="text-center relative mb-4 lg:hidden">
+          <span class="rounded-full inline-flex items-center justify-center bg-grey-125 font-bold text-center text-4xl md:text-5xl w-20 h-20 md:w-24 md:h-24 border-white border-8 text-black">{{ page.index }}</span>
+        </div>
+      {% endif %}
+
+
+      <h1 class="head-alt-md md:head-alt-xl max-w-2xl mx-auto lg:mx-0">
         {{ page.title }}
       </h1>
-      <h2 class="head-xs mt-4">
+
+      <h2 class="head-xs max-w-xl mb-2 mx-auto lg:mx-0">
         {{ page.perex }}
       </h2>
     </div>

district/templates/district/district_geo_feature_detail_page.html

 {% extends "district/base.html" %}
 {% load static wagtailcore_tags wagtailimages_tags %}
 
-{% block content %}
-  <article>
-    <link itemprop="mainEntityOfPage" href="{{ page.url }}">
-    <meta itemprop="datePublished" content="{{ page.last_published_at }}">
-    <meta itemprop="dateModified" content="{{ page.latest_revision_created_at }}">
+{% block subheader %}
+  {% image page.image width-1920 as bg_img %}
+  <header class="hero hero--image pt-16 pb-24 lg:pt-32 pb-24" style="--image-url: url({{ bg_img.url }})">
+    <div class="container container--default text-center lg:text-left">
+      {% comment %} Page index for screens up to md {% endcomment %}
+      {% if page.index %}
+        <div class="text-center relative mb-4 lg:hidden">
+          <span class="rounded-full inline-flex items-center justify-center bg-grey-125 font-bold text-center text-4xl md:text-5xl w-20 h-20 md:w-24 md:h-24 border-white border-8 text-black">{{ page.index }}</span>
+        </div>
+      {% endif %}
 
-    <h2 class="head-heavy-xs sm:head-heavy-sm md:head-heavy-base max-w-5xl mb-2">
+      <h2 class="head-xs max-w-xl mb-2 mx-auto lg:mx-0">
         <a href="{% pageurl page.get_parent %}">{{ page.get_parent.title }}</a>
       </h2>
 
-    <h1 itemprop="headline" class="flex items-center justify-between">
-      <span class="head-alt-sm sm:head-alt-md md:head-alt-lg max-w-5xl">{{ page.title }}</span>
-      <span v-if="page.index" class="rounded-full inline-flex items-center justify-center bg-grey-125 font-bold text-center text-sm sm:text-lg md:text-4xl w-6 h-6 sm:w-8 sm:h-8 md:w-16 md:h-16 ml-4 md:mb-2">{{ page.index }}</span>
+      <h1 class="head-alt-md md:head-alt-xl max-w-2xl mx-auto lg:mx-0">
+        {{ page.title }}
       </h1>
+    </div>
+  </header>
+{% endblock %}
+
+{% block container_spacing %}py-8 lg:pb-16{% endblock %}
 
-    <div class="lg:flex mt-2 lg:space-x-16">
-      <div class="lg:w-2/3">
-        <figure class="figure mb-4">
-          {% image page.image width-2000 as img %}
-          <img src="{{ img.url }}" alt="{{ page.title }}" />
-        </figure>
+{% block content %}
+  <article>
+    <link itemprop="mainEntityOfPage" href="{{ page.url }}">
+    <meta itemprop="datePublished" content="{{ page.last_published_at }}">
+    <meta itemprop="dateModified" content="{{ page.latest_revision_created_at }}">
 
-        <div class="content-block mb-8">
+    <div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
+      <section class="lg:w-3/5 xl:w-2/3 space-y-8" itemprop="description">
+        <div class="content-block w-full">
           <p>
             <strong>{{ page.perex }}</strong>
           </p>
         </div>
+
         {% for block in page.content %}
-          <div class="content-block {% if not forloop.last %}mb-8{% endif %}">
+          <div class="content-block">
             {% include_block block %}
           </div>
         {% endfor %}
-      </div>
+      </section>
 
-      <div class="pt-8 lg:w-1/3 md:pt-0">
+      <section class="lg:w-2/5 xl:w-1/3 pt-8 lg:pt-0 candidate-detail__sidebar">
         <div class="space-y-8">
           <div class="lg:card lg:elevation-10">
             <div class="lg:card__body">
-              <h2 class="head-heavy-sm mb-4"<a href="{% pageurl page.get_parent %}">{{ page.get_parent.title }}</a></h2>
+
+              {% comment %} Page index for screens bigger than md {% endcomment %}
+              {% if page.index %}
+                <div class="text-center mb-8 h-40 -mt-28 hidden lg:block">
+                  <span class="rounded-full inline-flex items-center justify-center bg-grey-125 font-bold text-center text-7xl w-40 h-40 border-white border-8">{{ page.index }}</span>
+                </div>
+              {% endif %}
+
+              <hr />
+
+              <h2 class="head-heavy-xs mb-2">Za tohle ručí</h2>
+              <div itemprop="author" itemtype="http://schema.org/Person" itemscope="">
+                <meta itemprop="name" content="{{ page.guarantor }}">
+                {% include "shared/person_badge_snippet.html" with person_page=page.guarantor %}
+              </div>
+
+              <hr />
 
               <div
                 class="v-geo-feature-collection"
@@ -63,14 +90,6 @@
 
               <hr />
 
-              <h2 class="head-heavy-xs mb-2">Za tohle ručí</h2>
-              <div itemprop="author" itemtype="http://schema.org/Person" itemscope="">
-                <meta itemprop="name" content="{{ page.guarantor }}">
-                {% include "shared/person_badge_snippet.html" with person_page=page.guarantor %}
-              </div>
-
-              <hr />
-
               <div class="space-y-4">
                 {% for category, features in features_by_category %}
                   <div class="js-feature-collection" style="border-right: 4px #{{ category.hex_color }} solid;">
@@ -120,7 +139,7 @@
         </div>
       </div>
 
-    </div>
+    </section>
   </article>
 {% endblock %}
 

district/templates/district/district_person_page.html

@@ -3,7 +3,7 @@
 
 {% block subheader %}
   {% image page.get_background_photo width-1920 as bg_img %}
-  <header class="hero hero--image pt-16 pb-24 lg:pt-32 pb-24 candidate-detail__hero"
+  <header class="hero hero--image pt-16 pb-24 lg:pt-32 pb-24"
           style="--image-url: url({{ bg_img.url }})"
   >
     <div class="container container--default text-center lg:text-left">
@@ -20,14 +20,13 @@
 {% block container_spacing %}py-8 lg:pb-16{% endblock %}
 
 {% block content %}
-    <main>
   <div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
     <section class="lg:w-3/5 xl:w-2/3">
       <div class="content-block w-full">
         {{ page.text|richtext }}
       </div>
-
     </section>
+
     <section class="lg:w-2/5 xl:w-1/3 pt-8 lg:pt-0 order-first lg:order-last candidate-detail__sidebar">
       <div class="container-padding--zero lg:card lg:elevation-10 lg:container-padding--auto">
         <div class="card__body p-4 lg:p-8">
@@ -159,6 +158,5 @@
       </div>
     </section>
   </div>
-    </main>
 
 {% endblock %}