Add a progress visual for research - improve CSS

3 files changed, 68 insertions, 14 deletions

diff --git a/ishtar_common/static/media/style.css b/ishtar_common/static/media/style.css
index fe078fa3c..957619f4c 100644
--- a/ishtar_common/static/media/style.css
+++ b/ishtar_common/static/media/style.css
@@ -3,11 +3,47 @@
     background-color:#ff6e6e;
 }
 
+a.add-button, a.remove,
+#progress-content{
+    background-color:#fff;
+}
+
+div.form {
+    background-color: #EEE;
+}
+
 /* color  */
-a {
+a, a.remove {
     color:#D14;
 }
+a.add-button{
+    color:#61615C;
+}
 
+/* borders */
+a.add-button, a.remove,
+#progress-content,
+div.form {
+    border:2px solid #CCC;
+}
+
+/* shadows */
+#progress-content,
+.sheet{
+    -webkit-box-shadow: 0px 0px 20px #444;
+    -moz-box-shadow: 0px 0px 20px #444;
+    box-shadow: 0px 0px 20px #444;
+}
+
+/* radius */
+a.add-button, a.remove,
+.sheet,
+#progress-content,
+div.form {
+    -moz-border-radius:8px;
+    -webkit-border-radius:8px;
+    border-radius:8px;
+}
 
 body{
     font-family:Arial, Helvetica, sans-serif;
@@ -214,11 +250,6 @@ div.form {
     padding:1em;
     display:block;
     width:740px;
-    background-color: #EEE;
-    border:2px solid #CCC;
-    -moz-border-radius:8px;
-    -webkit-border-radius:8px;
-    border-radius:8px;
     text-align:center;
 }
 
@@ -506,17 +537,10 @@ td.submit_button{
 }
 
 a.add-button, a.remove{
-    background-color:#FFF;
-    border:2px solid #CCC;
-    -moz-border-radius:8px;
-    -webkit-border-radius:8px;
-    border-radius:8px;
     padding:0 4px;
-    color:#61615C;
 }
 
 a.remove{
-    color:#D14;
     margin:0 6px;
 }
 
@@ -544,3 +568,23 @@ a.remove{
 .widget-parcel{
     width:60px;
 }
+
+#progress{
+    display:none;
+    position:fixed;
+    height:50px;
+    width:100%;
+    top:40%;
+    z-index:42000;
+}
+
+#progress-content{
+    background-image:url(images/ajax-loader.gif);
+    background-repeat: no-repeat;
+    background-position:center center;
+    margin-left:auto;
+    margin-right:auto;
+    width:50px;
+    height:50px;
+    padding:10px;
+}
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index 6e44e8729..007314892 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -84,6 +84,10 @@
         {% block footer %}
         {% endblock %}
     </div>
+    <div id="progress">
+        <div id='progress-content'>
+        </div>
+    </div>
 </body>
 
 </html>
diff --git a/ishtar_common/widgets.py b/ishtar_common/widgets.py
index 3ecdad310..af638aba7 100644
--- a/ishtar_common/widgets.py
+++ b/ishtar_common/widgets.py
@@ -1,6 +1,6 @@
 #!/usr/bin/env python

 # -*- coding: utf-8 -*-

-# Copyright (C) 2010-2011 Étienne Loks  <etienne.loks_AT_peacefrogsDOTnet>

+# Copyright (C) 2010-2013 Étienne Loks  <etienne.loks_AT_peacefrogsDOTnet>

 # Copyright (C) 2007  skam <massimo dot scamarcia at gmail.com>

 #                          (http://djangosnippets.org/snippets/233/)

 

@@ -281,6 +281,9 @@ class JQueryJqGrid(forms.RadioSelect):
         var selItems_%(sname)s = new Array();

         jQuery(document).ready(function(){

           jQuery("#search_%(name)s").click(function (){

+            if ($("#progress").length > 0){

+                $("#progress").show();

+            }

             var data = "";

             for (idx in query_vars)

             {

@@ -295,6 +298,9 @@ class JQueryJqGrid(forms.RadioSelect):
             var url = "%(source)s?submited=1&" + data;

             mygrid.setGridParam({url:url});

             mygrid.trigger("reloadGrid");

+            if ($("#progress").length > 0){

+                $("#progress").hide();

+            }

             return false;

           });