Restructure content header

static/src/js/components/breadcrumbs.js

@@ -7,6 +7,9 @@ export default class Breadcrumbs extends React.Component {
   }
 
   render() {
+    if (this.urlParts.length < 2) {
+      return;
+    }
     var elements = [];
     for (var i = 0; i < this.urlParts.length; i++) {
       var dirs = [];

static/src/less/style.less

@@ -128,7 +128,24 @@ footer {
   .box-shadow(0px 8px 10px 3px rgba(0,0,0,0.6));
   margin-bottom: 27px;
   h1 {
-    margin: 25px 0;
+    margin: 15px 0;
+  }
+  .breadcrumb-container {
+    text-align: right;
+    .breadcrumb {
+      li + li::before {
+        content: "/";
+      }
+      background: transparent;
+      margin-bottom: 3px;
+      font-size: 17px;
+      a {
+        color: white;
+        &:hover {
+          color: #ff7f00;
+        }
+      }
+    }
   }
 }
 /* @end content base */

templates/content_base.html

@@ -7,11 +7,15 @@
 {% block baseContent %}
   <div class="jumbotron header">
     <div class="container">
+      <div class="row">
+        <div class="col-sm-8">
           <h1>{% block pageTitle %}{% endblock %}</h1>
         </div>
-    <div class="container">
+        <div class="col-sm-4 breadcrumb-container">
           <div id="breadcrumbs"></div>
         </div>
+      </div>
+    </div>
     <navbar></navbar>
   </div>
   {% block content %}{% endblock %}