Feature/1300 card grid block

network-api/networkapi/mozfest/customblocks/__init__.py

@@ -0,0 +1,2 @@
+# flake8: noqa
+from .card_block import MozfestCardGridBlock

network-api/networkapi/mozfest/customblocks/card_block.py

@@ -0,0 +1,35 @@
+from wagtail import blocks
+from wagtail.images.blocks import ImageChooserBlock
+
+"""
+The following card and grid definitions are specifically for Mozfest.
+They are based on wagtailpages.pagemodels.customblocks.card_grid.py
+but have been modified to fit the Mozfest design.
+"""
+
+
+class MozfestCardGrid(blocks.StructBlock):
+    image = ImageChooserBlock()
+
+    alt_text = blocks.CharBlock(required=False, help_text="Alt text for card's image.")
+
+    title = blocks.CharBlock(help_text="Heading for the card.")
+    category = blocks.CharBlock(help_text="Category text for the card.", required=False)
+    date_meta = blocks.CharBlock(help_text="Date and time or other information.", required=False)
+
+    body = blocks.TextBlock(help_text="Body text of the card.", required=False)
+
+    link_url = blocks.CharBlock(
+        required=False,
+        help_text="Optional URL that this card should link out to. " "(Note: If left blank, link will not render.) ",
+    )
+
+
+class MozfestCardGridBlock(blocks.StructBlock):
+    heading = blocks.CharBlock(help_text="Heading for the block.")
+    cards = blocks.ListBlock(MozfestCardGrid(), help_text="Please use a minimum of 2 cards.")
+
+    class Meta:
+        icon = "placeholder"
+        template = "fragments/blocks/mozfest_card_grid_block.html"
+        label = "Mozfest Card Grid"

network-api/networkapi/mozfest/factory.py

@@ -10,7 +10,7 @@
 from networkapi.wagtailpages.factory.image_factory import ImageFactory
 from networkapi.wagtailpages.factory.signup import SignupFactory
 
-streamfield_fields = ["paragraph", "image", "spacer", "quote"]
+streamfield_fields = ["paragraph", "image", "spacer", "quote", "mozfest_card_grid"]
 Faker.add_provider(StreamfieldProvider)
 
 is_review_app = False

network-api/networkapi/mozfest/models.py

@@ -5,6 +5,7 @@
 from wagtail.models import Locale, Page
 from wagtail_localize.fields import SynchronizedField, TranslatableField
 
+from networkapi.mozfest import customblocks as mozfest_blocks
 from networkapi.wagtailpages.models import (
     FoundationBannerInheritanceMixin,
     FoundationMetadataPageMixin,
@@ -51,6 +52,7 @@ class MozfestPrimaryPage(FoundationMetadataPageMixin, FoundationBannerInheritanc
             ("tito_widget", customblocks.TitoWidgetBlock()),
             ("tabbed_profile_directory", customblocks.TabbedProfileDirectory()),
             ("newsletter_signup", customblocks.NewsletterSignupBlock()),
+            ("mozfest_card_grid", mozfest_blocks.MozfestCardGridBlock()),
         ],
         use_json_field=True,
     )

network-api/networkapi/mozfest/templates/fragments/blocks/mozfest_card_grid_block.html

@@ -0,0 +1,61 @@
+{% extends "wagtailpages/blocks/base_streamfield_block.html" %}
+{% load wagtailcore_tags wagtailimages_tags %}
+
+{% block block_content %}
+    <h3>{{ self.heading }}</h3>
+    <div class="tw-row">
+        {% for block in self.cards %}
+            {% with card=block count=self.cards|length %}
+                <div class="tw-px-8 small:tw-w-full {% if count > 2 %} large:tw-w-1/3 medium:tw-w-1/2 {% else %} medium:tw-w-1/2 {% endif %} tw-mb-12">
+                    <div class="card-regular tw-h-full tw-flex tw-flex-col">
+
+                        <div class="tw-w-full tw-aspect-video tw-bg-gray-05">
+                            <picture>
+                                {% comment %}
+                  Because of the card layout, the image size is not increasing consistently with the device size.
+                  The image sizes are based on the layout on a banner page with wide layout.
+                  The designed image aspect ratio is 16:9.
+
+                  Screen sizes:
+                    small: "576px"
+                    medium: "768px"
+                    large: "992px"
+                    xlarge: "1200px"
+                    "2xl": "1400px"
+
+                  The picture element will use the first source with a matching media query.
+                  Using min-media queries, we need to list the breakpoints in decending order, otherwise larger screens will always use the first listed (because that min-width query would be fulfilled).
+                {% endcomment %}
+                                {% image card.image fill-512x288 as img_small %}
+                                {% image card.image fill-1024x576 as img_small_2x %}
+                                {% image card.image fill-336x189 as img_medium %}
+                                {% image card.image fill-672x378 as img_medium_2x %}
+                                {% image card.image fill-448x252 as img_large %}
+                                {% image card.image fill-896x504 as img_large_2x %}
+                                {% image card.image fill-592x333 as img_xlarge %}
+                                {% image card.image fill-1184x666 as img_xlarge_2x %}
+                                <source media="(min-width: 1200px)" srcset="{{ img_xlarge.url }}, {{ img_xlarge_2x.url }} 2x" />
+                                <source media="(min-width: 992px)" srcset="{{ img_large.url }}, {{ img_large_2x.url }} 2x" />
+                                <source media="(min-width: 768px)" srcset="{{ img_medium.url }}, {{ img_medium_2x.url }} 2x" />
+                                <source media="(max-width: 767px)" srcset="{{ img_small.url }}, {{ img_small_2x.url }} 2x" />
+                                <img class="tw-w-full tw-h-full tw-object-cover" src="{{ img_small.url }}" alt="{{ img_small.alt_text }}" />
+                            </picture>
+                        </div>
+
+                        <div class="tw-flex tw-flex-1">
+                            <div class="tw-border-b-4 tw-border-gray-05 tw--mt-12 tw-bg-white tw-relative tw-mx-4 medium:tw-mx-8 tw-p-8 tw-w-full tw-flex tw-flex-col">
+                                {{ card.category }} | {{ card.date_meta }}
+                                <h3 class="tw-h3-heading tw-mb-4">{{ card.title }}</h3>
+                                <p>{{ card.body }}</p>
+                                {% if card.link_label and card.link_url %}
+                                    <a class="tw-cta-link tw-mb-4" href="{{ card.link_url }}">{{ card.link_label }}</a>
+                                {% endif %}
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            {% endwith %}
+        {% endfor %}
+    </div>
+{% endblock block_content %}

network-api/networkapi/utility/faker/streamfield_provider.py

@@ -280,6 +280,27 @@ def generate_card_grid_field():
     return generate_field("card_grid", {"cards": cards})
 
 
+def generate_mozfest_card_grid_field():
+    heading = fake.sentence(nb_words=4, variable_nb_words=True)
+
+    cards = []
+
+    for n in range(2):
+        cards.append(
+            {
+                "image": choice(Image.objects.all()).id,
+                "category": " ".join(fake.words(nb=2)),
+                "date_meta": " ".join(fake.words(nb=3)),
+                "title": fake.paragraph(nb_sentences=1, variable_nb_sentences=False),
+                "body": fake.paragraph(nb_sentences=10, variable_nb_sentences=True),
+                "link_label": " ".join(fake.words(nb=3)),
+                "link_url": fake.url(schemes=["https"]),
+            }
+        )
+
+    return generate_field("mozfest_card_grid", {"cards": cards, "heading": heading})
+
+
 def generate_pulse_listing_field():
     return generate_field(
         "pulse_listing",
@@ -511,6 +532,7 @@ def streamfield(self, fields=None):
             "current_events_slider": generate_current_events_slider_field,
             "callout_box": generate_blog_index_callout_box_field,
             "blog_newsletter_signup": generate_blog_newsletter_signup_field,
+            "mozfest_card_grid": generate_mozfest_card_grid_field,
         }
 
         streamfield_data = []