Resources breadcrumbs

app/assets/javascripts/resources.js

@@ -8,9 +8,29 @@ function initializeSelectedCategory(currentUrl, container) {
     var queryString = '*[data-category="' + newSelectedCategory + '"]';
     toggleSelectedClasses(queryString);
     container.isotope({filter: newSelectedCategory});
+    var categoryName = $(queryString + ' > a').text();
+    updateCategoryBreadCrumb(categoryName);
   }
 }
 
+function initializeSelectedTagBreadcrumb(currentUrl) {
+  var indexOfTag = currentUrl.indexOf('resources/tags');
+  if (indexOfTag > -1) {
+    tagNameIndex = indexOfTag + 'resources/tags'.length + 1;
+    var encodedTagName = currentUrl.slice(tagNameIndex);
+    var decodedTagName = decodeURIComponent(encodedTagName);
+    $('#breadcrumb-type').text('Tag');
+    $('#breadcrumb-value').text(decodedTagName);
+    $('.panel-tags li .' + decodedTagName + '-tag-link').addClass('active-tag');
+  }
+
+}
+
+function updateCategoryBreadCrumb(categoryName) {
+    $('#breadcrumb-type').text('Category');
+    $('#breadcrumb-value').text(categoryName);
+}
+
 function toggleSelectedClasses(target) {
   $('.selected').toggleClass('selected');
   $(target).toggleClass('selected');
@@ -20,6 +40,7 @@ function filterSelectedCategory(event, currentUrl, target, container) {
   if (currentUrl.indexOf('resources/tags') < 0) {
     event.preventDefault();
     toggleSelectedClasses(target);
+    updateCategoryBreadCrumb(target.innerText);
     container.isotope({filter: target.dataset.category});
   }
 }
@@ -45,4 +66,4 @@ function incrementLike(event, target) {
   $.ajax(form.attr("action"), {
     type: "POST"
   });
-}
+}

app/assets/stylesheets/resources.css.scss

@@ -27,6 +27,15 @@
       color: $black;
     }
 
+    ul.breadcrumb {
+      margin-left: -75px;
+      width: 130%;
+    }
+
+    ul.breadcrumb li:first-child {
+        margin-left: 40px;
+    }
+
     li.selected {
       position: relative;
       background-color: $yellow;
@@ -125,7 +134,7 @@
         color: $tag_grey;
       }
 
-      li a:hover, li a:focus {
+      li a:hover, li a:focus, li .active-tag {
         background-color: $yellow;
         text-decoration: none;
       }
@@ -183,6 +192,16 @@
 
   @media (min-width: 1090px) and (max-width: 1200px) {
     .resources-sidebar {
+
+      ul.breadcrumb {
+        width: 160%;
+        margin-left: -132px;
+      }
+
+      ul.breadcrumb li:first-child {
+        margin-left: 60px;
+      }
+
       li.selected {
         width: 132%;
         margin-left: -132px;
@@ -201,6 +220,28 @@
       display: none;
     }
 
+    li.breadcrumbs {
+      display: block;
+      padding: 0;
+    }
+
+    li.breadcrumbs,
+    ul.breadcrumb > li {
+      margin: 0;
+      border: 0;
+    }
+
+    ul.breadcrumb,
+    ul.breadcrumb li:first-child {
+      margin-left: 0;
+      width: unset;
+    }
+
+    li.selected a {
+      margin: 0;
+      width: inherit;
+    }
+
     .dropdown {
       display:block;
       margin: 0 auto; 

app/views/resources/index.html.erb

@@ -4,11 +4,17 @@
   <div class="row">
     <div class="resources-sidebar col-md-3">
       <ul>
-        <li class="selected" data-category="*">
+        <li class="breadcrumbs">
+          <ul class="breadcrumb">
+            <li id="breadcrumb-type">Category</li>
+            <li id="breadcrumb-value" class="active">All Resources</li>
+          </ul>
+        </li>
+        <li class="selected resource" data-category="*">
           <%= link_to "All Resources", resources_path %>
         </li>
         <% @categories.each do |category| %>
-          <li data-category="<%= create_filter(category.id) %>">
+          <li class="resource" data-category="<%= create_filter(category.id) %>">
             <%= link_to category.name, resources_path(anchor: category.id) %>
           </li>
         <% end %>
@@ -42,7 +48,7 @@
             <div class="panel-tags">
               <ul>
                 <% resource.tag_list.each do |tag| %>
-                  <li><%= link_to tag, tag_path(tag) %></li>
+                  <li><%= link_to tag, tag_path(tag), class: "#{tag}-tag-link" %></li>
                 <% end %>
               </ul>
             </div>
@@ -81,10 +87,13 @@
     initializeSelectedCategory(currentUrl, $container);
 
     // Filter Selected Category
-    $('.resources-sidebar li').click(function(e) {
+    $('.resources-sidebar li.resource').click(function(e) {
       filterSelectedCategory(e, currentUrl, this, $container);
     });
 
+    // Initialize Selected Tag's breadcrumb
+    initializeSelectedTagBreadcrumb(currentUrl);
+
     // Filter Selected Category For Dropdown Button
     $('.dropdown a').click(function(e) {
       filterSelectedCategory(e, currentUrl, this, $container);