[PATCH 5/9] ui: Cleanup the navbar "brand"

Thu Mar 31 08:04:30 AEDT 2016

The text shown in the top-left corner of a navbar, known as the "brand"
in Bootstrap parlance, normally brings you to the homepage. However,
when viewing patches or details about a project this name of this
project is included in this link. This gave some users the idea that
clicking this button would return them to the project patch list
instead. To resolve this confusion, break the project name and any
other non-Patchwork title out of this clickable link. A new
"navbar-subnav" style is introduced to do this, seeing as Bootstrap
does not appear to support something like this natively.

Once this is done, this also allows for the removal of the "All
Projects" button, which both duplicates this functionality and did
nothing when there was only one project available on an instance.

Signed-off-by: Stephen Finucane <stephen.finucane at intel.com>
---
 htdocs/css/style.css                        | 21 ++++++++++++++++-----
 patchwork/templates/patchwork/projects.html | 12 ------------
 templates/base.html                         | 16 +++++-----------
 3 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index 0ec11e0..f7f7b6a 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -21,16 +21,27 @@ pre {
 	top: 17em;
 }
 
-.navbar-brand>a {
+/* Bootstrap overrides */
+
+.navbar-inverse .navbar-brand > a {
 	color: white;
 }
 
-.navbar-patchwork {
-	border-radius: 0px;
-	margin-bottom: 0px;
+.navbar-inverse .navbar-nav > li > a {
+	color: #999;
+}
+
+/* Bootstrap extensions */
+
+.navbar-subbrand {
+	float: left;
+	height: 50px;
+	padding: 15px 15px 15px 0;
+	font-size: 18px;
+	line-height: 20px;
 }
 
-.navbar-patchwork .navbar-nav>li>a {
+.navbar-subbrand {
 	color: #999;
 }
 
diff --git a/patchwork/templates/patchwork/projects.html b/patchwork/templates/patchwork/projects.html
index 0db1227..9ce1918 100644
--- a/patchwork/templates/patchwork/projects.html
+++ b/patchwork/templates/patchwork/projects.html
@@ -1,19 +1,8 @@
 {% extends "base.html" %}
 
 {% block title %}Project List{% endblock %}
-{% block navbarmenu %}
-      <ul class="nav navbar-nav">
-        <li class="active">
-          <a href="{% url 'project-list' %}">
-            <span class="glyphicon glyphicon-home"></span>
-            All projects</a>
-        </li>
-     </ul>
-{% endblock %}
 {% block body %}
-
 <div style="margin-top:20px;"></div>
-
 {% if projects %}
 {% for p in projects %}
 {% cycle '<div class="row">' '' '' %}
@@ -46,5 +35,4 @@
 {% else %}
 <p>Patchwork doesn't have any projects to display!</p>
 {% endif %}
-
 {% endblock %}
diff --git a/templates/base.html b/templates/base.html
index d2374ad..ac4ef0c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -23,7 +23,7 @@
 {% block headers %}{% endblock %}
  </head>
  <body>
-  <nav class="navbar navbar-inverse navbar-patchwork">
+  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
@@ -32,9 +32,9 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <span class="navbar-brand">
-        <a href="{% url 'project-list' %}">Patchwork{% if project %} {{project.name}}{% endif %}</a>
-        {% block heading %}{% endblock %}
+      <a class="navbar-brand" href="{% url 'project-list' %}">Patchwork</a>
+      <span class="navbar-subbrand">
+        {% block heading %}{% if project %} {{project.name}}{% endif %}{% endblock %}
       </span>
     </div>
     <div class="collapse navbar-collapse" id="navbar-collapse">
@@ -59,13 +59,7 @@
             About this project
           </a>
         </li>
-        <li>
-          <a href="{% url 'project-list' %}">
-            <span class="glyphicon glyphicon-home"></span>
-            All projects
-          </a>
-        </li>
-     </ul>
+      </ul>
 {% endif %}
 {% endblock %}
      <ul class="nav navbar-nav navbar-right">
-- 
2.0.0

