Initial horizontal nav on campaign pages.

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

@@ -2,46 +2,55 @@
 {% load wagtailcore_tags mini_site_tags %}
 
 {% block subcontent %}
-<div class="row">
-    <div class="cms
-      {% if page.cta and uses_menu == False and page.specific.narrowed_page_content == False %}
-        col-lg-7
-      {% else %}
-        col-12
-      {% endif %}"
-    >
-
-      {% include "./h1-heading.html" %}
-      {% block html_content %}
-        {% for block in page.body %}
-	        {% if block.block_type == 'heading' %}
-	            <h1>{{ block.value }}</h1>
-	        {% else %}
-	            {% include_block block %}
-	        {% endif %}
-        {% endfor %}
-      {% endblock %}
-    </div>
-
-    {% if page.cta != None %}
-    <div class="cta
-      {% if uses_menu == False and page.specific.narrowed_page_content == False %}
-        col-lg-4 offset-lg-1
-      {% else %}
-        col-lg-12
-      {% endif %}"
-    >
-      <div class="narrow-sticky-button-container hidden">
-        <a href="#cta-anchor" class="narrow-sticky-button btn">TAKE ACTION</a>
+<div class="py-5
+  {% if page.specific.narrowed_page_content %}
+    offset-md-2
+    col-md-8
+  {% else %}
+    col-md-12
+  {% endif %}"
+>
+  <div class="row">
+      <div class="cms
+        {% if page.cta and page.specific.narrowed_page_content == False %}
+          col-lg-7
+        {% else %}
+          col-12
+        {% endif %}"
+      >
+        {% include "./mini_site_header.html" %}
+        {% mini_site_horizontal_nav page %}
+        {% block html_content %}
+          {% for block in page.body %}
+            {% if block.block_type == 'heading' %}
+                <h1>{{ block.value }}</h1>
+            {% else %}
+                {% include_block block %}
+            {% endif %}
+          {% endfor %}
+        {% endblock %}
       </div>
-      <div class="sticky-cta">
-        <div id="cta-anchor">
-          {% cta page %}
+
+      {% if page.cta != None %}
+      <div class="cta
+        {% if page.specific.narrowed_page_content == False %}
+          col-lg-4 offset-lg-1
+        {% else %}
+          col-lg-12
+        {% endif %}"
+      >
+        <div class="narrow-sticky-button-container hidden">
+          <a href="#cta-anchor" class="narrow-sticky-button btn">TAKE ACTION</a>
+        </div>
+        <div class="sticky-cta">
+          <div id="cta-anchor">
+            {% cta page %}
+          </div>
         </div>
+        <script src="https://c.shpg.org/352/sp.js"></script>
       </div>
-      <script src="https://c.shpg.org/352/sp.js"></script>
-    </div>
-    {% endif %}
+      {% endif %}
+  </div>
 </div>
 {% endblock %}
 

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

@@ -0,0 +1,10 @@
+{% if uses_menu %}
+<p class="h5-heading hidden-sm-down">{{ mini_site_title }}</p>
+{% endif %}
+<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

@@ -16,43 +16,7 @@
 {% endblock %}
 
 
-{% block heading_classes %}
-  py-5
-  {% if page.specific.narrowed_page_content and uses_menu %}
-    col-md-7
-  {% elif page.specific.narrowed_page_content %}
-    offset-md-2
-    col-md-8
-  {% elif uses_menu %}
-    col-md-9
-  {% else %}
-    col-md-12
-  {% endif %}
-{% endblock %}
-
-
-{% block mini_site_title %}
-  {% if uses_menu %}
-    <p class="h5-heading hidden-sm-down">{{ mini_site_title }}</p>
-  {% endif %}
-{% 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>
-      {% else %}
-        {% include_block block %}
-      {% endif %}
-    {% endfor %}
-  </div>
-{% endblock %}
-
-
 {% block pre_footer_classes %}{% if singleton_page %}col-12 col-lg-10 offset-lg-1{% else %}col-md-12{% endif %}{% endblock %}

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

@@ -28,13 +28,7 @@
 
   <div class="container">
     <div class="row">
-      {% mini_site_sidebar page %}
-
-      <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 subcontent %}{% endblock %}
-      </div>
+      {% block subcontent %}{% endblock %}
     </div>
   </div>
 

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

@@ -3,6 +3,34 @@
 
 {% block signup %}
 	{% if page.cta %}
-        {% cta page %}
+    {% cta page %}
 	{% endif %}
 {% endblock %}
+
+{% block subcontent %}
+  {% mini_site_sidebar page %}
+
+  <div class="py-5
+    {% if page.specific.narrowed_page_content and uses_menu %}
+      col-md-7
+    {% elif page.specific.narrowed_page_content %}
+      offset-md-2
+      col-md-8
+    {% elif uses_menu %}
+      col-md-9
+    {% else %}
+      col-md-12
+    {% endif %}"
+  >
+    {% include "./mini_site_header.html" %}
+    <div class="cms">
+      {% for block in page.body %}
+        {% if block.block_type == 'heading' %}
+          <h1>{{ block.value }}</h1>
+        {% else %}
+          {% include_block block %}
+        {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+{% endblock %}

network-api/networkapi/wagtailpages/templates/wagtailpages/tags/mini_site_horizontal_nav.html

@@ -0,0 +1,12 @@
+{% load wagtailcore_tags %}
+
+{% if menu_pages %}
+<div class="mb-3 hidden-sm-down">
+  <div class="multipage-nav" id="multipage-nav">
+    {% for entry in menu_pages %}
+    <a class="multipage-link colourless-link mr-3 {% if current.title == entry.page.title %}multipage-link-active{% endif %}" href="{% pageurl entry.page %}">{% if entry.depth == 2 %}→ {% endif %}{{ entry.menu_title }}
+    </a>
+    {% endfor %}
+  </div>
+</div>
+{% endif %}

network-api/networkapi/wagtailpages/templatetags/mini_site_tags.py

@@ -22,6 +22,24 @@ def mini_site_sidebar(context, page):
     }
 
 
+# Instantiate a mini-site horizontal nav based on the current page's relation to other pages
+@register.inclusion_tag('wagtailpages/tags/mini_site_horizontal_nav.html', takes_context=True)
+def mini_site_horizontal_nav(context, page):
+    menu_pages = get_menu_pages(context['root'])
+
+    # We need at least 2 pages, or a nav menu is meaningless.
+    if len(menu_pages) < 2:
+        menu_pages = False
+
+    # Return the list of values we need to have our template
+    # generate the appropriate sidebar HTML.
+    return {
+        'singleton_page': context['singleton_page'],
+        'current': page,
+        'menu_pages': menu_pages,
+    }
+
+
 # Render a page's CTA (petition, signup, etc.)
 @register.inclusion_tag('wagtailpages/tags/cta.html', takes_context=True)
 def cta(context, page):

source/sass/type.scss

@@ -60,6 +60,13 @@ a {
     text-decoration: none;
     box-shadow: 0 5px $yellow;
   }
+
+  &.colourless-link {
+    &:hover,
+    &#{$active-class-name} {
+      box-shadow: 0 5px $black;
+    }
+  }
 }
 
 h1,