bug 914634 - New navigation with mobile styles

app.js

@@ -10,7 +10,8 @@ var express = require( "express" ),
     nunjucks = require( "nunjucks" ),
     path = require( "path" ),
     lessMiddleWare = require( "less-middleware" ),
-    i18n = require( "webmaker-i18n" );
+    i18n = require( "webmaker-i18n" ),
+    navigation = require( "./navigation" );
 
 habitat.load();
 
@@ -28,6 +29,22 @@ nunjucksEnv.addFilter("instantiate", function(input) {
     return tmpl.render(this.getVariables());
 });
 
+// For navigation
+nunjucksEnv.addFilter("getSection", function (pageId) {
+  var section;
+  var page;
+  for (var i in navigation) {
+    section = navigation[i];
+    for (var j in section.pages) {
+      page = section.pages[j];
+      if (page.id === pageId) {
+        return section.id;
+      }
+    }
+  }
+  return "";
+});
+
 if ( !( env.get( "MAKE_ENDPOINT" ) && env.get( "MAKE_PRIVATEKEY" ) && env.get( "MAKE_PUBLICKEY" ) ) ) {
   throw new Error( "MakeAPI Config setting invalid or missing!" );
 }
@@ -187,7 +204,8 @@ app.use(function( req, res, next ) {
     email: req.session.email || '',
     username: req.session.username|| '',
     makerID: req.session.id || '',
-    csrf: req.session._csrf
+    csrf: req.session._csrf,
+    navigation: navigation
   });
   next();
 });

locale/en_US/messages.json

@@ -114,6 +114,7 @@
   "Events": "Events",
   "Expand your network.": "Expand your network.",
   "Explore our mentoring program": "Explore our mentoring program",
+  "Explore": "Explore",
   "Familiarize yourself with our survey": "Familiarize yourself with our <a href='http://mzl.la/survey-summer2013' target='_blank'>survey</a>.",
   "Featured": "Featured",
   "Feedback": "Feedback",
@@ -131,6 +132,7 @@
   "From June 15 to September 15": "From June 15 to September 15, thousands of people around the world are meeting up, making cool stuff and teaching others at the 2013 Maker Party. Come celebrate with people across the globe to make and learn new things on the web. It doesn't matter where you are in the world; friends, families, and individuals everywhere are uniting to celebrate what we can make (and break!) on the web. Here's how you can participate:",
   "From newsletters to community calls": "From newsletters to community calls, there are many ways you can join our community.",
   "From starter make": "From starter make",
+  "Gallery": "Gallery",
   "Get gear.": "Get gear.",
   "Get Involved Desc": "Access support and connect with the Webmaker community.",
   "Get involved with Webmaker.": "Get involved with Webmaker.",
@@ -166,6 +168,7 @@
   "If you don’t see the Whiteboard field": "If you don’t see the Whiteboard field, make sure the advanced options are showing.",
   "indexDesc": "We're a global community that creates the web by making, teaching and remixing. Check out this week's most inspiring Makes and <a href='/{{localeInfo.lang}}/login'>sign up</a> to create your own.",
   "indexHeader": "Make Something with Webmaker.",
+  "Info": "Info",
   "Introduce your community to hacking": "Introduce your community to hacking",
   "Join our community call": "Join our community calls every Tuesday. All are welcome! Ask questions, meet our community and staff and find the resources you need.",
   "Join our global conversation forum.": "Join our global conversation forum.",
@@ -290,9 +293,12 @@
   "Remix a project": "Remix a make",
   "Remix": "Remix",
   "Remixed from": "Remixed from",
+  "Resource Templates": "Resource Templates",
+  "Resources": "Resources",
   "Save": "Save",
   "Say hello on a Webmaker cummunity call": "Say hello on a <a href='//wiki.mozilla.org/Webmakers/Community_Calls'>Webmaker Community call</a>.",
   "School, library": "At a school, library or flexible space",
+  "Search makes": "Search makes",
   "Search": "Search",
   "See how above": "See how <a href='#submit-a-bug'>above</a>.",
   "see how it works": "We've built everything so you can see how it works, take it apart and remix it.",
@@ -354,6 +360,7 @@
   "teachtemplateKitDesc": "Create a lesson plan or session outline",
   "TeachTemplates": "Teach Templates",
   "Team up to explore": "Team up people with different skill-sets to explore an interesting challenge",
+  "Templates": "Templates",
   "The fastest way to get help": "The fastest way to get help, offer help and connect with other mentors.",
   "The web is still open.": "The web is still open.",
   "The worldwide Maker Party will bring people together": "From coding your first line of HTML to building innovative apps, Maker Party is your chance to connect with a global community of creators. The easiest way to join the party is to build something yourself! Take a project from scratch or remix a project and make it your own.",
@@ -380,6 +387,7 @@
   "Users": "Users",
   "vdo-profile": "a video profile to introduce yourself to the world",
   "Video remixing and open source for youth": "Video remixing and open source for youth",
+  "Videos with Popcorn": "Videos with Popcorn",
   "View Events": "Start Making",
   "Visit our communications wiki": "Visit our <a href='//wiki.mozilla.org/Webmakers/Communications'>communications wiki</a> to find even more places you can reach us.",
   "Wait, there's more!": "Wait, there's more!",
@@ -394,6 +402,7 @@
   "Webmaker uses Persona, a secure way to sign in.": "Webmaker uses Persona, a secure way to sign in.",
   "Webmaker's mentor community": "Webmaker's mentor community spans the entire globe. Connect with other techies, educators and mentors to exchange ideas and creative new ways for teaching technology.",
   "Webmaking made easy": "Webmaking made easy",
+  "Webpages with Thimble": "Webpages with Thimble",
   "Welcome to Webmaker-Mozilla": "Welcome to Webmaker &mdash; a <a href='https://www.mozilla.org/en-US/mission/'>Mozilla</a> project dedicated to helping you create something amazing on the <a href='/{{localeInfo.lang}}'>web</a>.",
   "What are you looking for?": "What are you looking for?",
   "when we understand the building blocks": "After all, it's only when we understand the building blocks of the web that we can have a hand in shaping its future.",

navigation.json

@@ -0,0 +1,106 @@
+[
+  {
+    "id": "explore",
+    "title": "Explore",
+    "icon": "icon-random",
+    "pages": [
+      {
+        "id": "index",
+        "title": "Gallery",
+        "url": ""
+      },
+      {
+        "id": "tools",
+        "title": "Tools",
+        "url": "tools"
+      }
+    ]
+  },
+  {
+    "id": "make",
+    "title": "Make",
+    "icon": "icon-hand-up",
+    "pages": [
+      {
+        "id": "starterMakes",
+        "title": "Starter Makes",
+        "url": "starter-makes"
+      },
+      {
+        "id": "popcorn",
+        "title": "Videos with Popcorn",
+        "url": "https://popcorn.webmaker.org",
+        "external": "true"
+      },
+      {
+        "id": "thimble",
+        "title": "Webpages with Thimble",
+        "url": "https://thimble.webmaker.org",
+        "external": "true"
+      },
+      {
+        "id": "xray",
+        "title": "Remixes with X-Ray Goggles",
+        "url": "https://goggles.webmaker.org",
+        "external": "true"
+      }
+    ]
+  },
+  {
+    "id": "teach",
+    "title": "Teach",
+    "icon": "icon-book",
+    "pages": [
+      {
+        "id": "teach",
+        "title": "Resources",
+        "url": "teach"
+      },
+      {
+        "id": "teach-templates",
+        "title": "Resource Templates",
+        "url": "teach-templates"
+      }
+    ]
+  },
+  {
+    "id": "events",
+    "title": "Events",
+    "icon": "icon-map-marker",
+    "pages": [
+      {
+        "id": "events",
+        "title": "Events",
+        "url": "events"
+      },
+      {
+        "id": "party",
+        "title": "Maker Party",
+        "url": "party"
+      }
+    ]
+  },
+  {
+    "id": "info",
+    "title":  "Info",
+    "icon": "icon-info",
+    "pages": [
+      {
+        "id": "about",
+        "title": "About Us",
+        "url": "about"
+      },
+      {
+        "id": "getinvolved",
+        "title": "Get Involved",
+        "url": "getinvolved"
+      },
+      {
+        "id": "help",
+        "title": "Help",
+        "url": "https://support.mozilla.org/en-US/products/webmaker",
+        "external": "true"
+      }
+    ]
+  }
+]

public/css/breakpoints.less

@@ -2,5 +2,6 @@
 
 @width-small: 320px;
 @width-medium: 640px;
+@medium: 768px;
 @width-large: 960px;
 @width-xlarge: 1540px;

public/css/colors.less

@@ -13,3 +13,4 @@
 @midgrey: #ddd;
 @white: #fff;
 @black: #000;
+@navy: #013E5F;