donate: Regions selection as map

donate/models.py

@@ -227,12 +227,12 @@ class DonateRegionIndexPage(Page, SubpageMixin, MetadataPageMixin):
 
 
 class DonateRegionPage(DonateFormMixin, Page, SubpageMixin, MetadataPageMixin):
+    # TODO remove if not needed anymore
     perex = models.TextField("krátký popis do přehledu krajů")
     main_title = models.CharField("hlavní nadpis na stránce", max_length=250)
     body = RichTextField("obsah")
 
     content_panels = Page.content_panels + [
-        FieldPanel("perex"),
         FieldPanel("main_title"),
         FieldPanel("body", classname="full"),
     ]

donate/static/donate/assets/css/style.css

@@ -1070,3 +1070,42 @@ article img {
   margin-top: 1rem;
   margin-bottom: 3rem;
 }
+
+/* REGION MAP */
+
+.region-map {
+    overflow: hidden;
+}
+
+.region-map svg {
+    position: relative;
+    top: -0.734375px;
+}
+
+.region-map path {
+  stroke-linejoin: round;
+  cursor: pointer;
+  fill: #333333;
+  stroke: #666666;
+}
+
+.region-map a:hover path {
+  fill: #000000;
+}
+
+.region-list {
+    padding: 0;
+}
+
+.region-list li {
+    list-style-type: none;
+}
+
+.region-list a {
+  box-shadow: 0 .25rem 1.875rem rgba(42, 53, 79, .28);
+  margin-bottom: 1rem;
+  color: black;
+  padding: 0.6rem 1rem;
+  display: block;
+  font-weight: bold;
+}

donate/templates/donate/donate_home_page.html

@@ -128,18 +128,13 @@
   <section class="section--alternate" id="kraje">
   {% endif %}
     <div class="container">
-
       <h2 class="lead page-subheading mb-4">{{ page.region_title }}</h2>
       <p class="mb-4">{{ page.region_body }}</p>
-      <div class="row regions mb-4">
+      <div class="row mb-4">
 
-        {% for region in regions %}
-          {% include "donate/region_snippet.html" %}
-        {% endfor %}
+        {% include "donate/region_map_snippet.html" with index_url=page.regions_page_url %}
 
       </div> <!-- /row -->
-      <a href="{{ page.regions_page_url }}" class="btn btn-dark btn-lg my-2">Všechny kraje <i class="icon-chevron-right ml-2"></i></a>
-
     </div> <!-- /container -->
   </section>
 

donate/templates/donate/donate_region_index_page.html

@@ -8,11 +8,9 @@
   <section class="section--primary">
     <div class="container">
       <h1 class="lead homepage-heading mb-4">{{ page.title }}</h1>
-      <div class="row regions mb-4">
+      <div class="row mb-4">
 
-        {% for region in regions %}
-          {% include "donate/region_snippet.html" %}
-        {% endfor %}
+        {% include "donate/region_map_snippet.html" with index_url=page.get_url %}
 
       </div> <!-- /row -->
     </div> <!-- /container -->

donate/templates/donate/donate_region_page.html

@@ -109,11 +109,8 @@
 
   <section class="section--alternate project__related">
     <div class="container">
-      <h2 class="lead page-subheading mb-4">Ostatní kraje</h2>
-      <div class="row other-regions mb-4">
-        {% for region in other_regions %}
-        <div class="col-12 col-md-6 col-lg-4"><a href="{% pageurl region %}">{{ region.title }}</a></div>
-        {% endfor %}
+      <div class="row mb-4">
+        <a href="{% pageurl page.get_parent %}" class="btn btn-dark btn-lg my-2">Všechny kraje <i class="icon-chevron-right ml-2"></i></a>
       </div><!-- /row -->
     </div><!-- /container -->
   </section>

donate/templates/donate/region_snippet.html

-{% load wagtailcore_tags %}
-<div class="col-12 col-md-4 mb-4">
-  <a class="card region" href="{% pageurl region %}">
-    <div class="card-body">
-      <h5>{{ region.title }}</h5>
-      <p>{{ region.perex }}</p>
-    </div>
-  </a>
-</div><!-- /column -->