Generating a generic listing page and blog listing specific page (#3427)

* generating a generic listing page

network-api/networkapi/wagtailpages/migrations/0071_indexpage.py

@@ -0,0 +1,42 @@
+# Generated by Django 2.2.3 on 2019-07-24 22:15
+
+from django.db import migrations, models
+import django.db.models.deletion
+import wagtailmetadata.models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailcore', '0041_group_collection_permissions_verbose_name_plural'),
+        ('wagtailimages', '0001_squashed_0021'),
+        ('wagtailpages', '0070_auto_20190716_1200'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='IndexPage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.Page')),
+                ('header', models.CharField(blank=True, max_length=250)),
+                ('header_en', models.CharField(blank=True, max_length=250, null=True)),
+                ('header_de', models.CharField(blank=True, max_length=250, null=True)),
+                ('header_pt', models.CharField(blank=True, max_length=250, null=True)),
+                ('header_es', models.CharField(blank=True, max_length=250, null=True)),
+                ('header_fr', models.CharField(blank=True, max_length=250, null=True)),
+                ('header_pl', models.CharField(blank=True, max_length=250, null=True)),
+                ('intro', models.CharField(blank=True, help_text='Intro paragraph to show in hero cutout box', max_length=250)),
+                ('intro_en', models.CharField(blank=True, help_text='Intro paragraph to show in hero cutout box', max_length=250, null=True)),
+                ('intro_de', models.CharField(blank=True, help_text='Intro paragraph to show in hero cutout box', max_length=250, null=True)),
+                ('intro_pt', models.CharField(blank=True, help_text='Intro paragraph to show in hero cutout box', max_length=250, null=True)),
+                ('intro_es', models.CharField(blank=True, help_text='Intro paragraph to show in hero cutout box', max_length=250, null=True)),
+                ('intro_fr', models.CharField(blank=True, help_text='Intro paragraph to show in hero cutout box', max_length=250, null=True)),
+                ('intro_pl', models.CharField(blank=True, help_text='Intro paragraph to show in hero cutout box', max_length=250, null=True)),
+                ('search_image', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='wagtailimages.Image', verbose_name='Search image')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=(wagtailmetadata.models.MetadataMixin, 'wagtailcore.page', models.Model),
+        ),
+    ]

network-api/networkapi/wagtailpages/models.py

@@ -1,4 +1,5 @@
 import json
+
 from django.db import models
 from django.conf import settings
 from django.http import HttpResponseRedirect
@@ -531,6 +532,37 @@ def get_context(self, request):
         return get_page_tree_information(self, context)
 
 
+class IndexPage(FoundationMetadataPageMixin, Page):
+    """
+    This is a page type for creating "index" pages that
+    can show cards for all their child content.
+    E.g. a page that list "all blog posts" under it,
+    or "all the various campaigns", etc.
+    """
+
+    header = models.CharField(
+        max_length=250,
+        blank=True
+    )
+
+    intro = models.CharField(
+        max_length=250,
+        blank=True,
+        help_text='Intro paragraph to show in hero cutout box'
+    )
+
+    content_panels = Page.content_panels + [
+        FieldPanel('header'),
+        FieldPanel('intro'),
+    ]
+
+    def get_context(self, request):
+        context = super().get_context(request)
+        context = set_main_site_nav_information(self, context, 'Homepage')
+        context = get_page_tree_information(self, context)
+        return context
+
+
 class NewsPage(PrimaryPage):
     parent_page_types = ['Homepage']
     template = 'wagtailpages/static/news_page.html'
@@ -1085,6 +1117,7 @@ class Homepage(FoundationMetadataPageMixin, Page):
         'RedirectingPage',
         'OpportunityPage',
         'BanneredCampaignPage',
+        'IndexPage',
     ]
 
     def get_context(self, request):

network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog-card.html

@@ -0,0 +1,15 @@
+{% extends "./generic-card.html" %}
+
+{% load wagtailcore_tags %}
+
+{% block tags-DISABLED-FOR-NOW %}
+<div>
+    {% with tag=page.specific.tags.first %}
+    <a class="main-tag" href="#">{{ tag }}</a>
+    {% endwith %}
+</div>
+{% endblock %}
+
+{% block byline %}
+By {{ page.specific.author }} on {{ page.first_published_at|date:"F j, Y" }}
+{% endblock%}

network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/blog-cards.html

@@ -0,0 +1,5 @@
+{% load wagtailcore_tags %}
+
+{% for page in entries %}
+{% include "./blog-card.html" %}
+{% endfor %}

network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/generic-card.html

@@ -0,0 +1,14 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+
+<div class="child-card col-6 col-md-4 mb-5">
+  <div>
+    <a href="{{ page.url }}">
+      {% image page.specific.get_meta_image fill-400x225 %}
+    </a>
+  </div>
+  {% block tags %}{% endblock %}
+  <a class="h4-heading d-inline-block my-2" href={{ page.url }}>{{ page.title }}</a>
+  <p class="body-small mb-0">
+    {% block byline %}{% endblock %}
+  </p>
+</div>

network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/related_posts.html

@@ -9,17 +9,7 @@ <h1 class="h4-heading">Related content</h2>
 
       <div class="related-posts mb-4">
         <div class="row">
-          {% for page in related_posts %}
-          <div class="related-card col-6 col-md-4 my-4">
-            <div>
-              <a href={{ page.url }}>
-                {% image page.get_meta_image fill-400x225 %}
-              </a>
-            </div>
-            <a class="h4-heading d-inline-block my-2" href={{ page.url }}>{{ page.title }}</a>
-            <p class="body-small">by {{ page.author }} on {{ page.first_published_at|date:"F j, Y" }}</p>
-          </div>
-          {% endfor %}
+          {% include "./blog-cards.html" with entries=related_posts %}
           </div>
         </div>
       </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/index_page.html

@@ -0,0 +1,39 @@
+{% extends "./modular_page.html" %}
+
+{% load wagtailcore_tags mini_site_tags %}
+
+
+{% block content %}
+  <div class="container">
+    <div class="row">
+      <div class="col-12 col-md-8 pt-4">
+        <h1 class="h1-heading mb-0 mt-1 pt-2">
+          {% if root.title %}{{ root.title }}{% elif page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}
+        </h1>
+        <p class="body-large mt-3 mb-0">{{ page.intro }}</p>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-12">
+        <hr class="intro-and-content-divider">
+      </div>
+    </div>
+
+    <div class="row">
+      {% block subcontent %}
+
+        {% for entry in page.get_children.live %}
+          {% with type=entry.specific_class.get_verbose_name|lower %}
+            {% if type == "blog page" %}
+              {% include "./fragments/blog-card.html" with page=entry %}
+            {% else %}
+              {% include "./fragments/generic-card.html" with page=entry %}
+            {% endif %}
+          {% endwith %}
+        {% endfor %}
+
+      {% endblock %}
+    </div>
+  </div>
+{% endblock %}

network-api/networkapi/wagtailpages/translation.py

@@ -2,6 +2,7 @@
     ModularPage,
     MiniSiteNameSpace,
     PrimaryPage,
+    IndexPage,
     NewsPage,
     InitiativesPage,
     ParticipatePage2,
@@ -107,6 +108,14 @@ class BanneredCampaignPageTR(TranslationOptions):
     )
 
 
+@register(IndexPage)
+class IndexPageTR(TranslationOptions):
+    fields = (
+        'header',
+        'intro',
+    )
+
+
 @register(NewsPage)
 class NewsPageTR(TranslationOptions):
     fields = ()