]> git.ipfire.org Git - thirdparty/patchwork.git/commitdiff
projects / thirdparty / patchwork.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: c3598af)
templates: Redesign the title bar
authorDamien Lespiau <damien.lespiau@intel.com>
Tue, 9 Sep 2014 13:22:25 +0000 (14:22 +0100)
committerStephen Finucane <stephen.finucane@intel.com>
Thu, 5 Nov 2015 03:51:32 +0000 (03:51 +0000)
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@intel.com>
Acked-by: Stephen Finucane <stephen.finucane@intel.com>
htdocs/css/style.css patch | blob | blame | history
htdocs/images/title-background.png [deleted file] patch | blob | blame | history
templates/base.html patch | blob | blame | history

diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index 16a66d4c95de792240cd9e4eb14c3ae3de6e985d..2d8a6b21fda76f348a2f1e0e443fb27b1b909e96 100644 (file)
--- 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 (file)
index d850ad7..0000000
Binary files a/htdocs/images/title-background.png and /dev/null differ
diff --git a/templates/base.html b/templates/base.html
index 0a2ced302a9672cf522c5e8d4907aa99b67422a5..1e2d4c9319d540423e41232831553b10509e5c3c 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -20,36 +20,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 %}
Mirror of https://github.com/getpatchwork/patchwork.git