UI: better layer layout for simple tables. Rewrite of all dashboard (refs #1616)

5 files changed, 95 insertions, 24 deletions

diff --git a/ishtar_common/static/media/style.css b/ishtar_common/static/media/style.css
index 69f86784b..8973876c6 100644
--- a/ishtar_common/static/media/style.css
+++ b/ishtar_common/static/media/style.css
@@ -843,7 +843,7 @@ a.photo{
 .dashboard > div{
     background: #FFF;
     text-align:left;
-    padding-bottom:10px;
+    padding:10px;
     border:1px solid #CCC;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
@@ -854,16 +854,12 @@ a.photo{
     width:762px;
     background-color:#922;
     color:#FFF;
-    padding:0;
+    padding:10px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
 
-.dashboard h4{
-    font-weight:normal;
-    color:#D14;
-}
-.dashboard h4, .dashboard p{
+.dashboard p{
     margin:0;
     padding:0 10px;
 }
@@ -1037,17 +1033,24 @@ table td.item-list span{
     border-top-right-radius: 8px;
 }
 
+.dashboard label,
 #window label{
     display:inline-table;
     font-weight:bold;
     width:245px;
 }
 
+.dashboard span.value,
 #window span.value{
     display:inline-table;
     width:465px;
 }
 
+.dashboard span.value.numeric{
+    text-align: right;
+    width:80px;
+}
+
 #window ul.form-flex span.value {
     display: inline-table;
     width: 230px;
@@ -1255,3 +1258,60 @@ table.table-form td {
 table.table-form td input{
     border-color:#922;
 }
+
+.clean-table {
+  margin: 10px 0 10px 0;
+  width: 100%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.clean-table h4{
+    color: #922;
+    font-size: 1.2em;
+    padding:0.3em;
+    margin:0;
+    text-align: center;
+}
+
+.clean-table-wrap{
+  overflow: auto;
+}
+
+.clean-table table{
+  border-collapse: collapse;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.clean-table tr {
+  padding: 8px 0;
+  background: #f6f6f6;
+}
+
+.clean-table tr:nth-of-type(odd) {
+  background: #e9e9e9;
+}
+
+.clean-table tr th {
+  font-weight: 900;
+  color: #ffffff;
+  background: #DA2D2D;
+  text-align: center;
+  padding: 0.2em 0.4em;
+}
+
+.clean-table tr th.sub {
+  background: #E65C5C;
+}
+
+.clean-table td{
+  text-align: right;
+  padding: 6px 12px;
+}
+
+.mini-table{
+    height: 400px;
+    overflow: auto;
+    display: block;
+}
+
diff --git a/ishtar_common/templates/ishtar/blocks/window_tables/documents.html b/ishtar_common/templates/ishtar/blocks/window_tables/documents.html
index f1592cc42..8c584425a 100644
--- a/ishtar_common/templates/ishtar/blocks/window_tables/documents.html
+++ b/ishtar_common/templates/ishtar/blocks/window_tables/documents.html
@@ -1,6 +1,8 @@
 {% load i18n %}
-<table class='simple'>
-  <caption>{{caption}}</caption>
+<h4>{{h4}}</h4>
+<div class='clean-table'>
+<div class='clean-table-wrap'>
+<table>
   <tr>
     <th>{% trans "Title" %}</th>
     <th>{% trans "Type" %}</th>
@@ -18,4 +20,4 @@
   </tr>
   {% endfor %}
 </table>
-
+</div></div>
diff --git a/ishtar_common/templates/ishtar/blocks/window_tables/static_documents.html b/ishtar_common/templates/ishtar/blocks/window_tables/static_documents.html
index d6686b553..e378bdf49 100644
--- a/ishtar_common/templates/ishtar/blocks/window_tables/static_documents.html
+++ b/ishtar_common/templates/ishtar/blocks/window_tables/static_documents.html
@@ -1,6 +1,8 @@
 {% load i18n %}
-
-<table class='simple'>
+<h4>{{caption}}</h4>
+<div class='clean-table'>
+<div class='clean-table-wrap'>
+<table>
   <caption>{{caption}}</caption>
   <tr>{% for col in col_names %}
     <th>{% trans col %}</th>{% endfor %}
@@ -9,3 +11,4 @@
     <td>{{value}}</td>{%endfor%}
   </tr>{% endfor %}
 </table>
+</div></div>
diff --git a/ishtar_common/templates/ishtar/dashboards/dashboard_main_detail.html b/ishtar_common/templates/ishtar/dashboards/dashboard_main_detail.html
index 7247a5cda..fd92578a2 100644
--- a/ishtar_common/templates/ishtar/dashboards/dashboard_main_detail.html
+++ b/ishtar_common/templates/ishtar/dashboards/dashboard_main_detail.html
@@ -1,4 +1,4 @@
-{% load i18n date_formating %}
+{% load i18n date_formating humanize %}
 {% load url from future %}
 <div class='dashboard' id="{{unique_id}}-tab">
   <div>
@@ -13,7 +13,7 @@
     </form>
     </div>
     {% endif %}
-    <p><strong>{% trans "Total:" %}</strong> {{dashboard.total_number}}</p>
+    <p><strong>{% trans "Total:" %}</strong> {{dashboard.total_number|intcomma}}</p>
     <div class='table'>
     <div id="chart_{{unique_id}}" style="height:400px; width:700px;"></div>
     <p class='info-box'><i class="fa fa-info-circle" aria-hidden="true"></i> {% trans 'Draw rectangle on the graph to zoom. Double-click to reinitialize.' %}</p>
@@ -25,8 +25,9 @@
       </div>
     </div>
     </div>
-    <div class='table'>
-    <table class='resume'>
+    <div class='clean-table'>
+    <div class='clean-table-wrap'>
+    <table>
     {% for idx, lbl, values in dashboard.values %}
       <tr class='idx {% if forloop.counter0|divisibleby:"2" %}even{%else%}odd{%endif%}'>
       <th>{{lbl}}</th>
@@ -35,6 +36,7 @@
     {% endfor%}
     </table>
     </div>
+    </div>
     {% if dashboard.periods %}
     <h4>{% trans "By years" %}</h4>
     <ul>
@@ -55,25 +57,29 @@
       <li><strong>{% trans "Mode:" %}</strong> {{dashboard.operation_mode}}</li>
     </ul>
     {% endif %}
+    <div class='clean-table'>
     <h4>{% trans "Created last" %}</h4>
-    <div class='table'>
-    <table class='resume'>
+    <table>
       <tr><th>{{lbl}}</th><th>{% trans "Created" %}</th><th></th></tr>
       {% for item in dashboard.lasts %}<tr>
         <td class='ref'>{{item}}</td>
         <td>{{item.history_date}}</td>
-        <td>{% if item.get_show_url %}<a href="#" onclick='load_window("{{item.get_show_url}}")'>{%trans "Show"%}</a>{%endif%}</td>
+        <td>{% if item.get_show_url %}<a href="#" onclick='load_window("{{item.get_show_url}}")'>
+            <i class="fa fa-info-circle" aria-hidden="true"></i>
+        </a>{%endif%}</td>
       </tr>{% endfor %}
     </table>
     </div>
+    <div class='clean-table'>
     <h4>{% trans "Recent changes" %}</h4>
-    <div class='table'>
-    <table class='resume'>
+    <table>
       <tr><th>{{lbl}}</th><th>{% trans "Modified" %}</th><th></th></tr>
       {% for item in dashboard.recents %}<tr>
         <td class='ref'>{{item}}</td>
         <td>{{item.history_date}}</td>
-        <td>{% if item.get_show_url %}<a href="#" onclick='load_window("{{item.get_show_url}}")'>{%trans "Show"%}</a>{%endif%}</td>
+        <td>{% if item.get_show_url %}<a href="#" onclick='load_window("{{item.get_show_url}}")'>
+        <i class="fa fa-info-circle" aria-hidden="true"></i>
+        </a>{%endif%}</td>
       </tr>{% endfor %}
     </table>
     </div>
diff --git a/ishtar_common/templatetags/date_formating.py b/ishtar_common/templatetags/date_formating.py
index eb81cf52c..9d4cf74cc 100644
--- a/ishtar_common/templatetags/date_formating.py
+++ b/ishtar_common/templatetags/date_formating.py
@@ -8,12 +8,12 @@ from django.utils.translation import ugettext as _
 
 register = Library()
 
+
 @register.filter
 def date_formating(value):
     try:
         d = datetime.strptime(unicode(value), '%Y-%m-%d')
-        return _(d.strftime("%B")).capitalize() + u" %d" % d.year
+        return _(d.strftime("%b")).capitalize() + u" %d" % d.year
     except ValueError:
         # could be passed to non date value: on error return value
         return value
-