Basic AJAX GUI is now functional

app/views/Application/Index.html

@@ -3,13 +3,10 @@
 {{template "menu.html" .}}
 
 <div id="colTwo">
-  <h1>Inbucket</h1>
+  <p>Inbucket is an email testing service; it will accept email for any email
-
+  address and make it available to view without a password.</p>
-  <form action="/mailbox" method="GET">
+  <p>To view email for a particular address, enter the username portion
-    <b>Enter a username to view their mailbox</b>
+  of the address into the box on the upper right and click <em>go</em>.</p>
-    <input type="text" name="name">
-    <input type=submit value="Go">
-  </form>
 </div>
 
 {{template "footer.html" .}}

app/views/Mailbox/List.html

@@ -1,5 +1,24 @@
 {{template "header.html" .}}
 {{$name := .name}}
+<script>
+  $(document).ready(function() {
+    $('.listEntry').hover(
+      function() {
+	$(this).addClass("listEntryHover")
+      },
+      function() {
+	$(this).removeClass("listEntryHover")
+      }
+    ).click(
+      function() {
+	$('.listEntry').removeClass("listEntrySelected")
+	$(this).addClass("listEntrySelected")
+	$('#emailContent').load('/mailbox/show/{{$name}}/' + this.id)
+      }
+    )
+  });
+</script>
+
 <div id="colOne">
   <div id="logo">
     <h1><a href="#">inbucket</a></h1>
@@ -7,21 +26,23 @@
   </div>
 
   {{range .messages}}
-  <div class="box listEntry">
+  <div class="box listEntry" id="{{.Id}}">
     <div class="subject">{{/*<a href="/mailbox/show/{{$name}}/{{.Id}}">*/}}{{.Subject}}</div>
     <div class="from">{{.From}}</div>
     <div class="date">{{.Date}}</div>
   </div>
   {{else}}
   <div class="box">
-    No messages!
+    <p style="height: 30px; padding-left: 10px;">No messages!</p>
   </div>
   {{end}}
 </div>
 
 <div id="colTwo">
+  <div id="emailContent">
     <p>Select a message at left, or enter a different username into the box on upper right.</p>
   </div>
+</div>
 
 {{template "footer.html" .}}
 

app/views/Mailbox/Show.html

@@ -1,7 +1,4 @@
-{{template "header.html" .}}
+<table id="emailHeader">
-
-<h1>{{.message.Subject}}</h1>
-<table>
 	<tr>
 		<th>From:</th>
 		<td>{{.message.From}}</td>
@@ -11,8 +8,7 @@
 		<td>{{.message.Date}}</td>
 	</tr>
 <table>
+<h3 id="emailSubject">{{.message.Subject}}</h3>
 
-<pre>{{.body}}</pre>
+<pre id="emailBody">{{.body}}</pre>
-
-{{template "footer.html" .}}
 

app/views/header.html

@@ -10,7 +10,7 @@ Released for free under a Creative Commons Attribution 2.5 License
 <title>{{.title}}</title>
 <link href="/public/stylesheets/main.css" rel="stylesheet" type="text/css" />
 <link rel="shortcut icon" type="image/png" href="/public/images/favicon.png">
-<script src="/public/javascripts/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="/public/js/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
 {{range .moreStyles}}
   <link rel="stylesheet" type="text/css" href="/public/{{.}}">
 {{end}}
@@ -22,7 +22,7 @@ Released for free under a Creative Commons Attribution 2.5 License
 <div id="header">
 	<ul id="menu">
 		<li><a href="/" accesskey="1" title="">Home</a></li>
-		<li><a href="/about" accesskey="2" title="">About</a></li>
+		<li><a href="/" accesskey="2" title="">About</a></li>
 	</ul>
 	<form id="search" action="/mailbox" method="GET">
 		<fieldset>

public/stylesheets/main.css

@@ -10,7 +10,7 @@ body {
 	margin: 20px 0;
 	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 	font-size: 12px;
-	color: #A1A1A1;
+	color: #808080;
 }
 
 h1 {
@@ -253,3 +253,35 @@ a:hover {
   color: #2582A4;
   font-weight: bold;
 }
+
+.listEntrySelected {
+  background: #becf74;
+  color: #666;
+}
+
+.listEntryHover {
+  background: #8ac6dc;
+  color: #666;
+}
+
+#emailContent {
+  padding-bottom: 20px;
+}
+
+#emailHeader {
+  border-collapse: collapse;
+}
+
+#emailHeader th, #emailHeader td {
+  text-align: left;
+  padding: 0 3px 3px 0;
+}
+
+#emailSubject {
+  border-bottom: 1px #606060 solid;
+}
+
+#emailBody {
+  color: #000000;
+}
+