Remove unwanted gaps between hero and footer when using dark sections (…

…#11862)

* Remove banner margin introduced in #11756

* Remove container margin to address white gap when page ends with a dark block

* Create new template to extend streamfield for landing page & home page types

* Render the spacer block only if paragraph follows dark hero (homepage / landing page type)

* Add comment for logic context

* Create streamfield block on templates to conditionally include the new partial w/ spacer

* Rename block and file for better description

* Adding double quotes to attributes

* Linting

* Remove first block check & rename body_spacer

* Adding a post paragraph spacer as well

network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html

@@ -53,8 +53,10 @@
     {% block secondary_nav %}{% endblock %}
 
     {# Single column layout #}
-    <div class="cms mozfest-content mb-3 {% if page.use_wide_template %} wide {% endif %}{% block mozfest_content_classes %}{% endblock mozfest_content_classes %}">
-        {% include "partials/streamfield.html" %}
+    <div class="cms mozfest-content {% if page.use_wide_template %} wide {% endif %}{% block mozfest_content_classes %}{% endblock mozfest_content_classes %}">
+        {% block streamfield %}
+            {% include "partials/streamfield.html" %}
+        {% endblock streamfield %}
     </div>
 
 {% endblock %}

network-api/networkapi/mozfest/templates/mozfest/mozfest_homepage.html

@@ -15,6 +15,10 @@
     {% include "partials/primary_hero.html" with page=page %}
 {% endblock %}
 
+{% block streamfield %}
+    {% include "partials/streamfield_spacer.html" %}
+{% endblock streamfield %}
+
 {% block bootstrap_width %}col-lg-12{% endblock bootstrap_width %}
 
 {% block footer_block %}

network-api/networkapi/mozfest/templates/mozfest/mozfest_landing_page.html

@@ -15,6 +15,10 @@
     {% include "partials/primary_hero.html" with page=page %}
 {% endblock hero_guts %}
 
+{% block streamfield %}
+    {% include "partials/streamfield_spacer.html" %}
+{% endblock streamfield %}
+
 {% block bootstrap_width %}col-lg-12{% endblock bootstrap_width %}
 
 {% block footer_block %}

network-api/networkapi/mozfest/templates/partials/primary_hero.html

@@ -1,7 +1,7 @@
 {% load wagtailimages_tags %}
 
 {% image page.banner fill-1500x620 as hero_image %}
-<div class="tw-relative tw-dark tw-w-full tw-h-[470px] large:tw-h-[620px] tw-bg-center tw-bg-cover tw-mb-16 large:tw-mb-18 after:tw-opacity-70 after:tw-bottom-0 after:tw-absolute after:tw-content-[''] after:tw-bg-gradient-to-t after:tw-from-50% after:tw-from-black after:tw-to-transparent after:tw-h-[200px] after:tw-w-full" style="background-image:url('{{ hero_image.url }}')">
+<div class="tw-relative tw-dark tw-w-full tw-h-[470px] large:tw-h-[620px] tw-bg-center tw-bg-cover after:tw-opacity-70 after:tw-bottom-0 after:tw-absolute after:tw-content-[''] after:tw-bg-gradient-to-t after:tw-from-50% after:tw-from-black after:tw-to-transparent after:tw-h-[200px] after:tw-w-full" style="background-image:url('{{ hero_image.url }}')">
     <div class="tw-bg-gradient-to-t tw-from-black tw-via-black tw-to-festival-purple-200 tw-inset-0 tw-absolute tw-opacity-50"></div>
     <div class="tw-container">
         <div class="tw-row">

network-api/networkapi/mozfest/templates/partials/streamfield.html

@@ -1,5 +1,12 @@
 {% load wagtailcore_tags %}
 
 {% for block in page.body %}
+    {# optionally render a pre and post paragraph spacer for landing_page / homepage page types with dark sections #}
+    {% if block.block_type == 'paragraph' %}
+        {% block pre_paragraph_spacer %}{% endblock pre_paragraph_spacer %}
+    {% endif %}
     {% include_block block with parent_page=page %}
-{% endfor %}
+    {% if block.block_type == 'paragraph' %}
+        {% block post_paragraph_spacer %}{% endblock post_paragraph_spacer %}
+    {% endif %}
+{% endfor %}

network-api/networkapi/mozfest/templates/partials/streamfield_spacer.html

@@ -0,0 +1,9 @@
+{% extends "./streamfield.html" %}
+
+{% block pre_paragraph_spacer %}
+    <div class="tw-mt-16 large:tw-mt-18"></div>
+{% endblock pre_paragraph_spacer %}
+
+{% block post_paragraph_spacer %}
+    <div class="tw-mt-8 large:tw-mt-10"></div>
+{% endblock post_paragraph_spacer %}