Header align (#1571)

* Align petition header/content with main body header/content.

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

@@ -11,6 +11,7 @@
       {% endif %}"
     >
 
+      {% include "./h1-heading.html" %}
       {% block html_content %}
         {% for block in page.body %}
 	        {% if block.block_type == 'heading' %}
@@ -19,7 +20,7 @@ <h1>{{ block.value }}</h1>
 	            {% include_block block %}
 	        {% endif %}
         {% endfor %}
-    {% endblock %}
+      {% endblock %}
     </div>
 
     {% if page.cta != None %}

network-api/networkapi/wagtailpages/templates/wagtailpages/h1-heading.html

@@ -0,0 +1,7 @@
+<h1 class="h1-heading {% if uses_menu %}hidden-sm-down{% endif %}">
+{% if page.header %}
+  {{ page.header }}
+{% else %}
+  {{ page.title }}
+{% endif %}
+</h1>

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

@@ -38,22 +38,12 @@
 {% endblock %}
 
 
-{% block h1 %}
-  <h1 class="h1-heading {% if uses_menu %}hidden-sm-down{% endif %}">
-  {% if page.header %}
-    {{ page.header }}
-  {% else %}
-    {{ page.title }}
-  {% endif %}
-  </h1>
-{% endblock %}
-
-
 {% block html_content_classes %}{% if singleton_page %}col-12 col-lg-10 offset-lg-1{% else %}col-12 col-md-9{% endif %}{% endblock %}
 
 
 {% block subcontent %}
   <div class="cms">
+    {% include "./h1-heading.html" %}
     {% for block in page.body %}
       {% if block.block_type == 'heading' %}
         <h1>{{ block.value }}</h1>

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

@@ -32,8 +32,6 @@
       <div class="{% block heading_classes %}py-5 col-{% if page.specific.narrowed_page_content %}md-8 offset-md-2{% else %}12{% endif %} col-lg-10 offset-lg-1{% endblock %}">
         {% block mini_site_title %}{% endblock %}
 
-        {% block h1 %}{% endblock %}
-
         {% block subcontent %}{% endblock %}
       </div>
     </div>

source/js/components/petition/petition.jsx

@@ -391,12 +391,27 @@ export default class Petition extends React.Component {
   renderStandardHeading() {
     return (
       <div>
-        <h5 className="h5-heading">{this.props.ctaHeader}</h5>
-        <p dangerouslySetInnerHTML={{__html:this.props.ctaDescription}}></p>
+        <div className="algin-header-height">
+          <h5 className="h5-heading">{this.props.ctaHeader}</h5>
+        </div>
+        {this.renderCtaDescription()}
       </div>
     );
   }
 
+
+  /**
+   * @returns {jsx} Petition cta description if one exists.
+   */
+  renderCtaDescription() {
+    if (this.props.ctaDescription) {
+      return (
+        <p dangerouslySetInnerHTML={{__html:this.props.ctaDescription}}></p>
+      );
+    }
+    return null;
+  }
+
   /**
    * Render the submission form, either interactive, with fields
    * marked as not valid yet, or with fields disabled if the

source/js/components/petition/petition.scss

@@ -6,10 +6,16 @@
 .cta {
   .sticky-cta {
     position: sticky;
-    top: 117px;
+    top: 57px;
     overflow: hidden;
   }
 
+  .algin-header-height {
+    height: 80px;
+    display: flex;
+    align-items: end;
+  }
+
   .narrow-sticky-button-container {
     background: #fff;
     padding: 15px;