Skip to content

Commit

Permalink
Bring clarity to campaign and opportunity page navigation (#1067)
Browse files Browse the repository at this point in the history 
* DRY-ing out with shared base for campaigns and opportunities

* adding superheader

* hide superheader for mobile; show only siblings in sidebar

* move signup to landingpage only

* simplifying logic; cleaning layout

* widening single column layout
  • Loading branch information
@gvn
gvn authored Feb 16, 2018
1 parent 29d53b1 commit c78ab75
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 109 deletions.
55 changes: 55 additions & 0 deletions network-api/networkapi/templates/pages/campaign-opportunity-base.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{% extends "./base-compiled.html" %}

{% block bodyID %}{{ suffix }}{% endblock %}

{% block content %}
<div class="container">
<div class="row">
<div class="py-5 {% if page.parent.title != parentTitle %}col-12 col-md-8 offset-md-3{% else %}col-12 col-lg-10 offset-lg-1{% endif %}">
{% if page.parent.title != parentTitle %}
<p class="h5-black">{{ page.parent.title }}</p>
{% endif %}
<h1 class="h1-white {% if page.parent.title != parentTitle %}hidden-sm-down{% endif %}">{% block h1 %}{% endblock %}</h1>
</div>
</div>
</div>
<div class="hidden-md-up mb-5" id="multipage-nav-mobile">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</div>
<div class="container">
<div class="row mb-5">
{% if page.parent.title != parentTitle %}
<div class="col-12 col-md-3 mb-3 hidden-sm-down">
<div class="multipage-nav" id="multipage-nav">
{% load pages_tags %}
{% page_menu "pages/menus/side-menu-items.html" %}
</div>
</div>
{% endif %}

{% block subcontent %}
<div class="{% if page.parent.title != parentTitle %}col-12 col-md-9{% else %}col-12 col-lg-10 offset-lg-1{% endif %}">
<div class="row">
<div class="cms col-12">{{ page.landingpage.content | safe }}</div>
</div>
</div>
{% endblock %}
</div>


<div class="row mb-5">
<div class="{% if page.parent.title != parentTitle %}col-md-12{% else %}col-12 col-lg-10 offset-lg-1{% endif %}">
{% block signup %}{% endblock %}
<hr class="my-2">
<div class="opp-foot d-flex align-items-center"><img class="mr-3" src="/_images/green-20.svg" width="51" height="45">
<p class="body-black mb-0">This is part of a broader movement for a healthy internet. <a href="/">See more</a>.</p>
</div>
<hr class="my-2">
</div>
</div>
</div>
{% endblock %}
85 changes: 28 additions & 57 deletions network-api/networkapi/templates/pages/campaign.html
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,35 @@
{% extends "./base-compiled.html" %}
{% extends "./campaign-opportunity-base.html" %}

{% block bodyID %}campaign{% endblock %}
{% block content %}
<div class="container">
{% block bodyID %}{% with suffix="campaign" %}{{ block.super }}{% endwith %}{% endblock %}

{% block content %}{% with parentTitle="Campaigns" %}{{ block.super }}{% endwith %}{% endblock %}

{% block h1 %}{{ page.campaign.header }}{{ block.super }}{% endblock %}

{% block subcontent %}
<div class="{% if page.parent.title != "Campaigns" or page.children.all.count > 0 %}col-12 col-md-9{% else %}col-12 col-lg-10 offset-lg-1{% endif %}">
<div class="row">
<div class="py-5 {% if page.parent.title != "Campaigns" or page.children.all.count > 0 %}col-12 col-md-8 offset-md-3{% else %}col-12 col-lg-10 offset-lg-1{% endif %}">
<h1 class="h1-white">{{ page.campaign.header }}</h1>
<div class="cms {% if page.campaign.petition and page.parent.title != "Campaigns" or page.children.all.count > 0 %}col-12{% else %}col-md-6{% endif %}">{{ page.campaign.content | safe }}</div>
{% if page.campaign.petition and page.parent.title != "Campaigns" or page.children.all.count > 0 %}
</div>
</div>
</div>
<div class="hidden-md-up mb-5" id="multipage-nav-mobile">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</div>
<div class="container">
<div class="row mb-5">{% if page.parent.title != "Campaigns" or page.children.all.count > 0 %}
<div class="col-12 col-md-3 mb-3 hidden-sm-down">
<div class="multipage-nav" id="multipage-nav">
{% load pages_tags %}
{% page_menu "pages/menus/side-menu-items.html" %}
</div>
</div>{% endif %}
<div class="{% if page.parent.title != "Campaigns" or page.children.all.count > 0 %}col-12 col-md-9{% else %}col-12 col-lg-10 offset-lg-1{% endif %}">
<div class="row">
<div class="cms {% if page.campaign.petition and page.parent.title != "Campaigns" or page.children.all.count > 0 %}col-12{% else %}col-md-6{% endif %}">{{ page.campaign.content | safe }}</div>
{% if page.campaign.petition and page.parent.title != "Campaigns" or page.children.all.count > 0 %}
</div>
<div class="row">
<div class="col-md-10 col-lg-8 col-xl-7">
{% else %}
<div class="col-md-6">
{% endif %}
{% with page.campaign.petition as petition %}<div
class="sign-petition full-width mb-5"
data-csrf-token="{{ csrf_token }}"
data-petition-id="{{ page.campaign.petition.id }}"
data-cta-header="{{ page.campaign.petition.header | escape }}"
data-cta-description="{{ page.campaign.petition.description | escape }}"
data-newsletter="{{ page.campaign.petition.newsletter }}"
data-checkbox1="{{ page.campaign.petition.checkbox_1 | escape }}"
data-checkbox2="{{ page.campaign.petition.checkbox_2 | escape }}"
data-share-link="{{ page.campaign.petition.share_link }}"
data-share-text="{{ page.campaign.petition.share_link_text }}"
data-thank-you="{{ page.campaign.petition.thank_you }}"
></div>{% endwith %}
</div>
</div>
</div>
</div>

<div class="row mb-5">
<div class="col-12">
<hr class="my-2">
<div class="opp-foot d-flex align-items-center"><img class="mr-3" src="/_images/green-20.svg" width="51" height="45">
<p class="body-black mb-0">This is part of a broader movement for a healthy internet. <a href="/">See more</a>.</p>
</div>
<hr class="my-2">
<div class="col-md-10 col-lg-8 col-xl-7">
{% else %}
<div class="col-md-6">
{% endif %}
{% with page.campaign.petition as petition %}<div
class="sign-petition full-width mb-5"
data-csrf-token="{{ csrf_token }}"
data-petition-id="{{ page.campaign.petition.id }}"
data-cta-header="{{ page.campaign.petition.header | escape }}"
data-cta-description="{{ page.campaign.petition.description | escape }}"
data-newsletter="{{ page.campaign.petition.newsletter }}"
data-checkbox1="{{ page.campaign.petition.checkbox_1 | escape }}"
data-checkbox2="{{ page.campaign.petition.checkbox_2 | escape }}"
data-share-link="{{ page.campaign.petition.share_link }}"
data-share-text="{{ page.campaign.petition.share_link_text }}"
data-thank-you="{{ page.campaign.petition.thank_you }}"
></div>{% endwith %}
</div>
</div>
</div>
Expand Down
57 changes: 11 additions & 46 deletions network-api/networkapi/templates/pages/landingpage.html
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,13 @@
{% extends "./base-compiled.html" %}
{% extends "./campaign-opportunity-base.html" %}

{% block bodyID %}opportunity{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="py-5 {% if page.parent.title != "Opportunity" or page.children.all.count > 0 %}col-12 col-md-8 offset-md-3{% else %}col-12 col-lg-8 offset-lg-2{% endif %}">
<h1 class="h1-white">{{ page.landingpage.header }}</h1>
</div>
</div>
</div>
<div class="hidden-md-up mb-5" id="multipage-nav-mobile">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</div>
<div class="container">
<div class="row mb-5">{% if page.parent.title != "Opportunity" or page.children.all.count > 0 %}
<div class="col-12 col-md-3 mb-3 hidden-sm-down">
<div class="multipage-nav" id="multipage-nav">
{% load pages_tags %}
{% page_menu "pages/menus/side-menu-items.html" %}
</div>
</div>{% endif %}
<div class="{% if page.parent.title != "Opportunity" or page.children.all.count > 0 %}col-12 col-md-9{% else %}col-12 col-lg-8 offset-lg-2{% endif %}">
<div class="row">
<div class="cms col-12">{{ page.landingpage.content | safe }}</div>
</div>
</div>
</div>{% if page.landingpage.signup %}
<div class="row">
<div class="col-12">
<div class="join-us p-2 full-width mb-5" data-cta-header="{{ page.landingpage.signup.header | escape }}" data-cta-description="{{ page.landingpage.signup.description | escape }}" data-newsletter="{{ page.landingpage.signup.newsletter }}"></div>
</div>
</div>{% endif %}
<div class="row mb-5">
<div class="col-12">
<hr class="my-2">
<div class="opp-foot d-flex align-items-center"><img class="mr-3" src="/_images/green-20.svg" width="51" height="45">
<p class="body-black mb-0">This is part of a broader movement for a healthy internet. <a href="/">See more</a>.</p>
</div>
<hr class="my-2">
</div>
</div>
</div>
{% block bodyID %}{% with suffix="opportunity" %}{{ block.super }}{% endwith %}{% endblock %}

{% block content %}{% with parentTitle="Opportunity" %}{{ block.super }}{% endwith %}{% endblock %}

{% block h1 %}{{ page.landingpage.header }}{{ block.super }}{% endblock %}

{% block signup %}
{% if page.landingpage.signup %}
<div class="join-us p-2 full-width mb-5" data-cta-header="{{ page.landingpage.signup.header | escape }}" data-cta-description="{{ page.landingpage.signup.description | escape }}" data-newsletter="{{ page.landingpage.signup.newsletter }}"></div>
{% endif %}
{% endblock %}
10 changes: 4 additions & 6 deletions network-api/networkapi/templates/pages/menus/side-menu-items.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@
{% for page in page_branch %}
{% if page.in_menu %}
{% if page.is_current_or_ascendant or page.is_current_child or page.is_current_sibling and page.branch_level > 1 %}
{% if page.branch_level > 0 %}
{% if page.has_children or page.branch_level > 1 %}
<div>
<a class="multipage-link {% if page.is_current %}multipage-link-active{% endif %}" href="{{ page.get_absolute_url }}">{{ page.title }}</a>
</div>
{% endif %}
{% if page.branch_level > 1 %}
<div>
<a class="multipage-link {% if page.is_current %}multipage-link-active{% endif %}" href="{{ page.get_absolute_url }}">{{ page.title }}</a>
</div>
{% endif %}
{% page_menu page %}
{% endif %}
Expand Down

0 comments on commit c78ab75

Please sign in to comment.