making contacts scrollable

css/base.css

@@ -11,77 +11,76 @@ html, body {
   width:100%;
 }
 
-/* Top-level layout style: sidebar + main view */
+/* Top-level layout style: sidepanel + main view */
 #mountPoint {
-    padding-left: 0;
-    transition: all 0.5s ease;
-    height: 100%;
+  padding-left: 0;
+  transition: all 0.5s ease;
+  height: 100%;
 }
 
 #mountPoint.toggled {
-    padding-left: 30em;
+  padding-left: 30em;
 }
 
-#sidebar-wrapper {
-    position: fixed;
-    left: 30em;
-    width: 0;
-    height: 100%;
-    margin-left: -30em;
-    overflow-y: auto;
-    transition: all 0.5s ease;
+#sidepanel-wrapper {
+  position: fixed;
+  left: 30em;
+  width: 0;
+  height: 100vh;
+  margin-left: -30em;
+  transition: all 0.5s ease;
 }
 
-#mountPoint.toggled #sidebar-wrapper {
-    width: 30em;
+#mountPoint.toggled #sidepanel-wrapper {
+  width: 30em;
 }
 
 #page-content-wrapper {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background-color: #CCF
+  width: 100%;
+  height: 100%;
+  position: absolute;
 }
 
 #mountPoint.toggled #page-content-wrapper {
-    position: absolute;
-    margin-right: -30em;
+  position: absolute;
+  margin-right: -30em;
 }
 
-.sidebar-nav {
-    position: absolute;
-    top: 0;
-    width: 30em;
-    margin: 0;
-    padding: 0;
+.sidepanel-nav {
+  position: absolute;
+  top: 0;
+  width: 30em;
+  margin: 0;
+  padding: 0;
+  x-height: 100%;
 }
 
 @media(min-width:768px) {
-    #mountPoint {
-        padding-left: 30em;
-    }
+  #mountPoint {
+    padding-left: 30em;
+  }
 
-    #mountPoint.toggled {
-        padding-left: 0;
-    }
+  #mountPoint.toggled {
+    padding-left: 0;
+  }
 
-    #sidebar-wrapper {
-        width: 30em;
-    }
+  #sidepanel-wrapper {
+    width: 30em;
+  }
 
-    #mountPoint.toggled #sidebar-wrapper {
-        width: 0;
-    }
+  #mountPoint.toggled #sidepanel-wrapper {
+    width: 0;
+  }
 
-    #page-content-wrapper {
-        position: relative;
-        height: 100%;
-    }
+  #page-content-wrapper {
+    position: relative;
+    height: 100%;
+  }
 
-    #mountPoint.toggled #page-content-wrapper {
-        position: relative;
-        margin-right: 0;
-    }
+  #mountPoint.toggled #page-content-wrapper {
+    position: relative;
+    margin-right: 0;
+  }
 }
 /* END of top-level layout */
 
@@ -122,6 +121,8 @@ html, body {
 
 .contactList {
   padding: 0.5em;
+  height: 85vh;
+  overflow-y: scroll;
 }
 
 .contactList li {
@@ -154,7 +155,7 @@ html, body {
 }
 
 .fullViewPort {
-  height: 98vh;
+  height: 99vh;
   overflow-y: hidden;
 }
 

index.html

@@ -258,7 +258,7 @@
           default:;
         };
         return (
-          <div className="sidebar-nav">
+          <div className="sidepanel-nav">
             <SideNavbar state={this.props.state}
               title={title} avatar={avatar}
               onSignUp={this.props.onSignUp}
@@ -315,15 +315,15 @@
     });
 
     var contactsData = [
-      {id: "usrBOB", public: "Bob Smith", comment: "This is another comment", online: {now: true}, unread: 0},
-      {id: "usrCAROL", public: "Carol Xmas", comment: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2},
-      {id: "usrDAVE", public: "Dave Goliaphsson", comment: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0},
-      {id: "usrBOB2", public: "Bob Smith", comment: "This is another comment", online: {now: true}, unread: 0},
-      {id: "usrCAROL2", public: "Carol Xmas", comment: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2},
-      {id: "usrDAVE2", public: "Dave Goliaphsson", comment: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0},
-      {id: "usrBOB3", public: "Bob Smith", comment: "This is another comment", online: {now: true}, unread: 0},
-      {id: "usrCAROL3", public: "Carol Xmas", comment: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2},
-      {id: "usrDAVE3", public: "Dave Goliaphsson", comment: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0}
+      {topic: "usrBOB", public: "Bob Smith", private: "This is another comment", online: {now: true}, unread: 0},
+      {topic: "usrCAROL", public: "Carol Xmas", private: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2},
+      {topic: "usrDAVE", public: "Dave Goliaphsson", private: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0},
+      {topic: "usrBOB2", public: "Bob Smith", private: "This is another comment", online: {now: true}, unread: 0},
+      {topic: "usrCAROL2", public: "Carol Xmas", private: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2},
+      {topic: "usrDAVE2", public: "Dave Goliaphsson", private: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0},
+      {topic: "usrBOB3", public: "Bob Smith", private: "This is another comment", online: {now: true}, unread: 0},
+      {topic: "usrCAROL3", public: "Carol Xmas", private: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2},
+      {topic: "usrDAVE3", public: "Dave Goliaphsson", private: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0}
     ];
 
     /* A single topic */
@@ -405,7 +405,7 @@
       }
     });
 
-    /* The panel to hold all contacts-related stuff together */
+    /* The panel holds all contacts-related stuff */
     var ContactsView = React.createClass({
       render: function() {
         return (
@@ -624,7 +624,7 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
         return (
           <div className="fullScreen">
 
-          <div id="sidebar-wrapper">
+          <div id="sidepanel-wrapper">
             <SidepanelView
               state={this.state.sidePanel}
               title={this.state.sideTitle}