Clean up miniview and search templates (#659)

* Add miniview and search template for Article and Event pages.
* Use miniview for Article Index and Event Index pages, for consistency.
* Make miniviews renderings more consistent throughout the site.
* Uniform height of cards when rendering miniviews in a row, e.g.
related pages or latest pages.
* Fix heading levels in miniviews and search templates to fix
accessibility warnings.
* Miniviews now have two new variables to control heading size and card
styling, which can be passed in: `{% include .. with h="h3" and
miniview_css_class="my-class-here" %}`

Fixes #578, #647, and #660

coderedcms/models/page_models.py

@@ -713,6 +713,7 @@ class CoderedArticlePage(CoderedWebPage):
         abstract = True
 
     template = "coderedcms/pages/article_page.html"
+    miniview_template = "coderedcms/pages/article_page.mini.html"
     search_template = "coderedcms/pages/article_page.search.html"
 
     related_show_default = True
@@ -856,6 +857,7 @@ class CoderedArticleIndexPage(CoderedWebPage):
         ("-date_display", "Display publish date, newest first"),
     ) + CoderedWebPage.index_order_by_choices
 
+    # DEPRECATED: Remove these show_* options in 5.0
     show_images = models.BooleanField(
         default=True,
         verbose_name=_("Show images"),
@@ -890,6 +892,10 @@ class CoderedEventPage(CoderedWebPage, BaseEvent):
         verbose_name = _("CodeRed Event")
         abstract = True
 
+    template = "coderedcms/pages/event_page.html"
+    miniview_template = "coderedcms/pages/event_page.mini.html"
+    search_template = "coderedcms/pages/event_page.search.html"
+
     calendar_color = ColorField(
         blank=True,
         help_text=_(

coderedcms/static/coderedcms/css/crx-front.css

@@ -3,16 +3,18 @@ Wagtail CRX (https://www.coderedcorp.com/cms/)
 Copyright 2018-2023 CodeRed LLC
 License: https://github.com/coderedcorp/coderedcms/blob/main/LICENSE
 */
-.crx-article .article-body {
-  max-width: 800px;
-}
-
 @media (min-width: 768px) {
   .crx-article .article-body {
     font-size: 1.2em;
   }
 }
 
+@media (min-width: 992px) {
+  .crx-article .article-body {
+    max-width: 800px;
+  }
+}
+
 .crx-article .article-author-img {
   max-height: 3em;
 }

coderedcms/static/coderedcms/scss/_crx-article.scss

@@ -2,10 +2,12 @@
 
 .crx-article {
   .article-body {
-    max-width: 800px;
     @media (min-width: 768px) {
       font-size: 1.2em;
     }
+    @media (min-width: 992px) {
+      max-width: 800px;
+    }
   }
   .article-author-img {
     max-height: 3em;

coderedcms/templates/coderedcms/blocks/pagelist_block.html

@@ -1,11 +1,11 @@
 {% extends "coderedcms/blocks/base_block.html" %}
 {% load wagtailcore_tags %}
 {% block block_render %}
-<div class="row">
+<div class="row g-4">
   {% for page in pages %}
   <div class="col-sm-6 col-lg-4">
     {% with page=page.specific %}
-    {% include page.miniview_template %}
+    {% include page.miniview_template with miniview_css_class="h-100" %}
     {% endwith %}
   </div>
   {% endfor %}

coderedcms/templates/coderedcms/pages/article_index_page.html

@@ -7,21 +7,7 @@
   <div class="row">
     <div class="col-md-9">
       {% for article in index_paginated %}
-      {% if self.show_images %}
-      <a href="{% pageurl article %}" title="{{article.title}}" class="text-white-50">
-        {% if article.cover_image %}
-        {% image article.specific.cover_image fill-1600x900 format-webp preserve-svg as cover_image %}
-        <img src="{{cover_image.url}}" class="w-100" alt="{{article.title}}">
-        {% endif %}
-      </a>
-      {% endif %}
-      <h3><a href="{% pageurl article %}">{{article.title}}</a></h3>
-      {% if self.show_captions and article.specific.caption %}<p class="lead">{{article.specific.caption}}</p>{% endif %}
-      {% if self.show_meta %}<p>{{article.specific.seo_published_at}} &bull; {{article.specific.seo_author}}</p>{% endif %}
-      {% if self.show_preview_text %}<p>{{article.specific.body_preview}}</p>{% endif %}
-      {% if not forloop.last %}
-      <hr>
-      {% endif %}
+      {% include article.miniview_template with page=article h="h2" miniview_css_class="mb-5" %}
       {% endfor %}
     </div>
     {% if page.index_classifiers.exists %}

coderedcms/templates/coderedcms/pages/article_page.html

@@ -18,7 +18,7 @@
       <span class="article-author">{{self.seo_author}}</span>
       <span class="mx-2">&bull;</span>
       {% endif %}
-      <span class="article-date">{{ self.seo_published_at }}</span>
+      <span class="article-date">{{ self.seo_published_at|date }}</span>
     </p>
   </div>
   {% endblock %}

coderedcms/templates/coderedcms/pages/article_page.mini.html

@@ -0,0 +1,17 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+<div class="card mb-3 {{ miniview_css_class }}">
+  {% if page.cover_image %}
+  {% image page.cover_image fill-800x450 format-webp preserve-svg as card_img %}
+  <a href="{% pageurl page %}" title="{{ page.title }}">
+    <img class="card-img-top w-100" src="{{ card_img.url }}" alt="{{ card_img.title }}">
+  </a>
+  {% endif %}
+  <div class="card-body">
+    <{{ h|default:"h3" }} class="h5 card-title">
+      <a href="{% pageurl page %}">{{ page.title }}</a>
+    </{{ h|default:"h3" }}>
+    {% if page.caption %}<p class="lead">{{page.caption}}</p>{% endif %}
+    <p class="card-text"><i>{{ page.seo_published_at|date }}</i></p>
+    <p class="card-text">{{ page.body_preview }}</p>
+  </div>
+</div>

coderedcms/templates/coderedcms/pages/article_page.search.html

@@ -10,7 +10,7 @@
   {% endif %}
   <div class="col">
     <div class="d-flex align-items-center">
-      <h4><a href="{{page.url}}">{{page.title}}</a></h4>
+      <h2 class="h4"><a href="{{page.url}}">{{page.title}}</a></h2>
       {% if page.content_type.model_class in pagetypes %}<small class="ms-3 badge badge-secondary">{{page.search_name}}</small>{% endif %}
     </div>
     {% if page.caption %}
@@ -19,7 +19,7 @@
     <p class="text-muted">
       <span class="article-author">{{page.seo_author}}</span>
       <span class="mx-2">&bull;</span>
-      <span class="article-date">{{ page.seo_published_at }}</span>
+      <span class="article-date">{{ page.seo_published_at|date }}</span>
     </p>
     {% if page.search_description %}
     <p>{{page.search_description|safe}}</p>

coderedcms/templates/coderedcms/pages/base.html

@@ -147,10 +147,10 @@
     {% if page.related_show %}
     <div class="container">
       <h2 class="text-center my-5">{% trans "Related" %}</h2>
-      <div class="row">
+      <div class="row g-4">
         {% for rp in related_pages %}
         <div class="col-sm-6 col-lg-4">
-          {% include rp.miniview_template with page=rp %}
+          {% include rp.miniview_template with page=rp miniview_css_class="h-100" %}
         </div>
         {% endfor %}
       </div>

coderedcms/templates/coderedcms/pages/event_index_page.html

@@ -18,35 +18,20 @@
 {% endblock %}
 {% block index_content %}
 <div class="container">
-  {% for event in index_paginated %}
-  <div class="row">
-    {% block event_cover_image %}
-    {% if event.cover_image %}
-    <div class="col-md">
-      {% image event.cover_image fill-1600x900 format-webp preserve-svg as cover_image %}
-      <a href="{{ event.url }}" title="{{ event.title }}"><img src="{{ cover_image.url }}" class="w-100" alt="{{ event.title }}"></a>
-    </div>
-    {% endif %}
-    {% endblock %}
-    {% block event_body_preview %}
-    <div class="col-md">
-      <h3><a href="{{ event.url }}">{{ event.title }}</a></h3>
-      <p>{{ event.most_recent_occurrence.0 }}</p>
-      <p>{{ event.body_preview }}</p>
+  <div class="row g-4">
+    {% for event in index_paginated %}
+    <div class="col-sm-6 col-lg-4">
+      {% include event.miniview_template with page=event h="h2" miniview_css_class="h-100" %}
     </div>
-    {% endblock %}
+    {% endfor %}
   </div>
-  {% if not forloop.last %}
-  <hr>
-  {% endif %}
-  {% endfor %}
   {% include "coderedcms/includes/pagination.html" with items=index_paginated %}
 </div>
 {% endblock %}
 
 {% block coderedcms_scripts %}
 {{ block.super }}
-<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js" integrity="sha256-alsi6DkexWIdeVDEct5s7cnqsWgOqsh2ihuIZbU6H3I=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.1.9/index.global.min.js" integrity="sha256-gUOOsuvXIJriWP5FGvNLUHPduBqgnIyGuAxWiWtHxMo=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js" integrity="sha256-ZztCtsADLKbUFK/X6nOYnJr0eelmV2X3dhLDB/JK6fM=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.1.15/index.global.min.js" integrity="sha256-TslkUnYKZuqQj4Ueu1WQesikFvl2DADWslCx3EfBHZM=" crossorigin="anonymous"></script>
 <script src="{% static 'coderedcms/js/crx-events.js' %}?v={% coderedcms_version %}"></script>
 {% endblock %}

coderedcms/templates/coderedcms/pages/event_page.mini.html

@@ -0,0 +1,16 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+<div class="card mb-3 {{ miniview_css_class }}">
+  {% if page.cover_image %}
+  {% image page.cover_image fill-800x450 format-webp preserve-svg as card_img %}
+  <a href="{% pageurl page %}" title="{{ page.title }}">
+    <img class="card-img-top w-100" src="{{ card_img.url }}" alt="{{ card_img.title }}">
+  </a>
+  {% endif %}
+  <div class="card-body">
+    <{{ h|default:"h3" }} class="h5 card-title">
+      <a href="{% pageurl page %}">{{ page.title }}</a>
+    </{{ h|default:"h3" }}>
+    <p class="card-text">{{ page.most_recent_occurrence.0 }}</p>
+    <p class="card-text">{{ page.body_preview }}</p>
+  </div>
+</div>

coderedcms/templates/coderedcms/pages/event_page.search.html

@@ -0,0 +1,31 @@
+{% load wagtailimages_tags %}
+<div class="row">
+  {% if page.cover_image %}
+  {% image page.cover_image fill-800x450 format-webp preserve-svg as cover_image %}
+  <div class="col-4 col-md-3 col-lg-2">
+    <a href="{{ page.url }}" title="{{ page.title }}">
+      <img src="{{ cover_image.url }}" class="w-100" alt="{{ page.title }}">
+    </a>
+  </div>
+  {% endif %}
+  <div class="col">
+    <div class="d-flex align-items-center">
+      <h2 class="h4"><a href="{{ page.url }}">{{ page.title }}</a></h2>
+      {% if page.content_type.model_class in pagetypes %}
+      <small class="ms-3 badge badge-secondary">{{page.search_name}}</small>
+      {% endif %}
+    </div>
+    <p class="text-muted">
+      <span>{{ page.most_recent_occurrence.0 }}</span>
+      {% if page.address %}
+      <span class="mx-2">&bull;</span>
+      <span>{{ page.address }}</span>
+      {% endif %}
+    </p>
+    {% if page.search_description %}
+    <p>{{page.search_description|safe}}</p>
+    {% elif page.body_preview %}
+    <p>{{page.body_preview}}</p>
+    {% endif %}
+  </div>
+</div>

coderedcms/templates/coderedcms/pages/page.mini.html

@@ -1,12 +1,15 @@
 {% load wagtailcore_tags wagtailimages_tags %}
-<div class="card mb-3">
+<div class="card mb-3 {{ miniview_css_class }}">
   {% if page.cover_image %}
   {% image page.cover_image fill-800x450 format-webp preserve-svg as card_img %}
-  <img class="card-img-top w-100" src="{{card_img.url}}" alt="{{card_img.title}}">
+  <a href="{% pageurl page %}" title="{{ page.title }}">
+    <img class="card-img-top w-100" src="{{ card_img.url }}" alt="{{ card_img.title }}">
+  </a>
   {% endif %}
   <div class="card-body">
-    <h5 class="card-title">{{page.title}}</h5>
-    <p class="card-text">{{page.body_preview}}</p>
-    <a class="card-link" href="{% pageurl page %}" title="{{page.title}}">Read more</a>
+    <{{ h|default:"h3" }} class="h5 card-title">
+      <a href="{% pageurl page %}">{{ page.title }}</a>
+    </{{ h|default:"h3" }}>
+    <p class="card-text">{{ page.body_preview }}</p>
   </div>
 </div>

coderedcms/templates/coderedcms/pages/search_result.html

@@ -1,6 +1,6 @@
 {% load coderedcms_tags %}
 <div class="d-flex align-items-center">
-  <h4><a href="{{page.url}}">{{page.title}}</a></h4>
+  <h2 class="h4"><a href="{{page.url}}">{{page.title}}</a></h2>
   {% if page.content_type.model_class in pagetypes %}
   <small class="ms-3 badge badge-secondary">{{page|get_name_of_class}}</small>
   {% endif %}