diff --git a/district/templates/district/district_geo_feature_collection_page.html b/district/templates/district/district_geo_feature_collection_page.html
index 1bddbc2ce8b49198f801cbf38d1c6950b6282b0b..90b480d4bb9c687f20907b1c3296c9a8bc8d83c2 100644
--- a/district/templates/district/district_geo_feature_collection_page.html
+++ b/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>
diff --git a/district/templates/district/district_geo_feature_detail_page.html b/district/templates/district/district_geo_feature_detail_page.html
index 55365afba20c1babc53f1518c8836245c645fce0..b6db41f287e42133fb9abdb17505118968a2f294 100644
--- a/district/templates/district/district_geo_feature_detail_page.html
+++ b/district/templates/district/district_geo_feature_detail_page.html
@@ -1,45 +1,72 @@
{% extends "district/base.html" %}
{% load static wagtailcore_tags wagtailimages_tags %}
+{% 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-xs max-w-xl mb-2 mx-auto lg:mx-0">
+ <a href="{% pageurl page.get_parent %}">{{ page.get_parent.title }}</a>
+ </h2>
+
+ <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 %}
+
{% 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 }}">
- <h2 class="head-heavy-xs sm:head-heavy-sm md:head-heavy-base max-w-5xl mb-2">
- <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>
-
- <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>
-
- <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 %}
diff --git a/district/templates/district/district_person_page.html b/district/templates/district/district_person_page.html
index 4dffc61c9df58d074241d2b8457536be610e6b74..9ae41e4f1a9b96afe19c21ce70ce5b7a81bcf8e6 100644
--- a/district/templates/district/district_person_page.html
+++ b/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,145 +20,143 @@
{% 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>
+ <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>
- <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">
- <div class="text-center mb-8">
- <div class="avatar avatar--2xl lg:avatar--3xl avatar--bordered candidate-detail__avatar">
- {% image page.profile_photo max-208x208 as profile_img %}
- <img src="{{ profile_img.url }}" alt="Avatar">
- </div>
+ <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">
+ <div class="text-center mb-8">
+ <div class="avatar avatar--2xl lg:avatar--3xl avatar--bordered candidate-detail__avatar">
+ {% image page.profile_photo max-208x208 as profile_img %}
+ <img src="{{ profile_img.url }}" alt="Avatar">
+ </div>
+ </div>
+ {% if page.facebook_url or page.instagram_url or page.twitter_url or page.youtube_url or page.flickr_url or page.custom_web_url or page.other_urls %}
+ <div class="social-icon-group space-x-2 text-lg">
+ {% if page.facebook_url %}
+ <a href="{{ page.facebook_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
+ <i class="ico--facebook"></i>
+ </a>
+ {% endif %}
+ {% if page.instagram_url %}
+ <a href="{{ page.instagram_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
+ <i class="ico--instagram"></i></a>
+ {% endif %}
+ {% if page.twitter_url %}
+ <a href="{{ page.twitter_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
+ <i class="ico--twitter"></i>
+ </a>
+ {% endif %}
+ {% if page.youtube_url %}
+ <a href="{{ page.youtube_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
+ <i class="ico--youtube"></i>
+ </a>
+ {% endif %}
+ {% if page.flickr_url %}
+ <a href="{{ page.flickr_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
+ <i class="ico--flickr"></i>
+ </a>
+ {% endif %}
+ {% if page.custom_web_url %}
+ <a href="{{ page.custom_web_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
+ <i class="ico--globe"></i>
+ </a>
+ {% endif %}
+ {% for person_link_block in page.other_urls %}
+ <a
+ href="{{ person_link_block.value.url }}"
+ target="_blank"
+ class="social-icon"
+ rel="noreferrer noopener"
+ title="{{ person_link_block.value.title }}"
+ >
+ <i class="{% firstof person_link_block.value.custom_icon 'ico--globe' %}"></i>
+ </a>
+ {% endfor %}
+ {% endif %}
+ </div>
+
+ {% if page.is_pirate %}
+ <hr>
+ <div class="flex items-center">
+ <div class="avatar w-6 mr-2">
+ <img src="{% static "elections2021/images/logo-pirati-21px.svg" %}">
</div>
- {% if page.facebook_url or page.instagram_url or page.twitter_url or page.youtube_url or page.flickr_url or page.custom_web_url or page.other_urls %}
- <div class="social-icon-group space-x-2 text-lg">
- {% if page.facebook_url %}
- <a href="{{ page.facebook_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
- <i class="ico--facebook"></i>
- </a>
- {% endif %}
- {% if page.instagram_url %}
- <a href="{{ page.instagram_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
- <i class="ico--instagram"></i></a>
- {% endif %}
- {% if page.twitter_url %}
- <a href="{{ page.twitter_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
- <i class="ico--twitter"></i>
- </a>
- {% endif %}
- {% if page.youtube_url %}
- <a href="{{ page.youtube_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
- <i class="ico--youtube"></i>
- </a>
- {% endif %}
- {% if page.flickr_url %}
- <a href="{{ page.flickr_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
- <i class="ico--flickr"></i>
- </a>
- {% endif %}
- {% if page.custom_web_url %}
- <a href="{{ page.custom_web_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
- <i class="ico--globe"></i>
- </a>
- {% endif %}
- {% for person_link_block in page.other_urls %}
- <a
- href="{{ person_link_block.value.url }}"
- target="_blank"
- class="social-icon"
- rel="noreferrer noopener"
- title="{{ person_link_block.value.title }}"
- >
- <i class="{% firstof person_link_block.value.custom_icon 'ico--globe' %}"></i>
- </a>
- {% endfor %}
- {% endif %}
- </div>
+ <span class="font-bold font-condensed">Pirátská strana</span>
+ </div>
+ {% endif %}
- {% if page.is_pirate %}
- <hr>
- <div class="flex items-center">
- <div class="avatar w-6 mr-2">
- <img src="{% static "elections2021/images/logo-pirati-21px.svg" %}">
+ {% if page.phone or page.email and page.show_email %}
+ <hr>
+ <div class="content-block">
+ <div class="space-y-4">
+ {% if page.phone %}
+ <div>
+ <h4>Telefon</h4>
+ <a href="tel:{{ page.phone }}" class="contact-line icon-link content-block--nostyle">
+ <i class="ico--phone"></i><span>{{ page.phone }}</span>
+ </a>
</div>
- <span class="font-bold font-condensed">Pirátská strana</span>
- </div>
- {% endif %}
-
- {% if page.phone or page.email and page.show_email %}
- <hr>
- <div class="content-block">
- <div class="space-y-4">
- {% if page.phone %}
- <div>
- <h4>Telefon</h4>
- <a href="tel:{{ page.phone }}" class="contact-line icon-link content-block--nostyle">
- <i class="ico--phone"></i><span>{{ page.phone }}</span>
- </a>
- </div>
- {% endif %}
+ {% endif %}
- {% if page.email and page.show_email %}
- <div>
- <h4>Email</h4>
- <a href="mailto:{{ page.email }}" class="contact-line icon-link content-block--nostyle">
- <i class="ico--envelope"></i><span>{{ page.email }}</span>
- </a>
- </div>
- {% endif %}
+ {% if page.email and page.show_email %}
+ <div>
+ <h4>Email</h4>
+ <a href="mailto:{{ page.email }}" class="contact-line icon-link content-block--nostyle">
+ <i class="ico--envelope"></i><span>{{ page.email }}</span>
+ </a>
</div>
- </div>
- {% endif %}
+ {% endif %}
+ </div>
+ </div>
+ {% endif %}
- {% if random_people %}
- <hr>
- <div class="content-block">
- <h2>Lidé</h2>
+ {% if random_people %}
+ <hr>
+ <div class="content-block">
+ <h2>Lidé</h2>
- <div class="space-y-4 mt-4">
- {% for person in random_people %}
- {% include "shared/person_badge_snippet.html" with person_page=person skipcontacts=1 %}
- {% endfor %}
- </div>
+ <div class="space-y-4 mt-4">
+ {% for person in random_people %}
+ {% include "shared/person_badge_snippet.html" with person_page=person skipcontacts=1 %}
+ {% endfor %}
+ </div>
- <a href="{{ page.root_page.people_page.url }}"
- class="btn btn--icon btn--violet-500 btn--fullwidth btn--hoveractive pt-4">
- <div class="btn__body-wrap">
- <div class="btn__body ">Poznejte celý náš tým</div>
- <div class="btn__icon ">
- <i class="ico--chevron-right"></i>
- </div>
- </div>
- </a>
+ <a href="{{ page.root_page.people_page.url }}"
+ class="btn btn--icon btn--violet-500 btn--fullwidth btn--hoveractive pt-4">
+ <div class="btn__body-wrap">
+ <div class="btn__body ">Poznejte celý náš tým</div>
+ <div class="btn__icon ">
+ <i class="ico--chevron-right"></i>
+ </div>
</div>
- {% endif %}
- {% comment %} <hr> {% endcomment %}
- {# <h2>Kancelář</h2>#}
- {# <h4>Poslanecká sněmovna</h4>#}
- {# <p>#}
- {# Jiřího náměstí 39, 290 33 Poděbrady#}
- {# </p>#}
- {# <iframe#}
- {# src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82007.99920528589!2d15.688131074078123!3d50.034780639742856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470dc94b239307b5%3A0x12d59894ccf624ae!2sPardubice!5e0!3m2!1scs!2scz!4v1589382658695!5m2!1scs!2scz"#}
- {# width="100%" height="300" id="mapa-mobile" frameborder="0" style="border:0;" allowfullscreen=""#}
- {# aria-hidden="false" tabindex="0"></iframe>#}
- {# <h4>Otevírací doba</h4>#}
- {# <p>Pondělí 14:00 - 18:00 objednat se přes: kancelář-podebrady@pirati.cz nebo 778 111 462.</p>#}
-
- <!-- Mobile divider -->
- <hr class="block lg:hidden">
+ </a>
</div>
- </div>
- </section>
+ {% endif %}
+ {% comment %} <hr> {% endcomment %}
+{# <h2>Kancelář</h2>#}
+{# <h4>Poslanecká sněmovna</h4>#}
+{# <p>#}
+{# Jiřího náměstí 39, 290 33 Poděbrady#}
+{# </p>#}
+{# <iframe#}
+{# src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82007.99920528589!2d15.688131074078123!3d50.034780639742856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470dc94b239307b5%3A0x12d59894ccf624ae!2sPardubice!5e0!3m2!1scs!2scz!4v1589382658695!5m2!1scs!2scz"#}
+{# width="100%" height="300" id="mapa-mobile" frameborder="0" style="border:0;" allowfullscreen=""#}
+{# aria-hidden="false" tabindex="0"></iframe>#}
+{# <h4>Otevírací doba</h4>#}
+{# <p>Pondělí 14:00 - 18:00 objednat se přes: kancelář-podebrady@pirati.cz nebo 778 111 462.</p>#}
+
+ <!-- Mobile divider -->
+ <hr class="block lg:hidden">
+ </div>
</div>
- </main>
+ </section>
+ </div>
{% endblock %}