Message formatting checkpoint

themes/bootstrap/public/inbucket.css

@@ -10,7 +10,8 @@ body {
 }
 
 .mailbox-header {
-  font-size: 20px;
+  text-align: center;
+  font-size: 18px;
 }
 
 .footer {
@@ -26,17 +27,34 @@ body {
   margin: 20px 0;
 }
 
+.message-controls {
+  padding: 10px 0;
+}
+
 #emailContent {
   padding-bottom: 20px;
 }
 
-#emailHeader {
+.message-header dl {
-  border-collapse: collapse;
+  margin-bottom: 0;
 }
 
-#emailHeader th, #emailHeader td {
+@media (min-width: 768px) {
-  text-align: left;
+  .message-header .dl-horizontal dt {
-  padding: 0 3px 3px 0;
+    width: 60px;
+  }
+
+  .message-header .dl-horizontal dd {
+    margin-left: 70px;
+  }
+}
+
+.message-attachments {
+  margin-top: 20px;
+}
+
+.message-attachments ul {
+  margin: 0
 }
 
 #emailSubject {
@@ -50,23 +68,6 @@ body {
   margin-top: 15px;
 }
 
-#emailActions {
-  padding: 5px 0;
-  margin: 0 0 10px 0;
-}
-
-#emailActions a {
-  background: #8ac6dc;
-  color: #fff;
-  text-decoration: none;
-  font-weight: bold;
-  padding: 5px;
-}
-
-#emailActions a:hover {
-  background: #becf74;
-}
-
 .errors {
   background-color: #ffa0a0;
   color: #333;

themes/bootstrap/templates/mailbox/_show.html

@@ -1,39 +1,60 @@
 {{$name := .name}}
 {{$id := .message.Id}}
-<div id="emailActions">
+<div class="btn-group btn-group-sm message-controls" role="group" aria-label="Message Controls">
-  <a href="/link/{{$name}}/{{$id}}">Link</a>
+  <button type="button"
-  <a href="javascript:deleteMessage('{{.message.Id}}');">Delete</a>
+          class="btn btn-default"
-  <a href="javascript:messageSource('{{.message.Id}}');">Source</a>
+          onClick="window.open('/link/{{$name}}/{{$id}}');">
+    <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
+    Link
+  </button>
+  <button type="button"
+          class="btn btn-default"
+          onClick="deleteMessage('{{.message.Id}}');">
+    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
+    Delete
+  </button>
+  <button type="button"
+          class="btn btn-default"
+          onClick="messageSource('{{.message.Id}}');">
+    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+    Source
+  </button>
   {{if .htmlAvailable}}
-    <a href="javascript:htmlView('{{.message.Id}}');">HTML</a>
+    <button type="button"
+            class="btn btn-default"
+            onClick="htmlView('{{.message.Id}}');">
+      <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
+      HTML
+    </button>
   {{end}}
 </div>
-<table id="emailHeader">
+
-  <tr>
+<div class="well well-sm message-header">
-    <th>From:</th>
+  <dl class="dl-horizontal">
-    <td>{{.message.From}}</td>
+    <dt>From:</dt>
-  </tr>
+    <dd>{{.message.From}}</dd>
-  <tr>
+    <dt>Date:</dt>
-    <th>Date:</th>
+    <dd>{{.message.Date}}</dd>
-    <td>{{.message.Date}}</td>
+    <dt>Subject:</dt>
-  </tr>
+    <dd>{{.message.Subject}}</dd>
-<table>
+  </dl>
+</div>
+
+<div id="message-body">{{.body}}</div>
 
 {{with .attachments}}
-<table id="emailAttachments">
+<div class="panel panel-default message-attachments">
-  <tr><th colspan="4">Attachments:</th></tr>
+  <div class="panel-body">
-  {{range $i, $e := .}}
+    <ul class="list-unstyled">
-  <tr>
+      {{range $i, $e := .}}
-    <td class="fileName">{{$e.FileName}}</td>
+      <li>
-    <td>({{$e.ContentType}})</td>
+        {{$e.FileName}}
-    <td><a href="/mailbox/vattach/{{$name}}/{{$id}}/{{$i}}/{{$e.FileName}}" target="_blank">View</a></td>
+        ({{$e.ContentType}})
-    <td><a href="/mailbox/dattach/{{$name}}/{{$id}}/{{$i}}/{{$e.FileName}}">Download</a></td>
+        <a href="/mailbox/vattach/{{$name}}/{{$id}}/{{$i}}/{{$e.FileName}}" target="_blank">View</a>
-  </tr>
+        <a href="/mailbox/dattach/{{$name}}/{{$id}}/{{$i}}/{{$e.FileName}}">Download</a>
-  {{end}}
+      </li>
-</table>
+      {{end}}
+    </ul>
+  </div>
+</div>
 {{end}}
-
-<div id="emailSubject"><h3>{{.message.Subject}}</h3></div>
-
-<div id="emailBody">{{.body}}</div>
-

themes/bootstrap/templates/mailbox/index.html

@@ -69,7 +69,7 @@
 
 {{define "content"}}
 <div class="panel panel-primary">
-  <div class="panel-body text-center mailbox-header">
+  <div class="panel-heading mailbox-header">
     <span class="glyphicon glyphicon-inbox" aria-hidden="true"></span>
     {{.name}}
   </div>