Bootstrap navbar and message list

themes/bootstrap/templates/mailbox/_list.html

@@ -1,12 +1,12 @@
 {{$name := .name}}
 {{range .messages}}
-<div class="box listEntry" id="{{.Id}}">
-	<div class="subject">{{.Subject}}</div>
-	<div class="from">{{.From}}</div>
-	<div class="date">{{friendlyTime .Date}}</div>
-</div>
+<button id="{{.Id}}" type="button" class="listEntry list-group-item">
+  <div class="row">
+    <div class="col-sm-4 col-md-12 text-primary">{{.Subject}}</div>
+    <div class="col-sm-4 col-md-12 small">{{.From}}</div>
+    <div class="col-sm-4 col-md-12 small">{{friendlyTime .Date}}</div>
+  </div>
+</button>
 {{else}}
-<div class="box">
-	<p style="height: 30px; padding-left: 10px;">No messages!</p>
-</div>
+<div class="list-group-item disabled">No messages!</div>
 {{end}}

themes/bootstrap/templates/mailbox/index.html

@@ -13,19 +13,13 @@
   }
 
   function listLoaded() {
-    $('.listEntry').hover(
-    function() {
-      $(this).addClass("listEntryHover")
-    },
-    function() {
-      $(this).removeClass("listEntryHover")
-    }
-    ).click(
-    function() {
-      $('.listEntry').removeClass("listEntrySelected")
-      $(this).addClass("listEntrySelected")
-      $('#emailContent').load('/mailbox/{{.name}}/' + this.id, messageLoaded)
-    }
+    $('.listEntry').click(
+      function() {
+        $('.listEntry').removeClass("disabled")
+        $(this).addClass("disabled")
+        $('#emailContent').load('/mailbox/{{.name}}/' + this.id, messageLoaded)
+        selected = this.id
+      }
     )
     $("#messageList").slideDown()
     if (selected != "") {
@@ -73,20 +67,36 @@
 </script>
 {{end}}
 
-{{define "menu"}}
-<div id="logo">
-  <h1><a href="#">inbucket</a></h1>
-  <h2>mail for {{.name}}</h2>
-</div>
-<div class="box" style="text-align:center; padding-bottom:10px;">
-  <a href="javascript:reloadList()">Refresh List</a>
-</div>
-<div id="messageList"></div>
-{{end}}
-
 {{define "content"}}
-<div id="emailContent">
-  <p>Select a message at left, or enter a different username into the box on upper right.</p>
+<div class="panel panel-primary">
+  <div class="panel-body text-center mailbox-header">
+    <span class="glyphicon glyphicon-inbox" aria-hidden="true"></span>
+    {{.name}}
+  </div>
+</div>
+<div class="col-md-3">
+  <div class="text-center">
+    <a href="javascript:reloadList()">
+      <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
+      Refresh
+    </a>
+  </div>
+  <div id="messageList" class="list-group"></div>
+</div>
+<div class="col-md-9">
+  {{with .ctx.Session.Flashes "errors"}}
+  <div class="errors">
+    <p>Please fix the following errors and resubmit:<p>
+    <ul>
+      {{range .}}
+      <li>{{.}}</li>
+      {{end}}
+    </ul>
+  </div>
+  {{end}}
+  <div id="emailContent">
+    <p>Select a message at left, or enter a different username into the box on upper right.</p>
+  </div>
 </div>
 {{end}}