First off, we're going to set up a quick skeleton of what we're going to

be looking at. We're not super worried about seeing online users at the moment; all we want to implement is basic chat. So our template contains just enough to display chat and give us a field to type our chat into. We use a bit of bootstrap magic and some simple styles of our own to fix the message and post buttons to the bottom of the screen. We also style the ordered list tag that we'll be using to display chats so that it has the traditional chat content layout. Now we have our base view to work with; our next step is the backend logic. Note that we won't be hooking anything up with the client side yet; we're just going to set up the comet interactions that will post and receive messages. We'll do the actual form interactions and knockout bindings after all the infrastructure is set up on both ends.
Shadowfiend · Mar 19, 2012 · e20dbdd · e20dbdd
1 parent 35c7d0c
commit e20dbdd
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 2 deletions.
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
@@ -6,8 +6,24 @@
   </head>
 
   <body class="lift:content_id=main">
-    <div id="main" class="lift:surround?with=default;at=content">
-      <h2>Chat time!</h2>
+    <div id="main" class="lift:surround?with=default;at=content container-fluid">
+      <h2 class="row-fluid">Chat time!</h2>
+
+      <ol id="chat-contents" class="row-fluid">
+        <li class="row-fluid">
+          <p class="poster span1"><a href="/users/superman">Superman</a>:</p>
+
+          <p class="body span11">This is a sample chat message!</p>
+        </li>
+      </ol>
+
+      <form class="chat form-horizontal row-fluid">
+        <input id="chat-message" type="text" placeholder="Type your message…" class="span11" />
+
+        <button class="btn span1" type="submit">
+          Post
+        </button>
+      </form>
     </div>
   </body>
 </html>

diff --git a/src/main/webapp/stylesheets/chat.css b/src/main/webapp/stylesheets/chat.css
@@ -0,0 +1,36 @@
+html, body {
+  height: 100%;
+}
+
+#main {
+  padding-top: 40px;
+}
+
+/* Chat display. */
+#chat-contents {
+  list-style-type: none;
+
+  margin: 0;
+  padding: 0;
+}
+
+/* Chat fields and form. */
+form.chat {
+  position: fixed;
+
+  bottom: 0;
+  left: 20px;
+  right: 20px;
+
+  width: auto;
+}
+
+#chat-message {
+  height: auto;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
diff --git a/src/main/webapp/templates-hidden/default.html b/src/main/webapp/templates-hidden/default.html
@@ -12,6 +12,8 @@
 
     <link type="text/css" rel="stylesheet" href="/stylesheets/bootstrap.css" />
     <link type="text/css" rel="stylesheet" href="/stylesheets/bootstrap-responsive.css" />
+
+    <link type="text/css" rel="stylesheet" href="/stylesheets/chat.css" />
   </head>
   <body>
     <nav class="navbar navbar-fixed-top">