From e4baac724bd73818a40001de544f816593f9c948 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Fri, 18 Sep 2015 11:43:35 -0400
Subject: [PATCH] Add breadcrumbs & a sidebar with sub navigation & editable
 region to the backpage template.

---
 mock_data.yml                   |  7 ++-
 scss/2-modules/modules-dir.scss |  4 +-
 scss/3-layouts/layouts-dir.scss |  3 +-
 stylesheets/styles.css          | 89 +++++++++++++++++++++++++++++++++
 views/backpage.html             | 18 ++++++-
 5 files changed, 115 insertions(+), 6 deletions(-)

diff --git a/mock_data.yml b/mock_data.yml
index f6d8c68..be39f2b 100644
--- a/mock_data.yml
+++ b/mock_data.yml
@@ -6,6 +6,9 @@ editable_region:
 
   main: This content comes from the mock_data.yml file in your project's root. Open the file to edit this content.
 
+
+  sidebar: This is an editable region in the sidebar.
+
   wvu-masthead__title:
     Department of English
   news: |
@@ -203,9 +206,9 @@ sub_menu: |
 
 ancestor_menu: |
   <% pages = %w(Page1 Page2 Page3 Page4 Page5) %>
-  <ul>
+  <ul class="nav-secondary">
     <% pages.each do |page| %>
-      <li><%= page %></li>
+      <li><a href="#"><%= page %></a></li>
     <% end %>
   </ul>
 
diff --git a/scss/2-modules/modules-dir.scss b/scss/2-modules/modules-dir.scss
index 32ce4b9..05ab89e 100644
--- a/scss/2-modules/modules-dir.scss
+++ b/scss/2-modules/modules-dir.scss
@@ -1 +1,3 @@
-@import 'wvu-hero';
\ No newline at end of file
+@import 'wvu-hero';
+@import 'wvu-sub-nav';
+@import 'wvu-breadcrumbs';
diff --git a/scss/3-layouts/layouts-dir.scss b/scss/3-layouts/layouts-dir.scss
index 39e5f69..23f8ac0 100644
--- a/scss/3-layouts/layouts-dir.scss
+++ b/scss/3-layouts/layouts-dir.scss
@@ -1,4 +1,5 @@
 @import 'wvu-base';
 @import 'wvu-masthead';
 @import 'wvu-nav';
-@import 'wvu-hero';
\ No newline at end of file
+@import 'wvu-hero';
+@import 'wvu-breadcrumbs';
\ No newline at end of file
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
index 43e9989..2004fb1 100755
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -3034,6 +3034,82 @@ input[type="submit"] {
   }
 }
 
+.wvu-sub-nav ul {
+  font-weight: bold;
+  list-style-type: none;
+  padding-left: 0;
+}
+
+@media (min-width: 48em) {
+  .wvu-sub-nav ul {
+    padding-left: 1em;
+  }
+}
+
+.wvu-sub-nav ul li {
+  line-height: 1.2em;
+  padding-bottom: 0.5em;
+  margin: 0;
+}
+
+.wvu-sub-nav ul li a {
+  text-decoration: none;
+}
+
+.wvu-sub-nav ul li ul {
+  font-weight: normal;
+  font-size: 0.8em;
+  padding: 1em 0 0 0;
+}
+
+.wvu-sub-nav ul li ul li ul {
+  font-size: 1em;
+  padding-left: 0.5em;
+}
+
+@media (min-width: 48em) {
+  .wvu-sub-nav > ul {
+    border-left: 1px solid #eee;
+  }
+}
+
+.wvu-breadcrumbs {
+  width: 100%;
+}
+
+.wvu-breadcrumbs__crumbs {
+  padding: 0.5em 1em;
+  list-style-type: none;
+}
+
+@media (min-width: 75em) {
+  .wvu-breadcrumbs__crumbs {
+    padding: 0.5em 0;
+  }
+}
+
+.wvu-breadcrumbs__crumbs li {
+  float: left;
+  font-size: .8em;
+  margin-right: 0.5em;
+}
+
+.wvu-breadcrumbs__crumbs li:after {
+  content: ' / ';
+}
+
+.wvu-breadcrumbs__crumbs li:last-child:after {
+  content: '';
+}
+
+.wvu-breadcrumbs__list--white {
+  color: white;
+}
+
+.wvu-breadcrumbs__list--white a {
+  color: white;
+}
+
 .wvu-container {
   max-width: 68em;
   margin-left: auto;
@@ -3214,6 +3290,19 @@ input[type="submit"] {
   }
 }
 
+@media (min-width: 48em) {
+  .wvu-breadcrumbs__container {
+    max-width: 68em;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .wvu-breadcrumbs__container::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
+
 .ie9 .wvu-masthead__search-slider {
   position: relative;
   top: 0;
diff --git a/views/backpage.html b/views/backpage.html
index ce04f9b..2021f41 100644
--- a/views/backpage.html
+++ b/views/backpage.html
@@ -2,6 +2,20 @@
 layout: default
 ---
 
+<r:partial name="patterns/wvu-breadcrumbs" />
+
 <div class="wvu-container">
-  <r:editable_region name="main" />
-</div>
+
+  <main class="main">
+    <h1><r:page:name /></h1>
+    <r:editable_region name="main" />
+  </main>
+
+  <aside class="wvu-sidebar">
+    <div class="wvu-sub-nav">
+      <r:ancestor_menu start_depth="2" max_depth="3" ul_class="nav-secondary" active_class="nav-secondary--current-page" open_class="nav-secondary--open" />
+    </div> <!-- /.wvu-sub-nav -->
+    <r:editable_region name="sidebar" />
+  </aside>
+
+</div> <!-- /.wvu-container -->
\ No newline at end of file