some user interface tweaks

[chaz/chatty] / root / tt / wrapper.tt
diff --git a/root/tt/wrapper.tt b/root/tt/wrapper.tt

index 7599375496479d2ef5ef3f76523a27faca3f2e14..87d510628de4799a1f458950054dd445a607bf23 100644 (file)
--- a/root/tt/wrapper.tt
+++ b/root/tt/wrapper.tt
@@ -5,19 +5,31 @@
                 <meta name="author" content="Charles McGarvey">
                 <meta name="description" content="This is a chat application in Catalyst!">
                 <link rel="stylesheet" type="text/css" href="[% c.uri_for('/static/css/common.css') %]">
+               <link rel="stylesheet" type="text/css" href="[% c.uri_for('/static/css/validationEngine.jquery.css') %]">
                 <title>Chatty - [% template.title or 'Toy chat application written in Perl/Catalyst' %]</title>
         </head>
         <body>
                 <div id="outer">
  [% IF error -%]
-                               <p id="error">[% error %]</p>
+                       <div id="error">
+                               [% error %]
+                       </div>
  [% END -%]
  [% IF message -%]
-                               <p id="message">[% message %]</p>
+                       <div id="message">
+                               [% message %]
+                       </div>
  [% END -%]
                         <div id="inner">
-[% content %]
-                               <hr>
+                               <div class="right">
+[% IF c.user_exists -%]
+                                       Logged in as [% c.user.obj.username %]. <a href="[% c.uri_for_action('logout') %]">Log Out</a>
+[% END -%]
+                               </div>
+                               <a href="[% c.uri_for('/') %]">
+                                       <img src="[% c.uri_for('/static/img/chat.png') %]" alt="Chat!">
+                               </a>
+[% content -%]
                                 <div id="footer">
                                         Copyright &copy; 2011 Charles McGarvey. Some rights reserved.
                                         <div class="right">
@@ -28,16 +40,27 @@
                                 </div>
                         </div>
                 </div>
-               <script type="text/javascript" src="[% c.uri_for('/static/js/jquery.tools-1.2.6.min.js') %]"></script>
+               <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
+               <script type="text/javascript" src="[% c.uri_for('/static/js/jquery.validationEngine-2.2.1.min.js') %]"></script>
+               <script type="text/javascript" src="[% c.uri_for('/static/js/jquery.validationEngine-en.js') %]"></script>
                 <script type="text/javascript">
-[% IF error -%]
                         $(function () {
-                                       $("#error").expose({color: '#999'}).click(function() {
-                                                       $.mask.close();
-                                                       $(this).remove();
-                                               });
-                       });
+[% IF error -%]
+                               $('#error').click(function() {
+                                       $.mask.close();
+                                       $(this).slideUp('fast');
+                               });
+                               $('#error').delay(200).slideDown('fast').fadeOut('fast').fadeIn('fast').fadeOut('fast').fadeIn('fast');
  [% END -%]
+[% IF message -%]
+                               $('#message').click(function() {
+                                       $(this).slideUp('fast');
+                               });
+                               $('#message').delay(200).slideDown('fast');
+                               setTimeout("$('#message').slideUp()", 5000);
+[% END -%]
+[% TRY; INCLUDE js; CATCH; ''; END -%]
+                       });
                 </script>
         </body>
  </html>