donate: Projects

donate/models.py

 from django.db import models
 from django.utils.translation import gettext_lazy
-from wagtail.admin.edit_handlers import FieldPanel, HelpPanel, MultiFieldPanel
-from wagtail.core.fields import RichTextField
+from wagtail.admin.edit_handlers import (
+    FieldPanel,
+    HelpPanel,
+    MultiFieldPanel,
+    StreamFieldPanel,
+)
+from wagtail.core.fields import RichTextField, StreamField
 from wagtail.core.models import Page
+from wagtail.images.blocks import ImageChooserBlock
 from wagtail.images.edit_handlers import ImageChooserPanel
 
 
+def get_url(page, request, dest_page_type):
+    try:
+        return page.get_children().type(dest_page_type).live().get().get_url(request)
+    except Page.DoesNotExist:
+        return "#"
+
+
 class DonateHomePage(Page):
     # lead section
     lead_title = models.CharField("hlavní nadpis", max_length=250, blank=True)
@@ -46,19 +59,16 @@ class DonateHomePage(Page):
                 FieldPanel("lead_video"),
                 ImageChooserPanel("lead_preview"),
             ],
-            heading="hlavní sekce",
+            "hlavní sekce",
         ),
         MultiFieldPanel(
-            [FieldPanel("support_title"), FieldPanel("support_body")],
-            heading="podpoř stranu",
+            [FieldPanel("support_title"), FieldPanel("support_body")], "podpoř stranu",
         ),
         MultiFieldPanel(
-            [FieldPanel("project_title"), FieldPanel("project_body")],
-            heading="podpoř projekt",
+            [FieldPanel("project_title"), FieldPanel("project_body")], "podpoř projekt",
         ),
         MultiFieldPanel(
-            [FieldPanel("region_title"), FieldPanel("region_body")],
-            heading="podpoř kraj",
+            [FieldPanel("region_title"), FieldPanel("region_body")], "podpoř kraj",
         ),
     ]
 
@@ -84,12 +94,12 @@ class DonateHomePage(Page):
                 FieldPanel("twitter"),
                 FieldPanel("flickr"),
             ],
-            heading="sociální sítě",
+            "sociální sítě",
         ),
         FieldPanel("matomo_id"),
     ]
 
-    subpage_types = ["donate.DonateRegionIndexPage"]
+    subpage_types = ["donate.DonateRegionIndexPage", "donate.DonateProjectIndexPage"]
 
     # flag for rendering anchor links in menu
     is_home = True
@@ -107,25 +117,21 @@ class DonateHomePage(Page):
         context["regions"] = (
             self.get_descendants().type(DonateRegionPage).live().specific()
         )
+        context["regions_url"] = get_url(self, request, DonateRegionIndexPage)
 
-        try:
-            context["regions_url"] = (
-                self.get_children()
-                .type(DonateRegionIndexPage)
+        context["projects"] = (
+            self.get_descendants()
+            .type(DonateProjectPage)
             .live()
-                .get()
-                .get_url(request)
+            .specific()
+            .order_by("-donateprojectpage__date")[:3]
         )
-        except Page.DoesNotExist:
-            context["regions_url"] = "#"
+        context["projects_url"] = get_url(self, request, DonateProjectIndexPage)
 
         return context
 
 
 class DonateRegionIndexPage(Page):
-    parent_page_types = ["donate.DonateHomePage"]
-    subpage_types = ["donate.DonateRegionPage"]
-
     promote_panels = [
         MultiFieldPanel(
             [
@@ -139,6 +145,9 @@ class DonateRegionIndexPage(Page):
 
     settings_panels = []
 
+    parent_page_types = ["donate.DonateHomePage"]
+    subpage_types = ["donate.DonateRegionPage"]
+
     # flag for rendering anchor links in menu
     is_home = False
 
@@ -159,10 +168,12 @@ class DonateRegionIndexPage(Page):
 
 class DonateRegionPage(Page):
     perex = models.TextField("krátký popis do přehledu krajů")
-    body = RichTextField("obsah", blank=True)
+    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"),
     ]
 
@@ -198,3 +209,105 @@ class DonateRegionPage(Page):
         context = super().get_context(request)
         context["other_regions"] = self.get_siblings(inclusive=False).live()
         return context
+
+
+class DonateProjectIndexPage(Page):
+    promote_panels = [
+        MultiFieldPanel(
+            [
+                FieldPanel("slug"),
+                FieldPanel("seo_title"),
+                FieldPanel("search_description"),
+            ],
+            gettext_lazy("Common page configuration"),
+        ),
+    ]
+
+    settings_panels = []
+
+    parent_page_types = ["donate.DonateHomePage"]
+    subpage_types = ["donate.DonateProjectPage"]
+
+    # flag for rendering anchor links in menu
+    is_home = False
+
+    class Meta:
+        verbose_name = "Přehled projektů"
+
+    @property
+    def root_page(self):
+        if not hasattr(self, "_root_page"):
+            self._root_page = self.get_parent().specific
+        return self._root_page
+
+    def get_context(self, request):
+        context = super().get_context(request)
+        context["projects"] = (
+            self.get_children().live().specific().order_by("-donateprojectpage__date")
+        )
+        return context
+
+
+class DonateProjectPage(Page):
+    date = models.DateField("běží od")
+    perex = models.TextField("krátký popis")
+    body = RichTextField("obsah")
+    is_new = models.BooleanField('označení "nový projekt"', default=False)
+    photo = models.ForeignKey(
+        "wagtailimages.Image",
+        verbose_name="fotka",
+        on_delete=models.PROTECT,
+        null=True,
+        blank=True,
+    )
+    gallery = StreamField(
+        [("photo", ImageChooserBlock(label="fotka"))],
+        verbose_name="galerie fotek",
+        blank=True,
+    )
+
+    content_panels = Page.content_panels + [
+        MultiFieldPanel(
+            [FieldPanel("is_new"), FieldPanel("perex"), ImageChooserPanel("photo")],
+            "info do přehledu projektů",
+        ),
+        FieldPanel("date"),
+        FieldPanel("body", classname="full"),
+        StreamFieldPanel("gallery"),
+    ]
+
+    promote_panels = [
+        MultiFieldPanel(
+            [
+                FieldPanel("slug"),
+                FieldPanel("seo_title"),
+                FieldPanel("search_description"),
+            ],
+            gettext_lazy("Common page configuration"),
+        ),
+    ]
+
+    parent_page_types = ["donate.DonateProjectIndexPage"]
+    subpage_types = []
+
+    # flag for rendering anchor links in menu
+    is_home = False
+
+    class Meta:
+        verbose_name = "Projekt"
+
+    @property
+    def root_page(self):
+        if not hasattr(self, "_root_page"):
+            self._root_page = self.get_ancestors().type(DonateHomePage).specific().get()
+        return self._root_page
+
+    def get_context(self, request):
+        context = super().get_context(request)
+        context["other_projects"] = (
+            self.get_siblings(inclusive=False)
+            .live()
+            .specific()
+            .order_by("-donateprojectpage__date")[:3]
+        )
+        return context

donate/templates/donate/donate_home_page.html

@@ -116,66 +116,13 @@
       <p class="mb-4">{{ page.project_body }}</p>
       <div class="row projects mb-4">
 
-      {# TODO #}
-        <div class="col-12 col-md-4 mb-4">
-          <a class="card project" href="projekt.php">
-            <img data-src="img/projekt.jpg" class="lazyload img-fluid card-img-top" alt="Novinka">
-            <div class="card-body">
-              <h5>Krajské volby 2020</h5>
-              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sollicitudin.
-                Aliquam erat volutpat. Maecenas sollicitudin. Aliquam erat volutpat..</p>
-            </div>
-            <div class="card-footer">
-              <div class="progress">
-                <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-              </div>
-              <p>Vybráno <strong>4 963 Kč</strong> z <strong>250 000 Kč</strong></p>
-            </div>
-          </a>
-        </div><!-- /column -->
-
-        <div class="col-12 col-md-4 mb-4">
-        <a class="card project" href="projekt.php">
-            <img data-src="img/projekt2.jpg" class="lazyload img-fluid card-img-top" alt="Novinka">
-            <div class="card-body">
-              <h5>Milion stromů do měst</h5>
-              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sollicitudin.</p>
-            </div>
-            <div class="card-footer">
-              <div class="progress">
-                <div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
-              </div>
-              <p>Vybráno <strong>4 963 Kč</strong> z <strong>250 000 Kč</strong></p>
-            </div>
-          </a>
-        </div><!-- /column -->
-
-        <div class="col-12 col-md-4 mb-4">
-        <a class="card project" href="projekt.php">
-            <img data-src="img/projekt3.jpg" class="lazyload img-fluid card-img-top" alt="Novinka">
-            <div class="card-body">
-              <h5>Odstranění babiše</h5>
-              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sollicitudin.
-                Aliquam erat volutpat. Maecenas sollicitudin. Aliquam erat volutpat. Aliquam erat volutpat. Maecenas
-                sollicitudin.</p>
-            </div>
-            <div class="card-footer">
-              <div class="progress">
-                <div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
-              </div>
-              <p>Vybráno <strong>4 963 Kč</strong> z <strong>250 000 Kč</strong></p>
-            </div>
-            <ul class="project__flags">
-						  <li class="project__flag new">Nový projekt</li>
-              <li class="project__flag almost">Už jen kousek</li>
-            </ul>
-          </a>
-        </div><!-- /column -->
+      {% for project in projects %}
+        {% include "donate/project_snippet.html" %}
+      {% endfor %}
 
       </div> <!-- /row -->
 
-      {# TODO #}
-      <a href="#" class="btn btn-dark btn-lg my-2">Všechny projekty <i class="icon-chevron-right ml-2"></i></a>
+      <a href="{{ projects_url }}" class="btn btn-dark btn-lg my-2">Všechny projekty <i class="icon-chevron-right ml-2"></i></a>
     </div> <!-- /container -->
   </section>
 

donate/templates/donate/donate_project_index_page.html

+{% extends "donate/base.html" %}
+
+{% block content %}
+
+<!-- CONTENT -->
+<main role="main">
+
+  <section class="section--primary">
+    <div class="container">
+      <h1 class="lead homepage-heading mb-4">{{ page.title }}</h1>
+      <div class="row projects mb-4">
+
+        {% for project in projects %}
+          {% include "donate/project_snippet.html" %}
+        {% endfor %}
+
+      </div> <!-- /row -->
+
+      {% comment %} {# TODO #}
+      <nav aria-label="Stránkování projektů">
+        <ul class="pagination justify-content-center">
+          <li class="page-item active">
+            <a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
+          </li>
+          <li class="page-item"><a class="page-link" href="#">2</a></li>
+          <li class="page-item"><a class="page-link" href="#">3</a></li>
+          <li class="page-item">
+            <a class="page-link" href="#">Další</a>
+          </li>
+        </ul>
+      </nav>
+      {% endcomment %}
+
+    </div> <!-- /container -->
+  </section>
+
+</main>
+<!-- /CONTENT -->
+
+{% endblock %}

donate/templates/donate/donate_project_page.html

+{% extends "donate/base.html" %}
+{% load static wagtailcore_tags wagtailimages_tags %}
+
+{% block content %}
+
+<!-- CONTENT -->
+<main role="main">
+
+  <section class="section--alternate project__header">
+    <div class="container">
+      <h1 class="lead heading">Podpoř projekt {{ page.title }}</h1>
+
+      <div class="row align-items-center">
+        <div class="col-12 col-md-6 mb-3 mb-md-0">
+          <p class="project__date">běží od {{ page.date|date:"j.n.Y" }}</p>
+        </div><!-- /column -->
+        <div class="col-12 col-md-6 text-md-right">
+          <div class="project__badges">
+            {% if page.is_new %}
+            <span class="badge badge-light new">Nově přidáno</span>
+            {% endif %}
+            {# TODO <span class="badge badge-light almost">Už jen kousek</span> #}
+          </div>
+        </div><!-- /column -->
+      </div><!-- /row -->
+    </div> <!-- /container -->
+  </section>
+
+  <section class="section--primary">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-lg-8 col-xl-7 mb-4 mb-lg-0 richtext">
+
+            {% if page.gallery %}
+            <div class="row project-images mb-3">
+              {% for block in page.gallery %}
+                {% image block.value width-2000 as img %}
+                {% image block.value fill-150x100 as thumb %}
+                <div class="col-6 col-md-3">
+                  <a data-fancybox="gallery" href="{{ img.url }}"><img data-src="{{ thumb.url }}" class="lazyload img-fluid" alt="{{ img.alt }}"></a>
+                </div><!-- /column -->
+              {% endfor %}
+            </div><!-- /row -->
+            {% endif %}
+
+            {{ page.body|richtext }}
+
+          </div><!-- /column -->
+
+          <div class="col-12 col-lg-4 offset-xl-1"><!-- /column -->
+            <div class="project-donate-form mb-4">
+
+              <div class="project-donate-form__left">
+                <div class="project-donate-form__left-content">
+                  <h2 class="lead mb-0">Podpoř projekt</h2>
+                </div><!-- /project-donate-form__left-content -->
+              </div><!-- /project-donate-form__left -->
+
+              <div class="project-donate-form__right">
+                {% comment %} {# TODO #}
+                <h5>Vybráno <strong>4 963 Kč</strong> z <strong>250 000 Kč</strong></h5>
+                <div class="progress">
+                  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
+                <hr>
+                <h5><strong>24 lidí</strong> přispělo</h5>
+                <h5><strong>40 dní</strong> do konce</h5>
+                <hr>
+                {% endcomment %}
+
+                <p class="mb-2">
+                  Pokud chcete podpořit tento projekt, zadejte prosím částku a vyberte
+                  mezi měsíčním nebo jednorázovým příspěvkem. Po kliknutí na tlačítko
+                  <strong>Darovat</strong> budete přesměrováni na formulář, kde
+                  vyplníte potřebné údaje a vyberete způsob převodu financí.
+                </p>
+
+                <form id="js-donate-form">
+                  <div class="form-group row mb-2 align-items-center">
+                      <legend class="col-form-label col-md-12 col-form-label-lg">Částka</legend>
+                      <div class="col-md-12">
+                          <div class="custom-control custom-radio custom-control-inline">
+                            <input type="radio" id="amount1" name="amount" value="100" class="custom-control-input" checked>
+                            <label class="custom-control-label col-form-label-lg" for="amount1">100 Kč</label>
+                          </div>
+                          <div class="custom-control custom-radio custom-control-inline">
+                            <input type="radio" id="amount2" name="amount" value="200" class="custom-control-input">
+                            <label class="custom-control-label col-form-label-lg" for="amount2">200 Kč</label>
+                          </div>
+                          <div class="custom-control custom-radio custom-control-inline">
+                            <input type="radio" id="amount3" name="amount" value="500" class="custom-control-input">
+                            <label class="custom-control-label col-form-label-lg" for="amount3">500 Kč</label>
+                          </div>
+                          <div class="custom-control custom-radio custom-control-inline">
+                            <input type="radio" id="amount4" name="amount" value="custom" class="custom-control-input">
+                            <label class="custom-control-label col-form-label-lg" for="amount4">Jiná</label>
+                          </div>
+                      </div>
+                  </div>
+                  <div class="form-group row mb-2 align-items-center" id="js-custom-amount-input" style="display: none;">
+                      <div class="col-md-12">
+                        <div class="input-group input-group-lg mb-3 custom-amount">
+                          <input type="text" class="form-control" id="customamount" name="customamount" placeholder="1000" aria-describedby="customamount-currency">
+                          <div class="input-group-append">
+                            <span class="input-group-text" id="customamount-currency">Kč</span>
+                          </div>
+                        </div>
+                      </div>
+                  </div>
+                  <div class="form-group row mb-4 align-items-center">
+                      <legend class="col-form-label col-md-12 col-form-label-lg">Typ příspěvku</legend>
+                      <div class="col-md-12">
+                          <div class="custom-control custom-radio custom-control-inline">
+                            <input type="radio" id="type1" name="type" value="monthly" class="custom-control-input" checked>
+                            <label class="custom-control-label col-form-label-lg" for="type1">Měsíční</label>
+                          </div>
+                          <div class="custom-control custom-radio custom-control-inline">
+                            <input type="radio" id="type2" name="type" value="onetime" class="custom-control-input">
+                            <label class="custom-control-label col-form-label-lg" for="type2">Jednorázový</label>
+                          </div>
+                      </div>
+                  </div>
+                  <div class="form-group row mb-0">
+                    <div class="col-12">
+                      <button type="submit" class="btn btn-success btn-lg">Darovat</button>
+                    </div>
+                  </div>
+                </form>
+
+              </div><!-- /project-donate-form__right -->
+            </div>
+
+            <div class="article__sharing-box">
+              <div class="card-body">
+                <div class="sharing-box__content">
+                  <div class="icon"><i class="icon-heart"></i></div>
+                  <div class="text"><h3 class="lead">Sdílení je aktem lásky</h3></div>
+                </div>
+                <div class="sharing-buttons">
+                  {# TODO #}
+                  <a href="#" class="btn btn-facebook"><i class="icon-facebook-f"></i></a>
+                  <a href="#" class="btn btn-twitter"><i class="icon-twitter"></i></a>
+                  <a href="#" class="btn btn-linkedin"><i class="icon-linkedin"></i></a>
+                </div>
+              </div>
+            <div class="image"><img data-src="{% static "donate/img/vlajka.jpg" %}" class="img-fluid lazyload" alt="Vlajka pirátů"></div>
+          </div><!-- /article__sharing-box -->
+
+        </div><!-- /column -->
+      </div> <!-- /row -->
+    </div> <!-- /container -->
+  </section>
+
+  <section class="section--alternate project__related">
+    <div class="container">
+      <h2 class="lead page-subheading mb-4">Další projekty</h2>
+      <div class="row projects mb-4">
+
+        {% for project in other_projects %}
+          {% include "donate/project_snippet.html" %}
+        {% endfor %}
+
+      </div><!-- /row -->
+      <a href="{% pageurl page.get_parent %}" class="btn btn-dark btn-lg"><i class="icon-chevron-left mr-2"></i> Projekty</a>
+    </div><!-- /container -->
+  </section>
+
+</main>
+<!-- /CONTENT -->
+
+{% endblock %}

donate/templates/donate/donate_region_index_page.html

 {% extends "donate/base.html" %}
-{% load static wagtailcore_tags %}
 
 {% block content %}
 
@@ -8,9 +7,7 @@
 
   <section class="section--primary">
     <div class="container">
-
       <h1 class="lead homepage-heading mb-4">{{ page.title }}</h1>
-
       <div class="row regions mb-4">
 
         {% for region in regions %}
@@ -18,7 +15,6 @@
         {% endfor %}
 
       </div> <!-- /row -->
-
     </div> <!-- /container -->
   </section>
 

donate/templates/donate/donate_region_page.html

@@ -8,7 +8,7 @@
 
   <section class="section--alternate region__header">
     <div class="container">
-      <h1 class="lead heading">{{ page.title }}</h1>
+      <h1 class="lead heading">{{ page.main_title }}</h1>
     </div> <!-- /container -->
   </section>
 

donate/templates/donate/project_snippet.html

+{% load wagtailcore_tags wagtailimages_tags %}
+
+<div class="col-12 col-md-4 mb-4">
+  <a class="card project" href="{% pageurl project %}">
+    {% image project.photo fill-400x230 as img %}
+    <img data-src="{{ img.url }}" class="lazyload img-fluid card-img-top" alt="{{ project.title }}">
+    <div class="card-body">
+      <h5>{{ project.title }}</h5>
+      <p>{{ project.perex }}</p>
+    </div>
+    {% comment %} {# TODO #}
+    <div class="card-footer">
+      <div class="progress">
+        <div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+      <p>Vybráno <strong>4 963 Kč</strong> z <strong>250 000 Kč</strong></p>
+    </div>
+    {% endcomment %}
+    {% if project.is_new %}
+    <ul class="project__flags">
+      <li class="project__flag new">Nový projekt</li>
+      {# TODO <li class="project__flag almost">Už jen kousek</li> #}
+    </ul>
+    {% endif %}
+  </a>
+</div><!-- /column -->