UI: new (and nicer) layout for sheet header

6 files changed, 156 insertions, 47 deletions

diff --git a/archaeological_finds/templates/ishtar/sheet_find.html b/archaeological_finds/templates/ishtar/sheet_find.html
index 1efec9c6c..c4ce00aa0 100644
--- a/archaeological_finds/templates/ishtar/sheet_find.html
+++ b/archaeological_finds/templates/ishtar/sheet_find.html
@@ -1,29 +1,11 @@
 {% extends "ishtar/sheet.html" %}
-{% load i18n window_field from_dict link_to_window window_tables humanize %}
+{% load i18n window_field from_dict link_to_window window_tables window_header humanize %}
 {% load url from future %}
 
-{% block head_sheet %}
-{{block.super}}
-<h1>{% trans "Find"%}</h1>
-{% endblock %}
-
+{% block head_title %}{% trans "Find"%}{% endblock %}
 {% block content %}
 
-{% if previous or next %}
-<div class='tool'>
-{% if previous %}
-<a href="#" onclick='load_window("{% url 'show-historized-find' item.pk previous|date:"c"%}");$("#{{window_id}}").hide();return false;'>{%trans "Previous version"%} ({{previous}})</a>
-{% endif %}
-{% if previous and next %} - {% endif %}
-{%if next%}
-<a href="#" onclick='if(confirm("{%trans "Are you sure to rollback to this version?"%}")){load_url("{% url 'revert-find' item.pk item.history_date|date:"c"%}");closeAllWindows();load_window("{% url 'show-find' item.pk None %}");}'>Rollback</a> -
-<a href="#" onclick='load_window("{% url 'show-historized-find' item.pk next|date:"c" %}");$("#{{window_id}}").hide();return false;'>{%trans "Next version"%} ({{next}})</a>
-{% endif %}
-</div>
-{% endif %}
-
-<div class='tool'>{%trans "Export as:"%} <a href='{% url 'show-find' item.pk "odt" %}'>{%trans "OpenOffice.org file"%}</a>, <a href='{% url 'show-find' item.pk "pdf" %}'>{%trans "PDF file"%}</a></div>
-<div class='tool modify'><a href='{% url 'find_modify' item.pk %}'>{% trans "Modify" %}</a></div>
+{% window_nav 'show-find' 'find_modify' 'show-historized-find' 'revert-find' item window_id previous next  %}
 
 {% if item.image %}
 <a href='{{item.image.url}}' rel="prettyPhoto" title="{{item.label}}" class='photo'><img src='{{item.thumbnail.url}}'/></a>
@@ -109,7 +91,7 @@
   </tr>
   {% endfor %}
 </table>
-<p class='tool'>{% trans "Export:" %} <a class='badge' href="{% url 'get-upstreamtreatment' 'csv' %}?submited=1&amp;find_id={{item.pk}}" target="_blank">{% trans "CSV" %}</a> ({{ENCODING}})</p>
+<p class='tool'><a class='badge' href="{% url 'get-upstreamtreatment' 'csv' %}?submited=1&amp;find_id={{item.pk}}" target="_blank" title='{% trans "Export as CSV"%}'>{% trans "CSV" %}</a> ({{ENCODING}})</p>
 {% endif %}
 
 {% if item.downstream_treatment %}
@@ -134,14 +116,9 @@
   </tr>
   {% endfor %}
 </table>
-<p class='tool'>{% trans "Export:" %} <a class='badge' href="{% url 'get-downstreamtreatment' 'csv' %}?submited=1&amp;find_id={{item.pk}}" target="_blank">{% trans "CSV" %}</a> ({{ENCODING}})</p>
+<p class='tool'><a class='badge' href="{% url 'get-downstreamtreatment' 'csv' %}?submited=1&amp;find_id={{item.pk}}" target="_blank">{% trans "CSV" %}</a> ({{ENCODING}})</p>
 {% endif %}
 
-{% comment %}
-{% trans "Upstream treatments" as treatments  %}
-{% dynamic_table_document treatments 'finds_treatments' 'find_id' item.pk '' output %}
-{% endcomment %}
-
 {% endif %}
 
 <h3>{% trans "Associated base finds"%}</h3>
diff --git a/ishtar_common/static/media/style.css b/ishtar_common/static/media/style.css
index 7aef23099..75277eb1d 100644
--- a/ishtar_common/static/media/style.css
+++ b/ishtar_common/static/media/style.css
@@ -16,7 +16,7 @@ div.form, ul.form {
     background-color: #922;
 }
 
-a.add-button, #reset_wizards{
+.badge, a.add-button, #reset_wizards{
     background-color: #D14;
 }
 
@@ -27,15 +27,13 @@ a, a.remove {
     color:#D14;
 }
 
+.badge,
 a.add-button,
 #reset_wizards,
 #window h1{
     color:#fff;
 }
 
-#context_menu {
-}
-
 #context_menu .orange {
     color:#dd6011;
 }
@@ -77,6 +75,33 @@ hr.spacer{
     margin: 13px;
 }
 
+#window hr.clear,
+hr.clear{
+    clear: both;
+    border: 0 solid transparent;
+    height: 0;
+    margin: 0;
+}
+
+.fa-stack-15x {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    font-size: 1.5em;
+    line-height: 1.4em;
+}
+
+.badge{
+    border: 1px solid #D14;
+}
+
+.close-buttons{
+    position: absolute;
+    right: 10px;
+    top: 2px;
+}
+
 /* shadows */
 #progress-content,
 .sheet{
@@ -677,6 +702,13 @@ ul.form .help_text{
     margin:0.2em;
 }
 
+.badge{
+    padding: 0.1em 0.3em;
+    border-radius: 1em;
+    line-height: 1.8em;
+    font-style: normal;
+}
+
 .autocomplete{
     width:300px;
 }
@@ -760,18 +792,17 @@ table.confirm tr.spacer td:last-child{
 
 .previous_page, .next_page{
     position:absolute;
-    top:40px;
-    font-size: 30px;
+    top:2px;
     color: #000;
     z-index: 1000;
 }
 
 .previous_page{
-    left:35px;
+    left:95px;
 }
 
 .next_page{
-    right:35px;
+    right:95px;
 }
 
 a.photo{
@@ -945,24 +976,36 @@ table td.item-list span{
 #window .head{
     text-align:center;
     background-color:#f1f2f6;
-    -webkit-border-top-left-radius: 8px;
-    -webkit-border-top-right-radius: 8px;
-    -moz-border-radius-topleft: 8px;
-    -moz-border-radius-topright: 8px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
 }
 
+#window .tool-left,
+#window .tool-right,
 #window .tool{
     text-align:center;
     font-style:italic;
 }
 
+#window .tool-right{
+    float: left;
+    padding: 0 2em;
+}
+
+#window .tool-left{
+    float: right;
+    padding: 0 2em;
+}
+
 #window .tool.modify{
     font-style:normal;
     font-weight:bold;
 }
 
+.history-nav{
+    display: inline-block;
+    width: 100px;
+    vertical-align: top;
+}
+
 #window .body{
     position:absolute;
     padding:2px 10px 6px 10px;
@@ -977,6 +1020,13 @@ table td.item-list span{
     text-align:center;
     font-size:16px;
     margin-top:0;
+    padding: 0.2em;
+    -webkit-border-top-left-radius: 8px;
+    -webkit-border-top-right-radius: 8px;
+    -moz-border-radius-topleft: 8px;
+    -moz-border-radius-topright: 8px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
 }
 
 #window label{
diff --git a/ishtar_common/templates/ishtar/blocks/window_nav.html b/ishtar_common/templates/ishtar/blocks/window_nav.html
new file mode 100644
index 000000000..6f4d94d6b
--- /dev/null
+++ b/ishtar_common/templates/ishtar/blocks/window_nav.html
@@ -0,0 +1,41 @@
+{% load url from future %}
+{% load i18n %}
+{% if previous or next %}
+<div class='tool-left'>
+{% if previous %}
+<a class='history-nav' href="#" onclick='load_window("{% url histo_url item.pk previous|date:"c"%}");$("#{{window_id}}").hide();return false;' title="{%trans 'Previous version'%}">
+<span class="fa-stack">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-step-backward fa-stack-1x fa-inverse"></i>
+</span>
+<br/>{{previous}}
+</a>
+{% endif %}
+{% if next %}
+<a class='history-nav' title="{% trans 'Restaure this version' %}" href="#" onclick='if(confirm("{%trans "Are you sure to restaure to this version? All changement made since this version will be lost."%}")){load_url("{% url revert_url item.pk item.history_date|date:"c"%}");closeAllWindows();load_window("{% url show_url item.pk None %}");}'>
+<span class="fa-stack fa-lg">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-exchange fa-stack-1x fa-inverse"></i>
+</span>
+<br/>{% trans "Restaure" %}
+</a>
+<a class='history-nav' href="#" onclick='load_window("{% url histo_url item.pk next|date:"c" %}");$("#{{window_id}}").hide();return false;' title="{%trans 'Next version'%}">
+<span class="fa-stack">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-step-forward fa-stack-1x fa-inverse"></i>
+</span>
+<br/>{{next}}
+</a>
+{% endif %}
+</div>
+{% endif %}
+<div class='tool-right'>
+<a href='{% url modify_url item.pk %}' title="{% trans 'Modify' %}">
+<span class="fa-stack fa-lg">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
+</span>
+</a>
+<a class='badge' href='{% url show_url item.pk "odt" %}' title='{% trans "Export as OpenOffice.org file"%}'>ODT</a> <a class='badge' href='{% url show_url item.pk "pdf" %}' title='{% trans "Export as PDF file"%}'>PDF</a>
+</div>
+<hr class='clear'>
diff --git a/ishtar_common/templates/ishtar/sheet.html b/ishtar_common/templates/ishtar/sheet.html
index 5da837ab4..bfefd5eb6 100644
--- a/ishtar_common/templates/ishtar/sheet.html
+++ b/ishtar_common/templates/ishtar/sheet.html
@@ -18,11 +18,35 @@
 
 <div class="head">
 
-<a href='#' class='previous_page'><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></a>
-<a href='#' onclick='$("#{{window_id}}").hide("slow")'>{% trans "Close" %}</a> -
-<a href='#' onclick='closeAllWindows();'>{% trans "Close all windows" %}</a>
-<a href='#' class='next_page'><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
+<a href='#' class='previous_page'>
+<span class="fa-stack fa-lg">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-arrow-left fa-stack-1x fa-inverse"></i>
+</span>
+</a>
+<div class='close-buttons'>
+<a href='#' onclick='$("#{{window_id}}").hide("slow")' title="{% trans 'Close' %}">
+<span class="fa-stack">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
+</span>
+</a>
+<a href='#' onclick='closeAllWindows();' title="{% trans "Close all windows" %}">
+<span class="fa-stack">
+  <i class="fa fa-files-o fa-stack-2x"></i>
+  <i class="fa fa-circle fa-stack-15x"></i>
+  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
+</span>
+</a>
+</div>
+<a href='#' class='next_page'>
+<span class="fa-stack fa-lg">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
+</span>
+</a>
 
+<h1>{% block head_title %}{% endblock %}</h1>
 </div>
 
 <script type="text/javascript" language='javascript'>
diff --git a/ishtar_common/templatetags/window_header.py b/ishtar_common/templatetags/window_header.py
new file mode 100644
index 000000000..48248ee3d
--- /dev/null
+++ b/ishtar_common/templatetags/window_header.py
@@ -0,0 +1,17 @@
+from django import template
+
+register = template.Library()
+
+
+@register.inclusion_tag('ishtar/blocks/window_nav.html')
+def window_nav(show_url, modify_url, histo_url, revert_url, item, window_id,
+               previous, nxt):
+    return {
+        'show_url': show_url,
+        'modify_url': modify_url,
+        'histo_url': histo_url,
+        'revert_url': revert_url,
+        'item': item,
+        'window_id': window_id,
+        'previous': previous,
+        'next': nxt}
diff --git a/version.py b/version.py
index b349c505a..05bd3e50a 100644
--- a/version.py
+++ b/version.py
@@ -1,4 +1,4 @@
-VERSION = (0, 97, 0)
+VERSION = (0, 97, 0, 1)
 
 
 def get_version():