Make message-list scroll on some devices

themes/bootstrap/public/inbucket.css

@@ -29,6 +29,10 @@ body {
   font-size: 18px;
 }
 
+.message-list-scroll {
+  overflow-y: auto;
+}
+
 .message-controls {
   padding: 0 0 10px 0;
 }

themes/bootstrap/public/mailbox.js

@@ -1,8 +1,13 @@
+var navBarOffset = 75;
+var mediumDeviceWidth = 980;
+var messageListMargin = 275;
+
 function messageLoaded(responseText, textStatus, XMLHttpRequest) {
   if (textStatus == "error") {
     alert("Failed to load message, server said:\n" + responseText);
   } else {
-    window.scrollTo(0,0);
+    var top = $('#message-container').offset().top - navBarOffset;
+    $(window).scrollTop(top);
   }
 }
 
@@ -11,11 +16,11 @@ function listLoaded() {
       function() {
         $('.listEntry').removeClass("disabled");
         $(this).addClass("disabled");
-        $('#emailContent').load('/mailbox/' + mailbox + '/' + this.id, messageLoaded);
+        $('#message-content').load('/mailbox/' + mailbox + '/' + this.id, messageLoaded);
         selected = this.id;
       }
       )
-    $("#messageList").slideDown();
+    $("#message-list").slideDown();
   if (selected != "") {
     $("#" + selected).click();
     selected = "";
@@ -23,21 +28,32 @@ function listLoaded() {
 }
 
 function loadList() {
-  $('#messageList').load('/mailbox/' + mailbox, listLoaded);
+  $('#message-list').load('/mailbox/' + mailbox, listLoaded);
 }
 
 function reloadList() {
-  $('#messageList').hide();
+  $('#message-list').hide();
   loadList();
 }
 
+function windowResize() {
+  if ($(window).width() > mediumDeviceWidth) {
+    var content_height = $(window).height() - messageListMargin;
+    $('#message-list-wrapper').height(content_height).addClass("message-list-scroll");
+  } else {
+    $('#message-list-wrapper').height('auto').removeClass("message-list-scroll");
+  }
+}
+
 function listInit() {
-  $("#messageList").hide();
+  $("#message-list").hide();
+  windowResize();
+  $(window).resize(windowResize);
   loadList();
 }
 
 function deleteMessage(id) {
-  $('#emailContent').empty();
+  $('#message-content').empty();
   $.ajax({
     type: 'DELETE',
     url: '/mailbox/' + mailbox + '/' + id,

themes/bootstrap/templates/mailbox/index.html

@@ -28,9 +28,11 @@ $(document).ready(function() {
       Refresh
     </a>
   </div>
-  <div id="messageList" class="list-group"></div>
+  <div id="message-list-wrapper">
+    <div id="message-list" class="list-group"></div>
+  </div>
 </div>
-<div class="col-md-9">
+<div id="message-container" class="col-md-9">
   {{with .ctx.Session.Flashes "errors"}}
   <div class="errors">
     <p>Please fix the following errors and resubmit:<p>
@@ -41,7 +43,7 @@ $(document).ready(function() {
     </ul>
   </div>
   {{end}}
-  <div id="emailContent">
+  <div id="message-content">
     <p>Select a message at left, or enter a different username into the box on upper right.</p>
   </div>
 </div>