Add breadcrumbs & a sidebar with sub navigation & editable region to …

…the backpage template.

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>
 

scss/2-modules/modules-dir.scss

@@ -1 +1,3 @@
-@import 'wvu-hero';
+@import 'wvu-hero';
+@import 'wvu-sub-nav';
+@import 'wvu-breadcrumbs';

scss/3-layouts/layouts-dir.scss

@@ -1,4 +1,5 @@
 @import 'wvu-base';
 @import 'wvu-masthead';
 @import 'wvu-nav';
-@import 'wvu-hero';
+@import 'wvu-hero';
+@import 'wvu-breadcrumbs';

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;

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 -->