From 1c3a7d567d7a7fb2a67b9892ffa161bd9fa05518 Mon Sep 17 00:00:00 2001 From: bri616 Date: Sun, 30 Apr 2017 11:49:55 -0700 Subject: [PATCH 1/3] add breadcrumbs to resources page, also highlight selected tag --- app/assets/javascripts/resources.js | 21 ++++++++++++++++++++- app/assets/stylesheets/resources.css.scss | 8 +++++++- app/views/resources/index.html.erb | 13 ++++++++++++- 3 files changed, 39 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/resources.js b/app/assets/javascripts/resources.js index 6e95670..3141f02 100644 --- a/app/assets/javascripts/resources.js +++ b/app/assets/javascripts/resources.js @@ -8,9 +8,27 @@ function initializeSelectedCategory(currentUrl, container) { var queryString = '*[data-category="' + newSelectedCategory + '"]'; toggleSelectedClasses(queryString); container.isotope({filter: newSelectedCategory}); + var categoryName = $(queryString + ' > a')[0].innerHTML; + 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); + $('#tag-breadcrumb')[0].innerHTML = decodedTagName; + $('.panel-tags li .' + decodedTagName + '-tag-link').addClass('active-tag'); + } + +} + +function updateCategoryBreadCrumb(categoryName) { + $('#category-breadcrumb')[0].innerHTML = categoryName; +} + function toggleSelectedClasses(target) { $('.selected').toggleClass('selected'); $(target).toggleClass('selected'); @@ -20,6 +38,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 +64,4 @@ function incrementLike(event, target) { $.ajax(form.attr("action"), { type: "POST" }); -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/resources.css.scss b/app/assets/stylesheets/resources.css.scss index e80c10e..0ae3c87 100644 --- a/app/assets/stylesheets/resources.css.scss +++ b/app/assets/stylesheets/resources.css.scss @@ -130,7 +130,7 @@ $tag_grey: #808080; color: $tag_grey; } - li a:hover, li a:focus { + li a:hover, li a:focus, li .active-tag { background-color: $yellow; text-decoration: none; } @@ -248,3 +248,9 @@ $tag_grey: #808080; .resource-back { padding-left: 15px; } + +.breadcrumb { + @media (max-width: 990px) and (min-width: 768px) { + margin-top: 55px; + } +} diff --git a/app/views/resources/index.html.erb b/app/views/resources/index.html.erb index f48e6f3..794b2fc 100644 --- a/app/views/resources/index.html.erb +++ b/app/views/resources/index.html.erb @@ -1,6 +1,14 @@ <%= render "layouts/navbar", page: "Resources" %>
+
+
+
    +
  • All Resources
    • +
  • All Tags
    • +
+
+
    @@ -29,7 +37,7 @@
      <% resource.tag_list.each do |tag| %> -
    • <%= link_to tag, tag_path(tag) %>
      • +
    • <%= link_to tag, tag_path(tag), class: "#{tag}-tag-link" %>
      • <% end %>
    @@ -72,6 +80,9 @@ filterSelectedCategory(e, currentUrl, this, $container); }); + // Initialize Selected Tag's breadcrumb + initializeSelectedTagBreadcrumb(currentUrl); + // Return To Top $('#return-to-top').click(function(e) { scrollToTop(e); From b057a024482d7674eaf3c97d816c913b138c5e7d Mon Sep 17 00:00:00 2001 From: bri616 Date: Sun, 30 Apr 2017 11:53:32 -0700 Subject: [PATCH 2/3] add missing semicolon --- app/assets/javascripts/resources.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/resources.js b/app/assets/javascripts/resources.js index 3141f02..a863422 100644 --- a/app/assets/javascripts/resources.js +++ b/app/assets/javascripts/resources.js @@ -14,7 +14,7 @@ function initializeSelectedCategory(currentUrl, container) { } function initializeSelectedTagBreadcrumb(currentUrl) { - var indexOfTag = currentUrl.indexOf('resources/tags') + var indexOfTag = currentUrl.indexOf('resources/tags'); if (indexOfTag > -1) { tagNameIndex = indexOfTag + 'resources/tags'.length + 1; var encodedTagName = currentUrl.slice(tagNameIndex); From 3081a41df8a5a3469769b84e9bf8f263d32f444f Mon Sep 17 00:00:00 2001 From: Bri Date: Sun, 28 Oct 2018 09:56:44 -0700 Subject: [PATCH 3/3] move breadcrumbs over to the left section, show Category / vaue or Tag / value --- app/assets/javascripts/resources.js | 8 +++-- app/assets/stylesheets/resources.css.scss | 44 +++++++++++++++++++---- app/views/resources/index.html.erb | 20 +++++------ 3 files changed, 51 insertions(+), 21 deletions(-) diff --git a/app/assets/javascripts/resources.js b/app/assets/javascripts/resources.js index a863422..639ad4b 100644 --- a/app/assets/javascripts/resources.js +++ b/app/assets/javascripts/resources.js @@ -8,7 +8,7 @@ function initializeSelectedCategory(currentUrl, container) { var queryString = '*[data-category="' + newSelectedCategory + '"]'; toggleSelectedClasses(queryString); container.isotope({filter: newSelectedCategory}); - var categoryName = $(queryString + ' > a')[0].innerHTML; + var categoryName = $(queryString + ' > a').text(); updateCategoryBreadCrumb(categoryName); } } @@ -19,14 +19,16 @@ function initializeSelectedTagBreadcrumb(currentUrl) { tagNameIndex = indexOfTag + 'resources/tags'.length + 1; var encodedTagName = currentUrl.slice(tagNameIndex); var decodedTagName = decodeURIComponent(encodedTagName); - $('#tag-breadcrumb')[0].innerHTML = decodedTagName; + $('#breadcrumb-type').text('Tag'); + $('#breadcrumb-value').text(decodedTagName); $('.panel-tags li .' + decodedTagName + '-tag-link').addClass('active-tag'); } } function updateCategoryBreadCrumb(categoryName) { - $('#category-breadcrumb')[0].innerHTML = categoryName; + $('#breadcrumb-type').text('Category'); + $('#breadcrumb-value').text(categoryName); } function toggleSelectedClasses(target) { diff --git a/app/assets/stylesheets/resources.css.scss b/app/assets/stylesheets/resources.css.scss index 3774e17..e4e08b4 100644 --- a/app/assets/stylesheets/resources.css.scss +++ b/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; @@ -180,6 +189,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; @@ -199,6 +218,23 @@ padding: 0; } + 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; @@ -215,7 +251,7 @@ li.selected:after { content: none; } - } + } .resources-grid { .panel { @@ -244,9 +280,3 @@ .resource-back { padding-left: 15px; } - -.breadcrumb { - @media (max-width: 990px) and (min-width: 768px) { - margin-top: 55px; - } -} diff --git a/app/views/resources/index.html.erb b/app/views/resources/index.html.erb index 794b2fc..f545201 100644 --- a/app/views/resources/index.html.erb +++ b/app/views/resources/index.html.erb @@ -1,22 +1,20 @@ <%= render "layouts/navbar", page: "Resources" %>
    -
    -
    -
      -
    • All Resources
      • -
    • All Tags
      • -
    -
    -
      -
    • +
    • +
        + + +
      +
      • +
    • <%= link_to "All Resources", resources_path %>
      • <% @categories.each do |category| %> -
    • +
    • <%= link_to category.name, resources_path(anchor: category.id) %>
      • <% end %> @@ -76,7 +74,7 @@ initializeSelectedCategory(currentUrl, $container); // Filter Selected Category - $('.resources-sidebar li').click(function(e) { + $('.resources-sidebar li.resource').click(function(e) { filterSelectedCategory(e, currentUrl, this, $container); });