From 6609e254025f8703b5bfdb23409b90926d92b232 Mon Sep 17 00:00:00 2001 From: Mavis Ou Date: Wed, 24 Apr 2019 14:45:20 -0700 Subject: [PATCH] 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 --- .../partials/intro_and_content_divider.html | 5 +++++ .../wagtailpages/bannered_campaign_page.html | 8 +++++++- .../templates/wagtailpages/campaign_page.html | 3 ++- .../fragments/primary_heroguts.html | 20 ++++++++++--------- .../wagtailpages/mini_site_name_space.html | 2 ++ .../templates/wagtailpages/primary_page.html | 2 +- .../wagtailpages/static/initiatives_page.html | 2 +- .../wagtailpages/tags/primary_page_menu.html | 4 +++- .../multipage-nav-mobile.scss | 2 ++ source/sass/components/multipage-nav.scss | 6 ++++-- source/sass/global.scss | 16 +++++++++++++++ source/sass/mixins.scss | 12 +++++++++++ 12 files changed, 66 insertions(+), 16 deletions(-) create mode 100644 network-api/networkapi/templates/partials/intro_and_content_divider.html diff --git a/network-api/networkapi/templates/partials/intro_and_content_divider.html b/network-api/networkapi/templates/partials/intro_and_content_divider.html new file mode 100644 index 00000000000..d30328fc391 --- /dev/null +++ b/network-api/networkapi/templates/partials/intro_and_content_divider.html @@ -0,0 +1,5 @@ +
+
+
+
+
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html index 9c64abdcf76..a073cf0dda1 100644 --- 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 %} -
+
@@ -24,6 +26,10 @@
{% 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 index a02406c7361..5f73bedea0f 100644 --- 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 %} -
+
-
-
-
-

{% if root.title %}{{ root.title }}{% elif page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}

- {% if page.intro %} -

{{ page.intro }}

- {% endif %} -
+
+
+

{% if root.title %}{{ root.title }}{% elif page.header %}{{ page.header }}{% else %}{{ page.title }}{% endif %}

+ {% if page.intro %} +

{{ page.intro }}

+ {% endif %}
+ + {% if singleton_page == True %} + {% include "partials/intro_and_content_divider.html" with wrapper_class="hidden-md-up" %} + {% endif %}
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 index aa073e2677a..2772074d2cb 100644 --- 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 @@
+ {% 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 index 9b8245dece7..e87224a1a60 100644 --- 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 index 26d197e4ce4..886e7f0ff66 100644 --- 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 @@

{{ page.header }}

{% include "partials/multipage-nav-mobile.html" with always_show_mobile_nav=True %} -
+
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 index 1ef5d805194..0adfa11505c 100644 --- 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 %} -
+
@@ -10,4 +10,6 @@
+{% 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 index cd0e7a05cb6..3476185fb7f 100644 --- 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 index f36bf91fbf4..ad199b597ac 100644 --- 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 index e40b9a6b4d9..a9d899409e0 100644 --- 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 index ea77cf7ea0e..651a1fb85ad 100644 --- 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; + } + } +}