[PATCH 08/51] templates: Redesign the title bar
Damien Lespiau
damien.lespiau at intel.com
Tue Aug 25 04:22:57 AEST 2015
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 16a66d4..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('/static/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 3d07504..9fed149 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -21,36 +21,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.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.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 %}
--
2.1.0
More information about the Patchwork
mailing list