From 56fe698ff1db10ddbf30a5c1f4b7fddcaf20a9fb Mon Sep 17 00:00:00 2001
From: Metabox <vilijanac@gmail.com>
Date: Wed, 15 May 2019 13:37:26 +1000
Subject: [PATCH] Style corrections and added tooltips.

---
 htdocs/cgi-bin/main.cgi      | 11 +++++----
 htdocs/cgi-bin/wsrc/main.css |  2 +-
 htdocs/cgi-bin/wsrc/main.js  | 44 ++++++++++++++++++++++++++++++++++--
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/htdocs/cgi-bin/main.cgi b/htdocs/cgi-bin/main.cgi
index d556327..7b619e7 100755
--- a/htdocs/cgi-bin/main.cgi
+++ b/htdocs/cgi-bin/main.cgi
@@ -127,8 +127,11 @@ my $stmt    = "SELECT rowid, ID_CAT, DATE, LOG, AMMOUNT FROM LOG ORDER BY rowid
 $st = $db->prepare( $stmtCat );
 $rv = $st->execute() or die or die "<p>Error->"& $DBI::errstri &"</p>";
 
-my $cats = qq(<select   class="ui-widget-content" id="ec" name="ec" onFocus="toggleVisibility('cat_desc')"
- onBlur="toggleVisibility('cat_desc')" onScroll="helpSelCategory(this)" onChange="updateSelCategory(this)">
+my $cats = qq(<select   class="ui-widget-content" id="ec" name="ec" 
+ onFocus="toggleVisibility('cat_desc')" 
+ onBlur="toggleVisibility('cat_desc')" 
+ onScroll="helpSelCategory(this);updateSelCategory(this)" 
+ onChange="updateSelCategory(this)">
 							<option value="0">---</option>\n);
 
 
@@ -431,7 +434,7 @@ $tbl .= '<tr class="r0"><td><a href="#top">&#x219F;</a></td><td colspan="5" alig
 
 my $frm = qq(<a name="top"></a>
 <form id="frm_entry" action="main.cgi" onSubmit="return formValidation();">
-	<table class="tbl" border="1" width="$PRC_WIDTH%">
+	<table class="tbl" border="0" width="$PRC_WIDTH%">
 	<tr class="r0"><td colspan="3"><b>* LOG ENTRY FORM *</b></td></tr>	
 	<tr>
 	<td style="text-align:right;  vertical-align:top">Date:</td>
@@ -447,7 +450,7 @@ $cats
 	</tr>
 	<tr><td style="text-align:right; vertical-align:top">Log:</td>
 		<td id="al" colspan="2" style="text-align:top;">
-			<textarea id="el" name="log" rows="3" style="float:left; width:99%;" onFocus="toggleVisibility('cat_desc',true)"></textarea>
+			<textarea id="el" name="log" rows="3" style="float:left; width:99%;" onChange="toggleVisibility('cat_desc',true)"></textarea>
 		</td>	
 	</tr>
 		<tr><td style="text-align:right"><a id="to_bottom" href="#bottom" title="Go to bottom of page.">&#x21A1;</a>&nbsp;Ammount:</td>
diff --git a/htdocs/cgi-bin/wsrc/main.css b/htdocs/cgi-bin/wsrc/main.css
index dda847a..dbde0b7 100644
--- a/htdocs/cgi-bin/wsrc/main.css
+++ b/htdocs/cgi-bin/wsrc/main.css
@@ -130,7 +130,7 @@ img {
     padding: 5px;
     text-align: center;
     background: #ccffff;
-    margin-top: 20px;
+    margin-top: 15px;
     width: 280px;
     text-decoration-style: wavy;
 }
diff --git a/htdocs/cgi-bin/wsrc/main.js b/htdocs/cgi-bin/wsrc/main.js
index 42b3453..ad34812 100644
--- a/htdocs/cgi-bin/wsrc/main.js
+++ b/htdocs/cgi-bin/wsrc/main.js
@@ -11,8 +11,46 @@ function loadedBody(toggle) {
     if (toggle) {
         toggleSearch(document.getElementById("btn_srch"));
     }
-
-
+    $('#ed').poshytip({
+        content: "Select here date and time of your log.",
+        className: 'tip-yellowsimple',
+        showTimeout: 1,
+        alignTo: 'target',
+        alignX: 'center',
+        alignY: 'bottom',
+        offsetY: 5,
+        allowTipHover: false
+    });
+    $('#ec').poshytip({
+        content: "Select here the category for your log.",
+        className: 'tip-yellowsimple',
+        showTimeout: 1,
+        alignTo: 'target',
+        alignX: 'center',
+        alignY: 'bottom',
+        offsetY: 5,
+        allowTipHover: false
+    });
+    $('#el').poshytip({
+        content: "This is your log entry can't be empty.",
+        className: 'tip-yellowsimple',
+        showOn: 'focus',
+        alignTo: 'target',
+        alignX: 'left',
+        alignY: 'center',
+        offsetX: 5,
+        showTimeout: 100
+    });
+    $('#am').poshytip({
+        content: "Symbolic ammount in your local or preferred currency. Can be left empty.",
+        className: 'tip-yellowsimple',
+        showOn: 'focus',
+        alignTo: 'target',
+        alignX: 'left',
+        alignY: 'center',
+        offsetX: 5,
+        showTimeout: 100
+    });
     $('#ed').datetimepicker({
         dateFormat: 'yy-mm-dd',
         timeFormat: 'HH:mm:ss',
@@ -22,6 +60,8 @@ function loadedBody(toggle) {
         firstDay: 1
     });
 
+
+
     $("input[type=submit], input[type=reset], .ui-widget-content, button").button();
 
 
-- 
2.34.1