UI: improve sheets

3 files changed, 112 insertions, 105 deletions

diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index 7127deeb4..948c3ee59 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -54,12 +54,12 @@
 <p><strong class='lbl'>{{lbl}}{% trans ":"%}</strong> <span class='value'>{{value}}</span></p>
 {% endfor %}
 </fieldset>{%endif%}
-    <div class="nav-button" id="to_bottom_arrow">
-        <i class="fa fa-arrow-circle-down" aria-hidden="true"></i>
-    </div>
-    <div class="nav-button" id="to_top_arrow">
-        <i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
-    </div>
+    <button class="nav-button btn btn-sm btn-secondary" id="to_bottom_arrow">
+        <i class="fa fa-arrow-down" aria-hidden="true"></i>
+    </button>
+    <button class="nav-button btn btn-sm btn-secondary" id="to_top_arrow">
+        <i class="fa fa-arrow-up" aria-hidden="true"></i>
+    </button>
     <div class="container">
         <div id="window" role="tablist"></div>
         {% if warnings %}{% for warning in warnings %}
diff --git a/ishtar_common/templates/ishtar/blocks/window_nav.html b/ishtar_common/templates/ishtar/blocks/window_nav.html
index f212ebff6..89263d0de 100644
--- a/ishtar_common/templates/ishtar/blocks/window_nav.html
+++ b/ishtar_common/templates/ishtar/blocks/window_nav.html
@@ -1,56 +1,62 @@
 {% load i18n %}
-{% if previous or next %}
-  <div class='tool-right'>
-    {% 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>
-    {% else %}
-    <span class='history-nav'> </span>
-    {% endif %}
-    {% if next %}
-    <a class='history-nav' title="{% trans 'Restore this version' %}" href="#" onclick='if(confirm("{%trans 'Are you sure to restore to this version? All changes 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-history fa-stack-1x fa-inverse"></i>
-    </span>
-    <br/>{% trans "Restore" %}
-    </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>
-    {% else %}
-    <span class='history-nav'> </span>
-    <span class='history-nav'> </span>
-    {% endif %}
+<div class="row toolbar">
+  {% if previous or next %}
+  <div class='col-md-2'>
+    <div class="btn-group btn-group-sm" role="group" aria-label="{% trans 'History'%}">
+        {% if previous %}
+          <button type="button" class="btn btn-secondary"
+                  data-toggle="tooltip" data-placement="bottom"
+                  title="{{previous}}"
+                  onclick='load_window("{% url histo_url item.pk previous|date:"c"%}");$("#{{window_id}}").hide();return false;'>
+              <i class="fa fa-step-backward"></i>
+          </button>
+        {% endif %}
+        {% if next %}
+        <button type="button" class="btn btn-secondary"
+                data-toggle="tooltip" data-placement="bottom"
+                onclick='if(confirm("{%trans 'Are you sure to restore to this version? All changes 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 %}");}'
+                title="{% trans 'Restore this version' %}">
+            <i class="fa fa-history"></i>
+        </button>
+        <button type="button" class="btn btn-secondary"
+                data-toggle="tooltip" data-placement="bottom"
+                onclick='load_window("{% url histo_url item.pk next|date:"c" %}");$("#{{window_id}}").hide();return false;'
+                title="{{next}}">
+            <i class="fa fa-step-forward"></i>
+        </button>
+        {% endif %}
+    </div>
   </div>
-{% endif %}
-<div class='tool-left'>
+  <div class='offset-md-6 col-md-4 text-right'>
+  {% else %}
+  <div class='offset-md-8 col-md-4 text-right'>
+  {% endif %}
+      <div class="btn-group btn-group-sm" role="group" aria-label="{% trans 'Actions' %}">
   {% block extra_actions %}{% endblock %}
-  {% if modify_url %}<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>{% endif %}
-  {% if pin_action and item.SLUG %}
-  <span class='pin-action' onclick='$.get("{% url 'pin' item.SLUG item.pk %}", function(){load_shortcut_menu(); display_info("{% trans 'Item pined in your shortcut menu.' %}")});' title="{% trans 'Pin' %}">
-  <span class="fa-stack fa-lg">
-    <i class="fa fa-circle fa-stack-2x"></i>
-    <i class="fa fa-thumb-tack fa-stack-1x fa-inverse"></i>
-  </span>
-  </span>{% endif %}
-  <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>
+        {% if modify_url %}
+        <a class="btn btn-secondary" href='{% url modify_url item.pk %}'
+           title="{% trans 'Modify' %}">
+            <i class="fa fa-pencil"></i>
+        </a>
+        {% endif %}
+        {% if pin_action and item.SLUG %}
+        <a class="btn btn-secondary" href="#" class='pin-action'
+           onclick='$.get("{% url "pin" item.SLUG item.pk %}", function(){load_shortcut_menu(); display_info("{% trans 'Item pined in your shortcut menu.' %}")});' title="{% trans 'Pin' %}">
+            <i class="fa fa-thumb-tack"></i>
+        </a>
+        {% endif %}
+          <a class="btn btn-secondary" href='{% url show_url item.pk "odt" %}'
+             title='{% trans "Export as OpenOffice.org file"%}'>
+              ODT <i class="fa fa-file-word-o" aria-hidden="true"></i>
+          <a class="btn btn-secondary" href='{% url show_url item.pk "pdf" %}'
+             title='{% trans "Export as PDF file"%}'>
+              PDF <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
+          </a>
+      </div>
+  </div>
 </div>
-<hr class='clear'>
 {% if next %}
-    <p class='info-box'><i class="fa fa-info-circle" aria-hidden="true"></i> <em>{% trans "Relation between items are not historized." %}</em></p>
+<div class="alert alert-warning" role="alert">
+  {% trans "Relation between items are not historized." %}
+</div>
 {% endif %}
diff --git a/ishtar_common/templates/ishtar/sheet.html b/ishtar_common/templates/ishtar/sheet.html
index 2392cdd9d..6fa247200 100644
--- a/ishtar_common/templates/ishtar/sheet.html
+++ b/ishtar_common/templates/ishtar/sheet.html
@@ -15,56 +15,58 @@
 
   <div class="card sheet" id="{{window_id}}">
     <div class="card-header" role="tab" id='head-{{window_id}}'>
-      <h5 class="mb-0">
-        <a data-toggle="collapse" href="#collapse-{{window_id}}" aria-expanded="true"
-           aria-controls="collapse-{{window_id}}">
-            {% block head_title %}{% endblock %}
-        </a>
-      </h5>
-      <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()' 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>
-        {% comment %}
-        <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>
-        {% endcomment %}
+      <div class="row">
+          <div class="col">
+              <h5 class="mb-0">
+                <a data-toggle="collapse" href="#collapse-{{window_id}}" aria-expanded="true"
+                   aria-controls="collapse-{{window_id}}">
+                    {% block head_title %}{% endblock %}
+                </a>
+              </h5>
+          </div>
+          <div class='col text-center'>
+              <a href='#' class='previous_page'>
+                <span class="fa-stack">
+                  <i class="fa fa-circle fa-stack-2x"></i>
+                  <i class="fa fa-arrow-left fa-stack-1x fa-inverse"></i>
+                </span>
+              </a>
+              <a href='#' class='next_page'>
+                <span class="fa-stack">
+                  <i class="fa fa-circle fa-stack-2x"></i>
+                  <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
+                </span>
+              </a>
+          </div>
+          <div class='col text-right'>
+            <a href='#' onclick='$("#{{window_id}}").hide()' 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>
+            {% comment %}
+            <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>
+            {% endcomment %}
+          </div>
       </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>
       {% block header_title %}{% endblock %}
     </div>
 
     <div id="collapse-{{window_id}}" class="collapse show" role="tabpanel"
          aria-labelledby="heading-{{window_id}}" data-parent="#window">
+      {% block toolbar %}{% endblock %}
       <div class="card-body">
         {% block head_sheet %}
-        <script type="text/javascript">var last_window='{{window_id}}';</script>
+        <script type="text/javascript">
+        var last_window='{{window_id}}';
 
-        <div class="head">
-
-
-        </div>
-
-        <script type="text/javascript" language='javascript'>
         jQuery(document).ready(function(){
             if (! get_next_table_id({{item.pk}})){
                 jQuery('.next_page').hide();
@@ -74,21 +76,20 @@
             }
             jQuery(".next_page").click(function() {
                 load_window("{{current_window_url}}" + get_next_table_id({{item.pk}}) + "/",
-                            '', function(){$("#{{window_id}}").hide();});
+                            '', function(){$("#{{window_id}}").remove();});
             });
             jQuery(".previous_page").click(function() {
                 load_window("{{current_window_url}}" + get_previous_table_id({{item.pk}}) + "/",
-                            '', function(){$("#{{window_id}}").hide();});
+                            '', function(){$("#{{window_id}}").remove();});
             });
         });
         </script>
         {% endblock %}
-         </div>
-    <div class="body">
-    {% block toolbar %}{% endblock %}
-    {% block content %}
-    {% endblock %}
-    </div>
+        <div class="body">
+        {% block content %}
+        {% endblock %}
+        </div>
+      </div>
     </div>
   </div>
 </div>