Adding a new stylesheet irc.styl using the stylus pre-processor

chrismatthieu · Feb 6, 2011 · faa9341 · faa9341
1 parent 78e09a5
commit faa9341
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 51 deletions.
diff --git a/irc.js b/irc.js
@@ -7,6 +7,7 @@ var ircjs = require('irc-js');
 var app = express.createServer();
 
 app.configure(function(){
+  app.use(express.compiler({ src: __dirname + '/public', enable: ['stylus'] }));
   app.use(express.staticProvider(__dirname + '/public'));
 });
 

diff --git a/public/css/irc.css b/public/css/irc.css
@@ -0,0 +1,71 @@
+* {
+  margin: 0;
+}
+body {
+  background: #fff;
+  color: #222;
+  font: 12px Helvetica, Arial, sans-serif;
+  padding: 0 0 30px;
+}
+#nick_list {
+  display: none;
+  float: right;
+  width: 150px;
+}
+#chat_body {
+  padding: 10px;
+  width: 100%;
+}
+#chat_body,
+#chat_body th,
+#chat_body td {
+  vertical-align: top;
+}
+#chat_body .author {
+  font-weight: bold;
+  padding: 2px 4px 2px 10px;
+  text-align: right;
+  width: 100px;
+}
+#chat_body .msg {
+  background: #f6f6f6;
+  padding: 2px 6px;
+}
+#chat_body .me .author {
+  font-style: italic;
+}
+#chat_body tr:nth-child(2n) .msg {
+  background: #efefef;
+}
+#chat_bar {
+  background: #fff;
+  bottom: 0;
+  left: 0;
+  padding: 5px;
+  position: fixed;
+  right: 0;
+  z-index: 1000;
+}
+#chat_bar,
+#chat_bar button {
+  height: 25px;
+  line-height: 25px;
+}
+#chat_bar input {
+  height: 23px;
+  left: 5px;
+  margin: 0;
+  padding: 0 5px;
+  position: absolute;
+  right: 85px;
+}
+#chat_bar button {
+  padding: 0;
+  position: absolute;
+  right: 5px;
+  width: 75px;
+}
+#chat_bar .push {
+  clear: both;
+  height: 2em;
+}
diff --git a/public/css/irc.styl b/public/css/irc.styl
@@ -0,0 +1,74 @@
+*
+	margin 0
+
+body
+	background #fff
+	color #222
+	font 12px Helvetica, Arial, sans-serif
+	padding 0 0 30px
+
+#top_section
+	//border 1px solid red
+
+#nick_list
+	display none
+	float right
+	width 150px
+
+#chat_body
+	padding 10px
+	width 100%
+
+	&, th, td
+		vertical-align top
+
+	.author
+		font-weight bold
+		padding 2px 4px 2px 10px
+		text-align right
+		width 100px
+
+	.msg
+		background #f6f6f6
+		padding 2px 6px
+
+	.me
+		.author
+			font-style italic
+
+@css {
+	#chat_body tr:nth-child(2n) .msg {
+		background: #efefef;
+	}
+}
+
+#chat_bar
+	background #fff
+	bottom 0
+	left 0
+	padding 5px
+	position fixed
+	right 0
+	z-index 1000
+
+	&, button
+		height 25px
+		line-height 25px
+
+	input
+		height 23px
+		left 5px
+		margin 0
+		padding 0 5px
+		position absolute
+		right 85px
+
+	button
+		padding 0
+		position absolute
+		right 5px
+		width 75px
+
+	.push
+		clear both
+		height 2em
diff --git a/public/index.html b/public/index.html
@@ -1,36 +1,27 @@
+<!doctype html>
 <html>
 <head>
+  <meta charset="utf-8">
   <title>Bejesus IRC Channel</title>
-  <style type="text/css">
+  <link rel="stylesheet" href="css/irc.css" >
-    * {
+</head>
-      margin: 0px;
+<body onload="body_loaded();">
-    }
+  <div id="top_section">
-    body, html {
+    <div id="nick_list">
-      margin: 0px;
+      <ol id="nick_ol">
-      padding: 0px;
+      </ol>
-      color: #000;
+    </div>
-      background:#a7a09a;
+    <table id="chat_body">
-      height: 98%;
+    </table>
-    }
+  </div>
-    div#top_section {
+  <form id="chat_bar" onsubmit="handleSubmit(); return false;">
-      min-height: 100%;
+    <input type="text" id="text_input" size="80">
-      height: auto !important;
+    <button type="submit">Send</button>
-      height: 100%;
+  </form>
-    }
+
-    div#nick_list {
+<div id="js">
-      float: right;
+<script src="/socket.io/socket.io.js"></script>
-      width: 150px;
+  <script>
-    }
-    div#chat_body {
-      float: left;
-    }
-    div#chat_bar .push {
-      clear: both;
-      height: 2em;
-    }
-  </style>
-  <script src="/socket.io/socket.io.js"></script>
-  <script type="text/javascript">
     var sock = null;
     var rv = null;
     var nickname = null;
@@ -62,14 +53,14 @@
       }
     };
     var appendMessage = function (from, message, s) {
+      var row = document.createElement('tr');
       if (typeof s != 'undefined' && s == true) {
-        var namewrap = ["<b><i>", "</i></b>"];
+        row.className = 'me';
-      } else {
-        var namewrap = ["<b>", "</b>"];
       }
-      var p = document.createElement('p');
+      row.innerHTML = ''
-      p.innerHTML = "<p>" + namewrap[0] + from + namewrap[1] + ": " + message + "</p>";
+          + '<th class="author">' + from + '</th>'
-      chatBody.appendChild(p);
+          + '<td class="msg">' + message + '</td>';
+      chatBody.appendChild(row);
     }
     var handleMessage = function (data) {
       var obj = JSON.parse(data);
@@ -102,27 +93,15 @@
       }));
       textInput.value = "";
     };
-    var handleKeyPress = function (e) {
+    var handleSubmit = function (e) {
       if (window.event) {
         e = window.event;
       }
-      if (e.keyCode == 13) {
+      if (textInput.value !== '') {
         sendMessage();
       }
     }
   </script>
-</head>
+</div>
-<body onload="body_loaded();">
-  <div id="top_section">
-    <div id="nick_list">
-      <ol id="nick_ol">
-      </ol>
-    </div>
-    <div id="chat_body">
-    </div>
-  </div>
-  <div id="chat_bar">
-    <input type="text" id="text_input" onkeypress="handleKeyPress(event);" size="80"></input><button onClick="sendMessage();">Send</button>
-  </div>
 </body>
 </html>