Clean up card styling

kmicms/core/blocks/elements.py

@@ -1,3 +1,6 @@
+from typing import Any
+
+from django.core.exceptions import ValidationError
 from wagtail import blocks
 from wagtail.images.blocks import ImageChooserBlock
 
@@ -33,7 +36,6 @@ class Meta:
 
 class CallToActionBlock(blocks.StructBlock):
     label = blocks.CharBlock()
-    link = blocks.PageChooserBlock()
     style = blocks.ChoiceBlock(
         choices=[
             ("primary", "Primary"),
@@ -46,15 +48,25 @@ class CallToActionBlock(blocks.StructBlock):
             ("dark", "Dark"),
         ]
     )
+    link = blocks.PageChooserBlock(required=False, label="Internal Link")
+    external_link = blocks.URLBlock(required=False, label="External Link")
 
     class Meta:
         template = "core/blocks/elements/call-to-action.html"
+        help_text = "bees"
+
+    def clean(self, value: Any) -> Any:
+        result = super().clean(value)
+        if not (bool(result["link"]) ^ bool(result["external_link"])):
+            raise ValidationError("Please add either an internal or external link.")
+        return result
 
 
 class CardBlock(blocks.StructBlock):
     image = ImageChooserBlock()
     title = blocks.TextBlock()
     text = blocks.RichTextBlock()
+    cta_list = blocks.ListBlock(CallToActionBlock(), label="Calls to Action")
 
     class Meta:
         label = "Card"

kmicms/core/templates/core/blocks/elements/call-to-action.html

@@ -1,4 +1,4 @@
 {% load wagtailcore_tags %}
-<a class="btn btn-{{ value.style }} ms-2 me-2" href="{% pageurl value.link %}">
+<a class="btn btn-{{ value.style }} me-2" href="{% if value.link %}{% pageurl value.link %}{% else %}{{ value.external_link }}{% endif %}">
     {{ value.label }}
 </a>

kmicms/core/templates/core/blocks/elements/card-grid.html

@@ -1,7 +1,7 @@
 {% load wagtailcore_tags %}
-<div class="row row-cols-1 {{ value.grid_class }} g-4">
+<div class="row row-cols-1 card-grid {{ value.grid_class }} g-4">
     {% for card in value.card_list %}
-        <div class="col">
+        <div class="col d-flex align-items-stretch">
             {% include_block card %}
         </div>
     {% endfor %}

kmicms/core/templates/core/blocks/elements/card.html

@@ -5,5 +5,8 @@
   <div class="card-body">
     <h5 class="card-title">{{ value.title }}</h5>
     <p class="card-text">{{ value.text|richtext}}</p>
+    {% for cta in value.cta_list %}
+      {% include_block cta %}
+    {% endfor %}
   </div>
 </div>

kmicms/static/css/main.scss

@@ -15,6 +15,7 @@
 
 // Sections
 @import "./sections/auth-panel";
+@import "./sections/card-grid";
 @import "./sections/masthead";
 @import "./sections/showcase";
 @import "./sections/testimonials";

kmicms/static/css/sections/_card-grid.scss

@@ -0,0 +1,13 @@
+//
+// Card Grid
+//
+
+.card-grid {
+	.card-img, .card-img-top, .card-img-bottom {
+		margin-left: auto;
+		margin-right: auto;
+		max-height: 6rem;
+		max-width: 100%;
+		padding: 1rem;
+	}
+}