Update alignment on Primary & Bannered Campaign Pages (#3025)

* Update alignment on Primary & Bannered Campaign Pages * updated padding * adjusted spacing between cutout area and secondary nav * fix merge conflict & get spacing in between intro and main content area to work * styling cleanup * fixed whitespace * scss improvement * scss improvement * adjusted spacing
MozillaFoundation · Apr 24, 2019 · 6609e25 · 6609e25
1 parent 060d594
commit 6609e25
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 16 deletions.
diff --git a/network-api/networkapi/templates/partials/intro_and_content_divider.html b/network-api/networkapi/templates/partials/intro_and_content_divider.html
@@ -0,0 +1,5 @@
+<div class="container {{wrapper_class}}">
+  <div class="row">
+    <div class="col-12"><hr class="intro-and-content-divider" /></div>
+  </div>
+</div>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html
@@ -7,13 +7,15 @@
   {% include "./fragments/primary_heroguts.html" with root=root page=page %}
 {% endblock %}
 
+{% block content_wrapper_class %}{% endblock %}
+
 {% block campaign_page_header %}{% endblock %}
 {% block campaign_page_menu %}{% endblock %}
 
 Note: Wrapper HTML elements are copied from primary_page_menu.html as we want menu on BanneredCampaignPage to look exactly the same as PrimaryPage's.
 
 {% block minisite_title %}
-  <div id="multipage-nav-wrapper" class="hidden-sm-down full-width mb-4">
+  <div id="multipage-horizontal-nav-wrapper" class="hidden-sm-down full-width">
     <div class="container">
       <div class="row">
         <div class="col-12">
@@ -24,6 +26,10 @@
   </div>
 {% endblock %}
 
+{% block minisite_no_menu %}
+  {% include "partials/intro_and_content_divider.html" with wrapper_class="hidden-sm-down" %}
+{% endblock %}
+
 The following block has been borrowed from the templates/tags/cta/petition.html file,
 rather than using the `cta` tag from our mini_site_tags collection, because the cta
 tag was written in the assumption that models would only ever have a single CTA field

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html
@@ -10,7 +10,8 @@
 {% block donate %}{% endblock %}
 
 {% block subcontent %}
-<div class="py-4 py-md-5
+<div class="
+  {% block content_wrapper_class %}py-4 py-md-5{% endblock %}
   {% if page.specific.narrowed_page_content %}
     offset-md-2
     col-md-8

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/primary_heroguts.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/fragments/primary_heroguts.html
@@ -1,6 +1,6 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
-<div id="hero" class="mb-md-3">
+<div id="hero">
   <div class="banner">
     {% if page.banner %}
     <picture>
@@ -21,15 +21,17 @@
   </div>
 
   <div class="container">
-    <div class="row">
-      <div class="col-12 col-md-8">
-        <div class="cutout p-3 px-md-5 py-md-3">
-          <h1 class="h1-heading">{% if root.title %}{{ root.title }}{% elif page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
-          {% if page.intro %}
-          <p class="body-large mb-0">{{ page.intro }}</p>
-          {% endif %}
-        </div>
+    <div class="row no-gutters">
+      <div class="cutout col-12 col-md-8 pt-4">
+        <h1 class="h1-heading mb-0">{% if root.title %}{{ root.title }}{% elif page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}</h1>
+        {% if page.intro %}
+        <p class="body-large mt-3 mb-0">{{ page.intro }}</p>
+        {% endif %}
       </div>
     </div>
   </div>
+
+  {% if singleton_page == True %}
+    {% include "partials/intro_and_content_divider.html" with wrapper_class="hidden-md-up" %}
+  {% endif %}
 </div>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/mini_site_name_space.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/mini_site_name_space.html
@@ -13,6 +13,8 @@
       </div>
     </div>
   </div>
+  {% else %}
+    {% block minisite_no_menu %}{% endblock %}
   {% endif %}
 {% endblock %}
 

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/primary_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/primary_page.html
@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block content %}
-  {% include "partials/multipage-nav-mobile.html" with wrapper_classes="mb-3 mb-md-5" %}
+  {% include "partials/multipage-nav-mobile.html" %}
 
   {% primary_page_menu page %}
 

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/static/initiatives_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/static/initiatives_page.html
@@ -22,7 +22,7 @@ <h1 class="h1-heading">{{ page.header }}</h1>
 
 <div class="py-4">
   {% include "partials/multipage-nav-mobile.html" with always_show_mobile_nav=True %}
-  <div id="multipage-nav-wrapper" class="hidden-sm-down full-width">
+  <div id="multipage-horizontal-nav-wrapper" class="hidden-sm-down full-width my-0">
     <div class="container">
       <div class="row">
         <div class="col-12">

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/tags/primary_page_menu.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/tags/primary_page_menu.html
@@ -1,7 +1,7 @@
 {% load wagtailcore_tags nav_tags %}
 
 {% if singleton_page == False %}
-<div id="multipage-nav-wrapper" class="hidden-sm-down full-width mb-4">
+<div id="multipage-horizontal-nav-wrapper" class="hidden-sm-down full-width">
   <div class="container">
     <div class="row">
       <div class="col-12">
@@ -10,4 +10,6 @@
     </div>
   </div>
 </div>
+{% else %}
+  {% include "partials/intro_and_content_divider.html" with wrapper_class="hidden-sm-down" %}
 {% endif %}
diff --git a/source/js/components/multipage-nav-mobile/multipage-nav-mobile.scss b/source/js/components/multipage-nav-mobile/multipage-nav-mobile.scss
@@ -1,4 +1,6 @@
 #multipage-nav-mobile {
+  @include intro-and-content-spacing();
+
   .dropdown-nav {
     .expander {
       background: none;

diff --git a/source/sass/components/multipage-nav.scss b/source/sass/components/multipage-nav.scss
@@ -1,4 +1,6 @@
-#multipage-nav-wrapper {
+#multipage-horizontal-nav-wrapper {
+  @include intro-and-content-spacing(true);
+
   &.full-width {
     @media (min-width: $bp-md) {
       border-bottom: 1px solid $gray-20;
@@ -13,7 +15,7 @@
     align-items: stretch;
     border-bottom: 1px $gray-20 solid;
 
-    @at-root #multipage-nav-wrapper.full-width #{&} {
+    @at-root #multipage-horizontal-nav-wrapper.full-width #{&} {
       border: none;
     }
 

diff --git a/source/sass/global.scss b/source/sass/global.scss
@@ -41,8 +41,20 @@ button:hover {
   }
 
   .cutout {
+    $grid-gutter-width: map-get($grid-gutter-widths, xs);
+    $padding-x: #{$grid-gutter-width / 2};
+
     margin-top: calc(#{$bg-pattern-height} - 40px);
     background: white;
+    padding-left: $padding-x;
+    padding-right: $padding-x;
+
+    @media screen and (min-width: $bp-md) {
+      $offset-left: 24px;
+
+      margin-left: -$offset-left;
+      padding-left: $offset-left;
+    }
   }
 }
 
@@ -74,3 +86,7 @@ footer.site-footer {
     }
   }
 }
+
+hr.intro-and-content-divider {
+  @include intro-and-content-spacing(true);
+}
diff --git a/source/sass/mixins.scss b/source/sass/mixins.scss
@@ -76,3 +76,15 @@
     text-decoration: underline;
   }
 }
+
+@mixin intro-and-content-spacing($adjust-spacing-for-md: null) {
+  margin-top: 24px;
+  margin-bottom: 24px;
+
+  @if ($adjust-spacing-for-md) {
+    @media (min-width: $bp-md) {
+      margin-top: 48px;
+      margin-bottom: 48px;
+    }
+  }
+}