Fixed error box with multiple messages, slightly more styling.

diff --git a/frontend/index.html b/frontend/index.html
index 8571bc2749cddfcd8d609e70083205cab4381534..5105166458e876758695c948b5c70a8b9ce8b478 100644 (file)
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -19,6 +19,7 @@ $(document).ready(function () {
 
 <div id="error" class="message">
 <!-- populated by JS -->
+<p><small>click to close</small></p>
 </div>
 
 <div id="body">

diff --git a/frontend/style.css b/frontend/style.css
index 9673b40851754567a14d7fd8ca1b66bcb0da73c9..0481bf6756f73e931aa58151b6946f01351985f1 100644 (file)
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -2,6 +2,13 @@
        display:none;
 }
 
+div#error {
+       background-color:#aa0000;
+       border:solid 1px black;
+       padding:.2em;
+       margin:.5em;
+}
+
 div#banner {
        text-align:center;
        margin:0 auto;

diff --git a/frontend/webos.js b/frontend/webos.js
index f22820e93078dccde06b6e4546c915028876d69e..1a4ea55fa30917cc7a6ff6d7689a46e2650242c5 100644 (file)
--- a/frontend/webos.js
+++ b/frontend/webos.js
@@ -22,7 +22,11 @@ function processResponse(resp) {
                        }
                }
        } else {
-               $("div#error").html(resp.error.reason);
-               $("div#error").fadeIn('fast').delay(5000).fadeOut('slow');
+               $("div#error").append('<p>'+resp.error.reason+'</p>');
+               $("div#error").slideDown(400);
+               $("div#error").click(function () {
+                       $("div#error").slideUp(400);
+                       $("div#error").html('<p><small>click to close</small></p>');
+               });
        }
 }