daily commit

css/base.css

@@ -2,36 +2,96 @@ html, body {
   margin:0;
   padding:0;
   height:100%;
+  width:100%;
+  overflow-x: hidden;
 }
 
 .fullScreen {
-  width: 100%!important;
+  height:100%;
-  height: 100%!important;
+  width:100%;
 }
 
-.menuContainer {
+/* Top-level layout style: sidebar + main view */
-  width: 30em;
+#mountPoint {
-  margin: 0;
+    padding-left: 0;
-  padding: 0;
+    transition: all 0.5s ease;
-  position: fixed;
+    height: 100%;
-  height: 100%;
 }
 
-.messagesContainer {
+#mountPoint.toggled {
-  margin-left: 30em;
+    padding-left: 30em;
 }
 
-.messagesContainer {
+#sidebar-wrapper {
-  width: auto;
+    position: fixed;
-  height: 100%;
+    left: 30em;
+    width: 0;
+    height: 100%;
+    margin-left: -30em;
+    overflow-y: auto;
+    transition: all 0.5s ease;
 }
 
+#mountPoint.toggled #sidebar-wrapper {
+    width: 30em;
+}
+
+#page-content-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: #CCF
+}
+
+#mountPoint.toggled #page-content-wrapper {
+    position: absolute;
+    margin-right: -30em;
+}
+
+.sidebar-nav {
+    position: absolute;
+    top: 0;
+    width: 30em;
+    margin: 0;
+    padding: 0;
+}
+
+@media(min-width:768px) {
+    #mountPoint {
+        padding-left: 30em;
+    }
+
+    #mountPoint.toggled {
+        padding-left: 0;
+    }
+
+    #sidebar-wrapper {
+        width: 30em;
+    }
+
+    #mountPoint.toggled #sidebar-wrapper {
+        width: 0;
+    }
+
+    #page-content-wrapper {
+        position: relative;
+        height: 100%;
+    }
+
+    #mountPoint.toggled #page-content-wrapper {
+        position: relative;
+        margin-right: 0;
+    }
+}
+/* END of top-level layout */
+
 .avatar {
   width: 32pt;
   height: auto;
 }
 
 .navbar {
+  height: 64px;
   margin-bottom: 0.2em;
 }
 
@@ -73,6 +133,47 @@ html, body {
   color: #999;
 }
 
+.fullHeight {
+  height: 100%;
+  overflow: hidden;
+}
+
+.fullViewPort {
+  height: 98vh;
+  overflow-y: hidden;
+}
+
+.col-lg-12 {
+  padding: 0;
+  margin: 0;
+}
+
+#chatTitle {
+  z-index: 2;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 64px;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+#messagesPanel {
+  overflow-y: scroll;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+#messagesView {
+  padding-top: 70px;
+}
+
+#sendMessagePanel {
+  position: absolute;
+  bottom: 0;
+  box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.15);
+}
+
 .chatBox {
   list-style: none;
   padding: 1.5em 0 1.5em;
@@ -82,6 +183,7 @@ html, body {
 .chatBox > li {
   margin-bottom: 1em;
   position: relative;
+  x-white-space: pre;
 }
 
 .chatBox > li:before,
@@ -160,8 +262,3 @@ html, body {
 .chatBox-body > p + p {
   margin-top: 0.5em;
 }
-
-footer {
-  position: fixed;
-  bottom: 0;
-}

index.html

@@ -15,7 +15,7 @@
   </head>
   </head>
   <body>
-    <div id="mountPoint" class="fullScreen"></div>
+    <div id="mountPoint"></div>
     <script type="text/babel">
     function shortDateFormat(then) {
 	    var now = new Date();
@@ -144,13 +144,19 @@ eleifend fringilla urna euismod tristique. Nullam at magna vel mauris rutrum fin
 Nulla vitae est aliquam, egestas nunc dapibus, dapibus risus.\
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. \
 Nullam vitae condimentum lectus, quis maximus elit.\
-<br />\
+\
 Nunc ac nisi risus. Integer eget augue vel risus commodo blandit. Nulla faucibus convallis neque sed eleifend. Vestibulum\
 dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac habitasse platea dictumst.",
         timestamp: new Date(2016, 0, 1, 2, 3, 4, 567),
         response: true
       },
-      {id: 3, content: "OK!", timestamp: new Date(2016, 0, 2, 15, 16, 17, 567), response: false}
+      {id: 3, content: "Ooga chaka ooga ooga!", timestamp: new Date(2016, 0, 2, 16, 17, 18, 567), response: false},
+      {id: 4, content: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. \
+      Nullam vitae condimentum lectus, quis maximus elit.", timestamp: new Date(2016, 0, 3, 1, 2, 3, 567), response: true},
+      {id: 5, content: "Integer sodales accumsan sem, ut malesuada velit egestas vel. Aenean consequat consectetur justo eget venenatis.",
+        timestamp: new Date(2016, 0, 3, 4, 5, 6, 567), response: true},
+      {id: 6, content: "No way.", timestamp: new Date(2016, 0, 3, 15, 16, 17, 567), response: false},
+      {id: 7, content: "OK!", timestamp: new Date(2016, 0, 3, 18, 19, 20, 567), response: true}
     ];
 
     var Contact = React.createClass({
@@ -320,27 +326,34 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
       },
       render: function() {
         return (
-          <div className="container-fluid fullScreen">
+          <div className="fullScreen">
-          <div className="row fullScreen">
+
-            <div className="menuContainer">
+          <div id="sidebar-wrapper">
+            <div className="sidebar-nav">
               {this.state.loggedIn ? <ContactsView data={contactsData} /> : <LoginView onLogin={this.handleLogin} />}
             </div>
-            <div className="col-md-12 messagesContainer">
+          </div>
-              <div className="row fullScreen">
+
-              <div className="panel panel-default fullScreen">
+          <div id="page-content-wrapper">
-                <div className="panel-heading">
+            <div className="container-fluid fullHeight">
-                  <h3 className="panel-title">{this.state.chatTitle}</h3>
+              <div className="row fullHeight">
+                <div className="col-lg-12 fullHeight">
+                  <div className="panel panel-default fullViewPort" id="messagesPanel">
+                    <div className="panel-heading" id="chatTitle">
+                      <h3 className="panel-title">{this.state.chatTitle}</h3>
+                    </div>
+                    <div className="panel-body" id="messagesView">
+                      <MessagesView />
+                    </div>
+                    <div className="panel-footer" id="sendMessagePanel">
+                      <Message.Send />
+                    </div>
+                  </div>
                 </div>
-                <div className="panel-body">
-                  <MessagesView />
-                </div>
-                <div className="panel-footer">
-                  <Message.Send />
-                </div>
-              </div>
               </div>
             </div>
           </div>
+
           </div>
         );
       }