Add side nav and sections nav to /resources subpages

locale/en_US/makerparty.json

@@ -155,6 +155,7 @@
     "Mozilla": "Mozilla",
     "Mozilla Logo": "Mozilla Logo",
     "Mozilla Webmaker Blog": "Mozilla Webmaker Blog",
+    "next section": "next section",
     "NWP Logo": "NWP Logo",
     "Offline Activity Title": "Offline Activity",
     "Offline Activity Desc #1": "<a href='https://keyboardkat.makes.org/thimble/LTIxMDA3NTY0ODA=/lofi-nofi-teaching-kit'>LoFi, NoFi!</a>",
@@ -186,6 +187,7 @@
     "Post-Event": "Post-Event",
     "Post-Event (Getting Started Resources Page) Title": "Post-Event",
     "Post-Event (Getting Started Resources Page) Desc": "Don't forget to thank everyone for coming (even if it's just your little sister) and share your photos on Flickr by adding Maker Party to your Flickr tags. <a href='https://www.flickr.com/search/?w=faves-47833020@N03&q=makerparty'>https://www.flickr.com/search/?w=faves-47833020@N03&q=makerparty</a>. You could also write blog post about your event and share it with the #makerparty hashtag or create a video recap using Popcorn. There are lots of creative ways you can share, and the Maker Party community would love to hear all about it! Seeing your event may encourage even more people to hold small events with their friends and family.",
+    "previous section": "previous section",
     "Privacy Policy Checkbox": "I'm okay with you handling this info as you explain in your <a href='https://www.mozilla.org/privacy/policies/websites/' target='_blank'>privacy policy</a>.",
     "Preparing a Great Slideshow": "<a href='http://developer-evangelism.com/slides.php'>Preparing a Great Slideshow</a>",
     "Press Releases Title": "Press Releases",

public/less/style.less

@@ -986,10 +986,26 @@ footer {
     }
   }
 
-  .resources-side-nav {
+  #resources-side-nav {
+    ul.affix {
+      position: fixed;
+      top: 50px;
+    }
+    ul.affix-top {
+    }
+    ul.affix-bottom {
+    }
+    ul {
+      a {
+        color: fade(@blue,40%);
+      }
+      .active > a {
+        color: fade(@blue,100%);
+      }
+    }
   }
 
-  .resources-main {
+  #resources-main {
     .section {
       padding-top: 30px;
       padding-bottom: 30px;
@@ -1046,6 +1062,41 @@ footer {
       border-bottom: none;
     }
   }
+
+  .subpages-nav {
+    margin-top: 50px;
+    a {
+      color: inherit;
+      margin-top: 15px;
+    }
+    #to-prev {
+      float: left;
+    }
+    #to-next {
+      .text-right;
+      float: right;
+    }
+    .icon {
+      color: @mp-green;
+      float: left;
+      font-size: 35px;
+    }
+    .text {
+      float: left;
+      font-family:"Open Sans Light";
+      margin-left: 10px;
+      margin-right: 10px;
+      .nav-type {
+        color: @mp-grey;
+      }
+      .section-title {
+        font-size: 25px;
+        text-transform: capitalize;
+        line-height: 1;
+        color: @blue;
+      }
+    }
+  }
 }
 
 

views/layout-resources.html

@@ -22,16 +22,48 @@
     <div class="container">
       <div class="row">
         <div class="col-md-2">
-          <div class="resources-side-nav">
-          {% block resourcesSideNav %}
-          {% endblock %}
+          <div class="hidden-xs hidden-sm" id="resources-side-nav">
+            <ul class="nav" data-spy="affix" data-offset-top="400">
+              {% block resourcesSideNav %}
+              {% endblock %}
+            </ul>
           </div>
         </div>
         <div class="col-md-10">
-          <div class="resources-main">
+
+          <div id="resources-main">
           {% block resourcesMain %}
           {% endblock %}
           </div>
+
+          <div class="subpages-nav">
+          {% block subpagesNav %}
+            <div class="row">
+              <div class="col-md-6">
+                {% if prevSection == true %}
+                <a id="to-prev" {% if prevSectionLink %}href="{{ prevSectionLink }}"{% endif %}>
+                  <div class="icon"><i class="fa fa-chevron-circle-left"></i></div>
+                  <div class="text">
+                    <div class="nav-type">{{ gettext("previous section") }}</div>
+                    <div class="section-title">{% if prevSectionTitle %}{{ gettext(prevSectionTitle) }}{% endif %}</div>
+                  </div>
+                </a>
+                {% endif %}
+              </div>
+              <div class="col-md-6">
+                {% if nextSection == true %}
+                <a id="to-next" {% if nextSectionLink %}href="{{ nextSectionLink }}"{% endif %}>
+                  <div class="text">
+                    <div class="nav-type">{{ gettext("next section") }}</div>
+                    <div class="section-title">{% if nextSectionTitle %}{{ gettext(nextSectionTitle) }}{% endif %}</div>
+                  </div>
+                  <div class="icon"><i class="fa fa-chevron-circle-right"></i></div>
+                </a>
+                {% endif %}
+              </div>
+            </div>
+          {% endblock %}
+          </div>
         </div>
       </div>
     </div>

views/layout.html

@@ -25,7 +25,8 @@
   <script src="https://stuff.webmaker.org/webmaker-rid/webmaker-rid.js" async></script>
 </head>
 
-<body class="{% if page %}{{ page }}{% endif %} {% if resoucesSubpage %}resources-subpage{% endif %}">
+<body class="{% if page %}{{ page }}{% endif %} {% if resoucesSubpage %}resources-subpage{% endif %}"
+      {% if resoucesSubpage %} data-spy="scroll" data-target="#resources-side-nav"{% endif %}>
   <div>
     <!-- Primary nav -->
     <nav class="navbar navbar-default navbar-webmaker navbar-makerparty">
@@ -195,7 +196,9 @@
 
   <script src="/bower_components/jquery/dist/jquery.min.js"></script>
   <script src="/bower_components/jquery-colorbox/jquery.colorbox-min.js"></script>
+  <script src="/bower_components/bootstrap/js/affix.js"></script>
   <script src="/bower_components/bootstrap/js/collapse.js"></script>
+  <script src="/bower_components/bootstrap/js/scrollspy.js"></script>
   <script src="http://mozorg.cdn.mozilla.net/tabzilla/tabzilla.js"></script>
   {% block customScripts %}{% endblock %}
   <script src="/js/ui.js"></script>

views/resources-getting-started-resources.html

@@ -1,6 +1,12 @@
 {% extends "views/layout-resources.html" %}
 {% set page = "resources" %}
 {% set resoucesSubpage = "getting-started-resources" %}
+{% set prevSection = true %}
+{% set prevSectionLink = '/resources/getting-started' %}
+{% set prevSectionTitle = 'Getting Started' %}
+{% set nextSection = true %}
+{% set nextSectionLink = '/resources/planning-your-event' %}
+{% set nextSectionTitle = 'Planning Your Event' %}
 
 {% block title %} Maker Party - Resources {% endblock %}
 
@@ -20,11 +26,17 @@
 {% endblock %}
 
 {% block resourcesSideNav %}
+  <li><a href="#Tips-for-Small-Events">{{ gettext("Tips for Small Events Title") }}</a></li>
+  <li><a href="#Tools-to-Teach-the-Web">{{ gettext("Tools to Teach the Web Title") }}</a></li>
+  <li><a href="#Web-Literacy-Map">{{ gettext("Web Literacy Map Title") }}</a></li>
+  <li><a href="#Webmaker-Training">{{ gettext("Webmaker Training Title") }}</a></li>
+  <li><a href="#Community-Resources">{{ gettext("Community Resources Title") }}</a></li>
+  <li><a href="#Requesting-Support">{{ gettext("Requesting Support Title") }}</a></li>
 {% endblock %}
 
 {% block resourcesMain %}
   <!-- New section =================== -->
-  <div class="section">
+  <div class="section" id="Tips-for-Small-Events">
     <div class="row intro">
       <div class="col-md-12">
         <h2>{{ gettext("Tips for Small Events Title") }}</h2>
@@ -68,7 +80,7 @@
   </div>
 
   <!-- New section =================== -->
-  <div class="section">
+  <div class="section" id="Tools-to-Teach-the-Web">
     <div class="row intro">
       <div class="col-md-12">
         <h2>{{ gettext("Tools to Teach the Web Title") }}</h2>
@@ -104,7 +116,7 @@
   </div>
 
   <!-- New section =================== -->
-  <div class="section">
+  <div class="section" id="Web-Literacy-Map">
     <div class="row intro">
       <div class="col-md-12">
         <h2>{{ gettext("Web Literacy Map Title") }}</h2>
@@ -114,7 +126,7 @@
   </div>
 
   <!-- New section =================== -->
-  <div class="section">
+  <div class="section" id="Webmaker-Training">
     <div class="row intro">
       <div class="col-md-12">
         <h2>{{ gettext("Webmaker Training Title") }}</h2>
@@ -124,7 +136,7 @@
   </div>
 
   <!-- New section =================== -->
-  <div class="section">
+  <div class="section" id="Community-Resources">
     <div class="row intro">
       <div class="col-md-12">
         <h2>{{ gettext("Community Resources Title") }}</h2>
@@ -167,7 +179,7 @@
   </div>
 
   <!-- New section =================== -->
-  <div class="section">
+  <div class="section" id="Requesting-Support">
     <div class="row intro">
       <div class="col-md-12">
         <h2>{{ gettext("Requesting Support Title") }}</h2>

views/resources-getting-started.html

@@ -1,6 +1,10 @@
 {% extends "views/layout-resources.html" %}
 {% set page = "resources" %}
 {% set resoucesSubpage = "getting-started" %}
+{% set prevSection = false %}
+{% set nextSection = true %}
+{% set nextSectionLink = '/resources/getting-started-resources' %}
+{% set nextSectionTitle = 'Getting Started Resources' %}
 
 {% block title %} Maker Party - Resources {% endblock %}
 
@@ -19,8 +23,6 @@
 {% block callout %}
 {% endblock %}
 
-{% block resourcesSideNav %}
-{% endblock %}
 
 {% block resourcesMain %}
   <!-- New section =================== -->

views/resources-planning-your-event.html

@@ -1,6 +1,12 @@
 {% extends "views/layout-resources.html" %}
 {% set page = "resources" %}
 {% set resoucesSubpage = "planning-your-event" %}
+{% set prevSection = true %}
+{% set prevSectionLink = '/resources/getting-started-resources' %}
+{% set prevSectionTitle = 'Getting Started Resources' %}
+{% set nextSection = true %}
+{% set nextSectionLink = '/resources/running-your-event' %}
+{% set nextSectionTitle = 'Running Your Event' %}
 
 {% block title %} Maker Party - Resources {% endblock %}
 

views/resources-post-event.html

@@ -1,6 +1,10 @@
 {% extends "views/layout-resources.html" %}
 {% set page = "resources" %}
 {% set resoucesSubpage = "post-event" %}
+{% set prevSection = true %}
+{% set prevSectionLink = '/resources/running-your-event' %}
+{% set prevSectionTitle = 'Running Your Event' %}
+{% set nextSection = false %}
 
 {% block title %} Maker Party - Resources {% endblock %}
 

views/resources-running-your-event.html

@@ -1,6 +1,12 @@
 {% extends "views/layout-resources.html" %}
 {% set page = "resources" %}
 {% set resoucesSubpage = "running-your-event" %}
+{% set prevSection = true %}
+{% set prevSectionLink = '/resources/planning-your-event' %}
+{% set prevSectionTitle = 'Planning Your Event' %}
+{% set nextSection = true %}
+{% set nextSectionLink = '/resources/post-event' %}
+{% set nextSectionTitle = 'Post-Event' %}
 
 {% block title %} Maker Party - Resources {% endblock %}