Fix list view scrolling

Resize handlers are ugly. But not as ugly as scroll handlers. :p
Normalized some whitespace along the way.

conversation.html

@@ -32,7 +32,7 @@
 
             <div class='discussion-container'></div>
 
-            <div class="bottom-bar">
+            <div class="bottom-bar" id='footer'>
                 <form class='send'>
                     <div class='attachments'>
                         <div class='paperclip'></div>

js/views/conversation_view.js

@@ -42,6 +42,7 @@
             if (this.model.id) {
                 this.model.fetchMessages({reset: true});
             }
+            window.addEventListener('resize', this.view.resize.bind(this.view));
         },
 
         events: {

js/views/inbox_view.js

@@ -45,6 +45,7 @@
                     this.conversations.get(message.conversationId).fetchMessages();
                 }.bind(this));
             }.bind(this));
+            window.addEventListener('resize', this.inbox.resize.bind(this.inbox));
         },
         events: {
             'keyup': 'keyup',

js/views/list_view.js

@@ -43,6 +43,18 @@ var Whisper = Whisper || {};
         addAll: function() {
             this.$el.html('');
             this.collection.each(this.addOne, this);
+            this.resize();
+        },
+
+        resize: function() {
+            var height = window.innerHeight - $('#header').height() - $('#footer').height();
+            if (this.$el.height() > height) {
+                this.$el.css('height', height + 'px');
+                this.$el.css('overflow-y', 'scroll');
+            } else {
+                this.$el.css('height', 'auto');
+                this.$el.css('overflow-y', 'auto');
+            }
         }
     });
 })();

js/views/message_list_view.js

@@ -33,6 +33,6 @@ var Whisper = Whisper || {};
         addAll: function() {
             Whisper.ListView.prototype.addAll.apply(this, arguments); // super()
             this.scrollToBottom();
-    },
+        }
     });
 })();

stylesheets/_conversation.scss

@@ -66,10 +66,11 @@ button {
 
 
 .message-list {
-  margin: 36px + 16px 0;
+  max-height: 100%;
-  padding: 0;
+  margin: 0;
+  padding: 1em 0;
   list-style: none;
-  font-weight: 300;
+  overflow-y: scroll;
 
   li {
     margin: 0 8px 16px;

stylesheets/_global.scss

@@ -1,6 +1,5 @@
 * {
   box-sizing: border-box;
-  max-height: 100%;
 }
 
 body {

stylesheets/_index.scss

@@ -2,6 +2,10 @@
   margin-top: 36px;
 }
 
+#contacts {
+  overflow-y: scroll;
+}
+
 .loading .gutter {
   // TODO: spinner
 }

stylesheets/manifest.css

@@ -3,8 +3,7 @@
   font-family: 'Roboto';
   src: url("/fonts/Roboto-Regular.ttf") format("truetype"); }
 * {
-  box-sizing: border-box;
+  box-sizing: border-box; }
-  max-height: 100%; }
 
 body {
   height: 100%;
@@ -26,6 +25,9 @@ body {
 .gutter {
   margin-top: 36px; }
 
+#contacts {
+  overflow-y: scroll; }
+
 .contact .checkbox {
   display: none; }
 
@@ -194,10 +196,11 @@ button {
   content: "✓"; }
 
 .message-list {
-  margin: 52px 0;
+  max-height: 100%;
-  padding: 0;
+  margin: 0;
+  padding: 1em 0;
   list-style: none;
-  font-weight: 300; }
+  overflow-y: scroll; }
   .message-list li {
     margin: 0 8px 16px; }
     .message-list li::after {