From c73f4d71a7cf91b625111b6958b2091d5801f399 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Mon, 9 Mar 2015 14:50:50 -0700
Subject: [PATCH] DRY up scrollable pattern

Switch to using gutter class instead of id since there is potentially
more than one usage on the page.
---
 index.html               | 40 +++++++++++++++++++++-------------------
 js/views/inbox_view.js   |  3 ++-
 stylesheets/_index.scss  |  5 +++--
 stylesheets/manifest.css |  5 +++--
 4 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index 076e6cd9..eaadc745 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,8 @@
           <div class='title-bar' id='header'>
             <div class='socket-status'></div>
           </div>
-          <div id='gutter' class='gutter'>
-              <div id='contacts'></div>
+          <div class='gutter'>
+              <div class='conversations scrollable'></div>
               <span class='fab'></span>
           </div>
         </script>
@@ -52,24 +52,26 @@
               <button class='back'></button>
               <span class='title-text'>New Message</span>
             </div>
-            <div id='gutter' class='gutter'>
-              <div class='new-group-update-form clearfix'>
-                <div class='group-avatar'>
-                  <div class='paperclip'></div>
-                  <input type='file' name='avatar' class='file-input'>
+            <div class='gutter'>
+              <div class='scrollable'>
+                <div class='new-group-update-form clearfix'>
+                  <div class='group-avatar'>
+                    <div class='paperclip'></div>
+                    <input type='file' name='avatar' class='file-input'>
+                  </div>
+                  <input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
+                </div>
+                <div class='recipients-container'>
+                  <span class='recipients'></span>
+                  <input type='text' class='new-message' placeholder="Name or phone number" />
+                </div>
+                <div class='buttons'>
+                  <button class='create'>Next</button>
+                </div>
+                <div class='results'>
+                  <div class='new-contact contact'></div>
+                  <div class='contacts'></div>
                 </div>
-                <input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
-              </div>
-              <div class='recipients-container'>
-                <span class='recipients'></span>
-                <input type='text' class='new-message' placeholder="Name or phone number" />
-              </div>
-              <div class='buttons'>
-                <button class='create'>Next</button>
-              </div>
-              <div class='results'>
-                <div class='new-contact contact'></div>
-                <div class='contacts'></div>
               </div>
             </div>
         </script>
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 6c1d9d26..f4901b25 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -55,6 +55,7 @@
 
     Whisper.InboxView = Whisper.View.extend({
         template: $('#inbox').html(),
+        className: 'inbox',
         initialize: function () {
             this.render();
 
@@ -64,7 +65,7 @@
                 this.openConversation.bind(this, null));
 
             this.inbox = new Whisper.ConversationListView({
-                el         : this.$el.find('#contacts'),
+                el         : this.$el.find('.conversations'),
                 collection : bg.inbox
             }).render();
 
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 9ca4e78e..c5a16611 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -2,10 +2,11 @@
   padding: $header-height 0 0;
 }
 
-.gutter, #contacts {
+.new-conversation, .inbox, .gutter {
   height: 100%;
 }
-#contacts {
+.scrollable {
+  height: 100%;
   overflow: auto;
 }
 
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index ce5ef48b..4e3a43a0 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -137,10 +137,11 @@ button.back {
 .gutter {
   padding: 36px 0 0; }
 
-.gutter, #contacts {
+.new-conversation, .inbox, .gutter {
   height: 100%; }
 
-#contacts {
+.scrollable {
+  height: 100%;
   overflow: auto; }
 
 .socket-status {