Provide help for form fields (closes #481)

2 files changed, 33 insertions, 1 deletions

diff --git a/static/js/ishtar.js b/static/js/ishtar.js
index b7b0403c8..26fbbd950 100644
--- a/static/js/ishtar.js
+++ b/static/js/ishtar.js
@@ -45,6 +45,12 @@ $("#main_menu ul li").live('click', function(){
     $(this).find('ul').show('slow');
 });
 
+/* manage help texts */
+$(".help_display").live("click", function(){
+    var help_text_id = $(this).attr("href") + "_help";
+    $(help_text_id).toggle();
+})
+
 var last_window;
 
 function load_window(url, speed){
diff --git a/static/media/style.css b/static/media/style.css
index 75a5f975d..e8c94c552 100644
--- a/static/media/style.css
+++ b/static/media/style.css
@@ -33,6 +33,12 @@ textarea{
     height:80px;
 }
 
+dt{
+    font-weight:bold;
+    color:#922;
+    padding:1em;
+}
+
 td{
     text-align:left;
 }
@@ -165,7 +171,7 @@ ul#form_path button {
     color:#D14;
     border:none;
     background-color:white;
-    font-size: 11pt;
+    font-size: 1em;
     cursor:pointer;
     padding:0;
     margin:0;
@@ -191,6 +197,7 @@ div.form {
     padding:0.2em;
     margin-left:auto;
     margin-right:auto;
+    width:600px;
 }
 
 .form table th{
@@ -212,6 +219,25 @@ div.form {
     border:0;
 }
 
+.help_text{
+    display:none;
+    font-size:0.9em;
+}
+
+.help_text div{
+    background-color:#FFF;
+    margin:1em;;
+    padding:0 1em;
+    -moz-border-radius:8px;
+    -webkit-border-radius:8px;
+    border-radius:8px;
+    border:1px solid #AAA;
+}
+
+.help_text .example{
+    font-style:italic;
+}
+
 .info{
     margin-left:auto;
     margin-right:auto;