Add breadcrumbs to docpages

suraj142 · Jul 26, 2014 · a09c395 · a09c395
1 parent f099dfe
commit a09c395
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 9 deletions.
diff --git a/_layouts/docpage.html b/_layouts/docpage.html
@@ -3,7 +3,20 @@
 ---
 <div class="row">
   <div class="small-12 columns">
-    <a id="toc-dropdown-button" class="tiny secondary button dropdown" href="#" data-dropdown="toc-dropdown">Table of contents</a>
+    <ul class="breadcrumbs">
+      {% assign breadcrumbs = page.url | split: '/' %}
+      {% assign url = '' %}
+      {% for crumb in breadcrumbs offset:1 %}
+        {% capture url %}{{ url }}/{{ crumb }}{% endcapture %}
+        {% assign title = crumb | replace: "-", " " %}
+        <li class="{% if forloop.last %}current{% endif %}">{% if forloop.first %}<span class="here-note">You are here: </span>{% endif %}{% if forloop.last == false %}<a href="{{ site.github.url }}{{ url }}/">{{ title }}</a>{% else %}{{ title }}{% endif %}</li>
+      {% endfor %}
+      <li class="toc right hidden-for-small-only">
+        <a id="toc-dropdown-button-inline" class="tiny secondary button dropdown" href="#" data-dropdown="toc-dropdown">Table of contents</a>
+      </li>
+    </ul>
+
+    <a id="toc-dropdown-button-separate" class="show-for-small-only tiny secondary button dropdown" href="#" data-dropdown="toc-dropdown">Table of contents</a>
     <ul id="toc-dropdown" data-dropdown-content class="medium f-dropdown"></ul>
   </div>
 </div>
@@ -41,13 +54,6 @@ <h1 id="page-title">{{ page.title }}</h1>
 
 function addToc() {
   var headings = $("h1, h2, h3, h4");
-
-  // hide TOC if there aren't enough headings on the page
-  if (headings.length <= 2) {
-    $("#toc-dropdown-button").hide();
-    return;
-  }
-
   var toc = $("#toc-dropdown");
 
   // add each heading to the TOC

diff --git a/css/main.css b/css/main.css
@@ -143,9 +143,55 @@ h6:hover .header-link {
   margin: 0 auto -100px;
 }
 
-#toc-dropdown-button {
+ul.breadcrumbs {
+  margin-top: 5px;
+  margin-bottom: 0px;
+  padding-top: 0px;
+  padding-bottom: 5px;
+}
+
+ul.breadcrumbs > *:before {
+  margin-right: 0.4rem;
+  margin-left: 0.4rem;
+}
+
+ul.breadcrumbs li {
+  margin-top: 12px;
+  margin-bottom: 5px;
+}
+
+ul.breadcrumbs li.toc {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+ul.breadcrumbs li.toc:before{
+  display: none;
+}
+
+ul.breadcrumbs li.toc a:hover {
+  text-decoration: none;
+}
+
+ul.breadcrumbs .here-note {
+  text-transform: none;
+  color: #000;
+}
+
+#toc-dropdown-button-inline {
+  padding: 5px 20px 5px 5px;
+  margin-top: 5px;
+  margin-bottom: 0px;
+}
+
+#toc-dropdown-button-inline:after {
+  right: 5px;
+}
+
+#toc-dropdown-button-separate {
   margin-top: 10px;
   margin-bottom: 0px;
+  text-transform: uppercase;
 }
 
 #toc-dropdown li.toc-indent-h2 {