Update header (nav/subnav).
--- a/src/iconolab/templates/iconolab_base.html Mon Feb 06 12:10:13 2017 +0100
+++ b/src/iconolab/templates/iconolab_base.html Mon Feb 06 12:26:32 2017 +0100
@@ -20,9 +20,8 @@
{% endblock %}
<body>
- <!-- navigation -->
+ {% include "partials/header.html" %}
<div class="container">
- {% include "partials/header.html"%}
{% block content %} {% endblock %}
</div>
<footer>
--- a/src/iconolab/templates/partials/header.html Mon Feb 06 12:10:13 2017 +0100
+++ b/src/iconolab/templates/partials/header.html Mon Feb 06 12:26:32 2017 +0100
@@ -1,44 +1,46 @@
{% load notifications_tags %}
{% load staticfiles %}
-<div class="navbar-container">
- {% if homepage %}
- <a class="homepage-logo" href="{% url 'home' %}">
- <img src="{% static 'iconolab/img/iconolab.png' %}" width="306" height="67">
- </a>
- {% endif %}
- <nav class="navbar navbar-default {% if homepage %}navbar-homepage{% endif %}" {% if collection %} style="margin-bottom: 5px;" {% endif %}>
- <div class="container-fluid">
- <div class="navbar-header">
- {% if not homepage %}
- <a class="navbar-brand" href="{% url 'home' %}">
- Iconolab
- </a>
- {% endif %}
- </div>
- <div id="navbar" class="navbar-collapse collapse">
- <ul class="nav navbar-nav">
- <li><a href="{% url 'iconolab_help' %}">Le projet</a></li>
- {% if collection_name %}<li><a href="{% url 'collection_home' collection_name %}">Contribuer</a></li>{% endif %}
- </ul>
-
- {% include "partials/header_search_form.html"%}
-
- <ul class="nav navbar-nav navbar-right">
- {% if request.user.is_authenticated %}
- {% notifications_unread as unread_count %}
- <li><a href="{% url 'user_home' request.user.id %}" title="{{request.user.username}}: Mon espace - {{ unread_count }} notification(s)">
- Mon espace <span class="badge {% if unread_count %}badge-warning{% endif %}">
- {{ unread_count }} <i class="fa fa-envelope-o" aria-hidden="true"></i> </span>
- </a></li>
- <li><a href="{% url 'account:logout' %}">Se déconnecter</a></li>
- {% else %}
- <li><a href="{% url 'account:register' %}">Créer un compte</a></li>
- <li><a href="{% url 'account:login' %}?next={{ request.path | urlencode }}">Se Connecter</a></li>
- {% endif %}
- </ul>
- </div><!--/.nav-collapse -->
- </div><!--/.container-fluid -->
- </nav>
+<header>
+ <section id="topnav">
+ <nav class="navbar navbar-default">
+ <div class="container">
+ <div class="navbar-header">
+ {# {% if not homepage %} #}
+ <a class="navbar-brand" href="{% url 'home' %}">
+ <img src="{% static 'iconolab/img/iconolab.png' %}" alt="Iconolab" height="20">
+ </a>
+ {# {% endif %} #}
+ </div>
+ <div id="navbar" class="navbar-collapse collapse">
+ <ul class="nav navbar-nav">
+ <li><a href="{% url 'iconolab_help' %}">Le projet</a></li>
+ {% if collection_name %}<li><a href="{% url 'collection_home' collection_name %}">Contribuer</a></li>{% endif %}
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+ {% if request.user.is_authenticated %}
+ {% notifications_unread as unread_count %}
+ <li><a href="{% url 'user_home' request.user.id %}" title="{{request.user.username}}: Mon espace - {{ unread_count }} notification(s)">
+ Mon espace <span class="badge {% if unread_count %}badge-warning{% endif %}">
+ {{ unread_count }} <i class="fa fa-envelope-o" aria-hidden="true"></i> </span>
+ </a></li>
+ <li><a href="{% url 'account:logout' %}">Se déconnecter</a></li>
+ {% else %}
+ <li><a href="{% url 'account:register' %}">Créer un compte</a></li>
+ <li><a href="{% url 'account:login' %}?next={{ request.path | urlencode }}">Se Connecter</a></li>
+ {% endif %}
+ </ul>
+ </div><!--/.nav-collapse -->
+ </div><!--/.container-fluid -->
+ </nav>
+ </section>
+ <section id="topsearch">
+ <div class="container">
+ {% include "partials/header_search_form.html"%}
+ </div>
+ </section>
+</header>
+
+<div class="container">
+{% include "partials/header_breadcrumbs.html" %}
</div>
-{% include "partials/header_breadcrumbs.html" %}
--- a/src/iconolab/templates/partials/header_search_form.html Mon Feb 06 12:10:13 2017 +0100
+++ b/src/iconolab/templates/partials/header_search_form.html Mon Feb 06 12:26:32 2017 +0100
@@ -1,20 +1,21 @@
{% if collection_name %}
- <form method="GET" action="{% url 'search_indexes:collection_haystack_search' collection_name %}" class="navbar-form navbar-left" role="search">
- {% else %}
- <form method="GET" action="{% url 'search_indexes:haystack_search' %}" class="navbar-form navbar-left" role="search">
+ <form method="GET" action="{% url 'search_indexes:collection_haystack_search' collection_name %}" role="search">
+ {% else %}
+ <form method="GET" action="{% url 'search_indexes:haystack_search' %}" role="search">
{% endif %}
-
- <div class="form-group">
- <input name="q" type="text" class="form-control" placeholder="Trouver ...">
- </div>
-
- <div class="form-group">
- <select name="model_type" class="form-control">
- <option value="images">Images</option>
- <option value="annotations">Annotations</option>
- </select>
- </div>
-
- <button type="submit" class="btn btn-default btn-sm"><i class="fa fa-search" aria-hidden="true"></i></button>
+ <div class="row">
+ <div class="col-sm-8">
+ <input name="q" type="text" class="form-control" placeholder="Trouver ...">
+ </div>
+ <div class="col-sm-3">
+ <select name="model_type" class="form-control">
+ <option value="images">Images</option>
+ <option value="annotations">Annotations</option>
+ </select>
+ </div>
+ <div class="col-sm-1">
+ <button type="submit" class="btn btn-default btn-block"><i class="fa fa-search" aria-hidden="true"></i></button>
+ </div>
+ </div>
</form>
--- a/src_js/iconolab-bundle/src/iconolab.scss Mon Feb 06 12:10:13 2017 +0100
+++ b/src_js/iconolab-bundle/src/iconolab.scss Mon Feb 06 12:26:32 2017 +0100
@@ -1,16 +1,17 @@
-body {padding-top: 20px; padding-bottom: 20px}
-
-.navbar-container{
- vertical-align:middle;
+header {
+ margin-bottom: 20px;
}
-.navbar-homepage {
- width: calc(100% - 320px);
- display: inline-block;
- margin-top: 12px;
- vertical-align:middle;
+
+#topnav {
+ .navbar {
+ margin-bottom: 0;
+ }
}
-.homepage-logo{
- display:inline-block;
+#topsearch {
+ padding: 15px 0;
+ &, .navbar {
+ background-color: #333;
+ }
}
.drawingModeBtn {border: 1px solid orange; cursor: pointer; height: 25px; margin-bottom: 10px}