3 files changed, 78 insertions, 62 deletions
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index 6ee3398f8..7127deeb4 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -48,8 +48,6 @@
 </head>
 <body{% if current_theme%} id='{{current_theme}}'{%endif%}>
     {% include "navbar.html" %}
-    <div id="window"></div>
-    <a href='{% url "start" %}' id="logo"></a>
     {% if not reminders %}<div id="context-menu" class="navbar navbar-expand-lg"></div>
     {% else %}<fieldset id='reminder'><legend>{% trans "Current items" %}</legend>
 {% for lbl, value in reminders %}
@@ -63,6 +61,7 @@
         <i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
     </div>
     <div class="container">
+        <div id="window" role="tablist"></div>
         {% if warnings %}{% for warning in warnings %}
         <div class="alert alert-warning alert-dismissible fade show" role="alert">
             {{warning}}
diff --git a/ishtar_common/templates/ishtar/sheet.html b/ishtar_common/templates/ishtar/sheet.html
index bfefd5eb6..2392cdd9d 100644
--- a/ishtar_common/templates/ishtar/sheet.html
+++ b/ishtar_common/templates/ishtar/sheet.html
@@ -12,68 +12,85 @@
 </head>
 <body>
 {% endblock %}
-<div class="sheet" id='{{window_id}}'>
-{% block head_sheet %}
-<script type="text/javascript">var last_window='{{window_id}}';</script>
 
-<div class="head">
+  <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>
+      <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>
 
-<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>
+    <div id="collapse-{{window_id}}" class="collapse show" role="tabpanel"
+         aria-labelledby="heading-{{window_id}}" data-parent="#window">
+      <div class="card-body">
+        {% block head_sheet %}
+        <script type="text/javascript">var last_window='{{window_id}}';</script>
 
-<h1>{% block head_title %}{% endblock %}</h1>
-</div>
+        <div class="head">
 
-<script type="text/javascript" language='javascript'>
-jQuery(document).ready(function(){
-    if (! get_next_table_id({{item.pk}})){
-        jQuery('.next_page').hide();
-    }
-    if (! get_previous_table_id({{item.pk}})){
-        jQuery('.previous_page').hide();
-    }
-    jQuery(".next_page").click(function() {
-        load_window("{{current_window_url}}" + get_next_table_id({{item.pk}}) + "/",
-                    '', function(){$("#{{window_id}}").hide();});
-    });
-    jQuery(".previous_page").click(function() {
-        load_window("{{current_window_url}}" + get_previous_table_id({{item.pk}}) + "/",
-                    '', function(){$("#{{window_id}}").hide();});
-    });
-});
-</script>
-{% endblock %}
-{% block header_title %}{% endblock %}
-<div class="body">
-{% block toolbar %}{% endblock %}
-{% block content %}
-{% endblock %}
-</div>
+
+        </div>
+
+        <script type="text/javascript" language='javascript'>
+        jQuery(document).ready(function(){
+            if (! get_next_table_id({{item.pk}})){
+                jQuery('.next_page').hide();
+            }
+            if (! get_previous_table_id({{item.pk}})){
+                jQuery('.previous_page').hide();
+            }
+            jQuery(".next_page").click(function() {
+                load_window("{{current_window_url}}" + get_next_table_id({{item.pk}}) + "/",
+                            '', function(){$("#{{window_id}}").hide();});
+            });
+            jQuery(".previous_page").click(function() {
+                load_window("{{current_window_url}}" + get_previous_table_id({{item.pk}}) + "/",
+                            '', function(){$("#{{window_id}}").hide();});
+            });
+        });
+        </script>
+        {% endblock %}
+         </div>
+    <div class="body">
+    {% block toolbar %}{% endblock %}
+    {% block content %}
+    {% endblock %}
+    </div>
+    </div>
+  </div>
 </div>
 {%block main_foot%}
 </body>
diff --git a/ishtar_common/templates/ishtar/wizard/validation_bar.html b/ishtar_common/templates/ishtar/wizard/validation_bar.html
index c6856aa75..0a30fb7e1 100644
--- a/ishtar_common/templates/ishtar/wizard/validation_bar.html
+++ b/ishtar_common/templates/ishtar/wizard/validation_bar.html
@@ -2,14 +2,14 @@
 <div id='validation-bar' class="row text-center">
     <div class="col-sm">
         <button type="submit" id="submit_form" name='validate'
-                value="validate" class="btn btn-primary">
+                value="validate" class="btn btn-success">
             {% trans 'Validate' %}
         </button>
     </div>
     {% if last_step_is_available and next_steps %}
     <div class="col-sm">
         <button type="submit" id="submit_end_form" name='validate_and_end'
-            value="validate_and_end" class="btn btn-primary">
+            value="validate_and_end" class="btn btn-success">
             {% trans 'Validate and end' %}
         </button>
     </div>