ui: Redesign navigation

We get rid of the breadcrumbs in favour of items always present in the
top navigation bar.

Based on Bélen's new design iteration.

v2: Rebase onto master

Signed-off-by: Damien Lespiau <damien.lespiau@intel.com>
Signed-off-by: Stephen Finucane <stephen.finucane@intel.com>

6 files changed, 35 insertions, 43 deletions

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index e86a88a..123d940 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -30,22 +30,6 @@ pre {
 	color: #999;
 }
 
-#breadcrumb {
-	float: left
-	width: 100%;
-	border-bottom: 0.1em solid #ddd;
-	padding: 0.2em 1em;
-	color: #a0a0a0;
-}
-
-#breadcrumb-left {
-	float: left;
-}
-
-#breadcrum-right {
-	float: right;
-}
-
 #content {
 	padding: 1em;
 }
diff --git a/patchwork/templates/patchwork/bundles.html b/patchwork/templates/patchwork/bundles.html
index 029379d..35235fb 100644
--- a/patchwork/templates/patchwork/bundles.html
+++ b/patchwork/templates/patchwork/bundles.html
@@ -4,6 +4,7 @@
 
 {% block title %}Bundles{% endblock %}
 {% block heading %}Bundles{% endblock %}
+{% block bundle_active %}active{% endblock %}
 
 {% block body %}
 
diff --git a/patchwork/templates/patchwork/list.html b/patchwork/templates/patchwork/list.html
index f4650ae..df25bb5 100644
--- a/patchwork/templates/patchwork/list.html
+++ b/patchwork/templates/patchwork/list.html
@@ -5,7 +5,7 @@
 
 {% block title %}{{project.name}}{% endblock %}
 {% block heading %}{{project.name}}{% endblock %}
-{% block breadcrumb %}{{ project.linkname }} patches{% endblock %}
+{% block patch_active %}active{% endblock %}
 
 {% block body %}
 
diff --git a/patchwork/templates/patchwork/patch.html b/patchwork/templates/patchwork/patch.html
index d73377f..b5d0eb7 100644
--- a/patchwork/templates/patchwork/patch.html
+++ b/patchwork/templates/patchwork/patch.html
@@ -6,12 +6,6 @@
 {% load patch %}
 
 {% block title %}{{patch.name}}{% endblock %}
-{% block breadcrumb %}
-<a href="{% url 'patch-list' project_id=project.linkname %}"
- >{{ project.linkname }} patches</a>
- &#8594;
- {{ patch.name }}
-{% endblock %}
 
 {% block body %}
 <script language="JavaScript" type="text/javascript">
diff --git a/patchwork/templates/patchwork/project.html b/patchwork/templates/patchwork/project.html
index a29edae..5238ba4 100644
--- a/patchwork/templates/patchwork/project.html
+++ b/patchwork/templates/patchwork/project.html
@@ -2,6 +2,7 @@
 
 {% block title %}{{ project.name }}{% endblock %}
 {% block heading %}{{ project.name }}{% endblock %}
+{% block info_active %}active{% endblock %}
 
 {% block body %}
 
diff --git a/templates/base.html b/templates/base.html
index c0008f7..78c563c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -38,17 +38,41 @@
        {% block heading %}{% endblock %}</span>
     </div>
     <div class="collapse navbar-collapse" id="navbar-collapse">
-     <ul class="nav navbar-nav navbar-right">
 {% if project %}
-     <li><a href="{% url 'project-detail' project_id=project.linkname %}"
-      >Project Info</a></li>
-    <li><p class="navbar-text">|</p></li>
+      <ul class="nav navbar-nav">
+        <li class="{% block patch_active %}{% endblock %}">
+          <a href="{% url 'patch-list' project_id=project.linkname %}">
+            <span class="glyphicon glyphicon-file"></span>
+            Patches
+          </a>
+        </li>
+        <li class="{% block bundle_active %}{% endblock %}">
+          <a href="{% url 'bundle-list' project_id=project.linkname %}">
+            <span class="glyphicon glyphicon-gift"></span>
+            Bundles
+          </a>
+        </li>
+        <li class="{% block info_active %}{% endblock %}">
+          <a href="{% url 'project-detail' project_id=project.linkname %}">
+            <span class="glyphicon glyphicon-info-sign"></span>
+            About this project
+          </a>
+        </li>
+        <li>
+          <a href="{% url 'project-list' %}">
+            <span class="glyphicon glyphicon-home"></span>
+            All projects
+          </a>
+        </li>
+     </ul>
 {% endif %}
+     <ul class="nav navbar-nav navbar-right">
 {% if user.is_authenticated %}
-     <li><a href="{% url 'user-todos' %}">Todo
-      <span class="badge">{{ user.profile.n_todo_patches }}</span></a>
+     <li>
+      <a href="{% url 'user-todos' %}">
+       Todo
+       <span class="badge">{{ user.profile.n_todo_patches }}</span></a>
      </li>
-     <li><a href="{% url 'bundle-list' %}">Bundles</a></li>
 {% if user.is_staff %}
      <li><a href="{% url 'admin:index' %}">Admin</a></li>
 {% endif %}
@@ -66,22 +90,10 @@
      <li><a href="{% url 'user-register' %}">Register</a></li>
      <li><a href="{% url 'mail-settings' %}">Mail settings</a></li>
 {% endif %}
+     </ul>
     </div>
    </div>
   </nav>
-{% if project %}
-  <div id="breadcrumb">
-   <div id="breadcrumb-left">
-     <a href="{% url 'project-list' %}">All projects</a>
-     &#8594;
-     {% block breadcrumb %}
-      <a href="{% url 'patch-list' project_id=project.linkname %}"
-       >{{ project.linkname }} patches</a>
-     {% endblock %}
-   </div>
-   <div style="clear: both"></div>
-  </div>
-{% endif %}
 {% if messages %}
   <div id="messages">
   {% for message in messages %}