From 33d47771019f17dbf21b3afdb0c3e934c3b67e1c Mon Sep 17 00:00:00 2001
From: oupala <oupala@users.noreply.github.com>
Date: Tue, 28 May 2019 14:59:25 +0200
Subject: [PATCH 1/2] feat: add a breadcrumb

Add a breadcrumb to tell the user where he is in the tree. js and html is there and working. It needs some css styling though.
---
 apaxy/theme/apaxy.js    | 26 ++++++++++++++++++++++++++
 apaxy/theme/header.html |  3 +++
 2 files changed, 29 insertions(+)

diff --git a/apaxy/theme/apaxy.js b/apaxy/theme/apaxy.js
index f6ea87d..b2e70c6 100644
--- a/apaxy/theme/apaxy.js
+++ b/apaxy/theme/apaxy.js
@@ -74,3 +74,29 @@ if (uri.substring(uri.length - 1) !== '/') {
 	});
 
 })(document);
+
+// generate a breadcrumb
+var uri = window.location.pathname.substr(1);
+var arr = uri.split('/');
+var url = ""
+var bread = '<li><strong><a href="/">Home</a></strong></li>';
+var cont = 1;
+arr.forEach(function(value){
+        url = url + '/' + value;
+        if(value != ''){
+            if(arr.length == cont+1)
+                bread += "<li class='active'>"+decodeURI(value)+"</li>";
+            else
+                bread += "<li><a href='"+url+"'>"+decodeURI(value)+"</a></li>";
+        }
+        cont++;
+});
+document.getElementById("breadcrumbs").innerHTML = bread;
+if (uri.substring(uri.length-1) != '/'){
+        var indexes = document.getElementsByClassName('indexcolname'),
+        i = indexes.length;
+        while (i--){
+            var a = indexes[i].getElementsByTagName('a')[0];
+            a.href =  uri + '/' + a.getAttribute('href',2);
+        }
+}
diff --git a/apaxy/theme/header.html b/apaxy/theme/header.html
index 08db323..297a9f0 100644
--- a/apaxy/theme/header.html
+++ b/apaxy/theme/header.html
@@ -1,4 +1,7 @@
 <div class="wrapper">
 <!-- we open the `wrapper` element here, but close it in the `footer.html` file -->
 
+<ol class="breadcrumb" id="breadcrumbs">
+</ol>
+
 <input type="search" id="filter" placeholder="filter contents" />

From 4d61aab05870b4ecdba98134e95afdd7af0b78d6 Mon Sep 17 00:00:00 2001
From: oupala <oupala@users.noreply.github.com>
Date: Wed, 29 May 2019 14:31:44 +0200
Subject: [PATCH 2/2] feat: css styling for breadcrumb

Add cdd styling inspired from the following website:

https://css-tricks.com/triangle-breadcrumbs/
---
 apaxy/theme/apaxy.js    |  2 +-
 apaxy/theme/header.html |  2 +-
 apaxy/theme/style.css   | 50 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/apaxy/theme/apaxy.js b/apaxy/theme/apaxy.js
index b2e70c6..608b377 100644
--- a/apaxy/theme/apaxy.js
+++ b/apaxy/theme/apaxy.js
@@ -91,7 +91,7 @@ arr.forEach(function(value){
         }
         cont++;
 });
-document.getElementById("breadcrumbs").innerHTML = bread;
+document.getElementById("breadcrumb").innerHTML = bread;
 if (uri.substring(uri.length-1) != '/'){
         var indexes = document.getElementsByClassName('indexcolname'),
         i = indexes.length;
diff --git a/apaxy/theme/header.html b/apaxy/theme/header.html
index 297a9f0..1c30e70 100644
--- a/apaxy/theme/header.html
+++ b/apaxy/theme/header.html
@@ -1,7 +1,7 @@
 <div class="wrapper">
 <!-- we open the `wrapper` element here, but close it in the `footer.html` file -->
 
-<ol class="breadcrumb" id="breadcrumbs">
+<ol class="breadcrumb" id="breadcrumb">
 </ol>
 
 <input type="search" id="filter" placeholder="filter contents" />
diff --git a/apaxy/theme/style.css b/apaxy/theme/style.css
index 2415c5f..7aa1103 100644
--- a/apaxy/theme/style.css
+++ b/apaxy/theme/style.css
@@ -253,3 +253,53 @@ tr.parent a[href^="/"] {
 .errorCode {
 	font-size: 80px;
 }
+
+/*------------------------------------*\
+    Breadcrumb
+\*------------------------------------*/
+
+.breadcrumb {
+    white-space: nowrap;
+    padding: 0;
+    margin: 0;
+}
+.breadcrumb li {
+    display: inline-block;
+    line-height: 26px;
+    margin: 0 9px 0 -10px;
+    padding: 0 15px;
+    position: relative;
+}
+.breadcrumb li::before,
+.breadcrumb li::after {
+    border-right: 1px solid #666666;
+    content: '';
+    display: block;
+    height: 50%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: -1;
+    transform: skewX(45deg);
+}
+.breadcrumb li::after {
+    bottom: 0;
+    top: auto;
+    transform: skewX(-45deg);
+}
+
+.breadcrumb li:last-of-type::before,
+.breadcrumb li:last-of-type::after {
+    display: none;
+}
+
+.breadcrumb li a {
+   letter-spacing: -1px;
+   text-decoration: none;
+}
+
+.breadcrumb li:nth-of-type(1) a { color: hsl(0, 0%, 70%); }
+.breadcrumb li:nth-of-type(2) a { color: hsl(0, 0%, 65%); }
+.breadcrumb li:nth-of-type(3) a { color: hsl(0, 0%, 50%); }
+.breadcrumb li:nth-of-type(4) a { color: hsl(0, 0%, 45%); }