[PATCH 09/46] templates: Redesign the title bar

Damien Lespiau damien.lespiau at intel.com
Sun Nov 9 06:08:27 AEDT 2014


Let's use HTML5 <nav> and bootstrap navigation facilities for this.

Among the nice things that bootstrap brings to the table, the navigation
bar is now mobile friendly: it will collapse when either, being
displayed on a mobile device or when the screen isn't wide enough, to
show the various items in a togglable menu. This can be tested by
resizing the browser to have a width < 768px.

This commit is just about layout changes, keeping the exact same
information displayed on the page.

This is based on work from Belén Barros Peña, but transposed to
bootstrap.

Signed-off-by: Damien Lespiau <damien.lespiau at intel.com>
---
 htdocs/css/style.css               |  41 +++++++++++++----------------
 htdocs/images/title-background.png | Bin 246 -> 0 bytes
 templates/base.html                |  52 ++++++++++++++++++++-----------------
 3 files changed, 46 insertions(+), 47 deletions(-)
 delete mode 100644 htdocs/images/title-background.png

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index 2e77049..2d8a6b2 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -12,35 +12,30 @@ a:hover {
 	top: 17em;
 }
 
+.navbar-patchwork {
+	background-color: #0A0A47;
+	border-color: #e7e7e7;
+	margin-bottom: 0;
+	border-radius: 0;
+	color: #fff;
+}
 
-#title {
-	background: url('/images/title-background.png') top left repeat-x;
-	background-color: #786fb4;
-	margin: 0px;
-	padding-top: 0.1em;
-	padding-bottom: 0.0em;
-	padding-left: 2em;
+.navbar-patchwork .navbar-toggle {
+	border-color: #ddd;
 }
 
-#title h1, #title h1 a {
-	font-size: 16pt;
-	color: white;
-	margin-bottom: 0;
+.navbar-patchwork .nav > li > a:hover,
+.navbar-patchwork .nav > li > a:focus {
+	text-decoration: none;
+	background-color: #2E2E70;
 }
 
-#auth {
-	border-left: thin solid white;
-	padding-top: 0em;
-	padding-left: 1.5em;
-	padding-right: 1.5em;
-	padding-top: 0.5em;
-	padding-bottom: 0.5em;
-	font-size: 90%;
-	float: right;
-	color: white;
+.navbar-patchwork .navbar-toggle .icon-bar {
+	background-color: #eee;
 }
-#auth a {
-	color: white;
+
+.navbar-patchwork a {
+	color: #fff;
 }
 
 #nav {
diff --git a/htdocs/images/title-background.png b/htdocs/images/title-background.png
deleted file mode 100644
index d850ad7ea85abacf443b7937bcf23db3ab8c683e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 246
zcmeAS at N?(olHy`uVBq!ia0vp^j6iI}!3HGf{@&OH5-1LGcVbv~PUa<$!<OXj?!r*P
zkk7DXf7<JxKoQOYkH}&M25w;xW at MN(M*=9wUgGKN%6@~LmD60kcea at TP)M at GHKN2h
zKQ}iuuY|$5C^fMpHASI3vm`^o-P1Q9ypc~Fs3_3W#W95AdTO5|UxNY9VH@>7|4$Z3
z_{`oB(j~Q<_1Idr+l%BDKkL>s`x%;K_*2W+PiKYrvPyC5X|lINUZ-q2Bg}nG`PS=-
jqR2SMvRYjuHYS at -wM>5tSnl2g8qVP9>gTe~DWM4fJNry8

diff --git a/templates/base.html b/templates/base.html
index 42ecb28..d4f23a4 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -24,36 +24,40 @@
 {% block headers %}{% endblock %}
  </head>
  <body>
-  <div id="title">
-  <h1 style="float: left;">
-     <a
-      href="{% url 'patchwork.views.projects' %}">Patchwork</a>
-    {% block heading %}{% endblock %}</h1>
-  <div id="auth">
+  <nav class="navbar navbar-patchwork" role="navigation">
+   <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <span class="navbar-brand"><a
+         href="{% url 'patchwork.views.projects' %}">Patchwork</a>
+       {% block heading %}{% endblock %}</span>
+    </div>
+    <div class="collapse navbar-collapse" id="navbar-collapse">
+     <ul class="nav navbar-nav navbar-right">
 {% if user.is_authenticated %}
-   Logged in as
-    <a href="{% url 'patchwork.views.user.profile' %}"
-     ><strong>{{ user.username }}</strong></a>
-    <br/>
-     <a href="{% url 'patchwork.views.user.todo_lists' %}">todo
-      ({{ user.get_profile.n_todo_patches }})</a> ::
-     <a href="{% url 'patchwork.views.bundle.bundles' %}">bundles</a>
-     <br/>
-     <a href="{% url 'patchwork.views.user.profile' %}">profile</a> ::
+     <li><p class="navbar-text">Logged in as <a href="{% url 'patchwork.views.user.profile' %}"
+     ><strong>{{ user.username }}</strong></a></p></li>
+     <li><a href="{% url 'patchwork.views.user.todo_lists' %}">todo
+      ({{ user.get_profile.n_todo_patches }})</a></li>
+     <li><a href="{% url 'patchwork.views.bundle.bundles' %}">bundles</a></li>
+     <li><a href="{% url 'patchwork.views.user.profile' %}">profile</a></li>
 {% if user.is_staff %}
-     <a href="{% url 'admin:index' %}">admin</a> ::
+     <li><a href="{% url 'admin:index' %}">admin</a></li>
 {% endif %}
-     <a href="{% url 'auth_logout' %}">logout</a>
+     <li><a href="{% url 'auth_logout' %}">logout</a></li>
 {% else %}
-     <a href="{% url 'auth_login' %}">login</a>
-     <br/>
-     <a href="{% url 'patchwork.views.user.register' %}">register</a>
-     <br/>
-     <a href="{% url 'patchwork.views.mail.settings' %}">mail settings</a>
+     <li><a href="{% url 'auth_login' %}">login</a></li>
+     <li><a href="{% url 'patchwork.views.user.register' %}">register</a></li>
+     <li><a href="{% url 'patchwork.views.mail.settings' %}">mail settings</a></li>
 {% endif %}
+    </div>
    </div>
-   <div style="clear: both;"></div>
-  </div>
+  </nav>
   <div id="nav">
    <div id="navleft">
    {% if project %}
-- 
1.8.3.1



More information about the Patchwork mailing list