Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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

  • Loading branch information...
commit faa9341b732a471c632ce57c66027ed69b852fea 1 parent 78e09a5
@neojp neojp authored
Showing with 176 additions and 51 deletions.
  1. +1 −0  irc.js
  2. +71 −0 public/css/irc.css
  3. +74 −0 public/css/irc.styl
  4. +30 −51 public/index.html
View
1  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'));
});
View
71 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;
+}
View
74 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
View
81 public/index.html
@@ -1,36 +1,27 @@
+<!doctype html>
<html>
<head>
+ <meta charset="utf-8">
<title>Bejesus IRC Channel</title>
- <style type="text/css">
- * {
- margin: 0px;
- }
- body, html {
- margin: 0px;
- padding: 0px;
- color: #000;
- background:#a7a09a;
- height: 98%;
- }
- div#top_section {
- min-height: 100%;
- height: auto !important;
- height: 100%;
- }
- div#nick_list {
- float: right;
- width: 150px;
- }
- 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">
+ <link rel="stylesheet" href="css/irc.css" >
+</head>
+<body onload="body_loaded();">
+ <div id="top_section">
+ <div id="nick_list">
+ <ol id="nick_ol">
+ </ol>
+ </div>
+ <table id="chat_body">
+ </table>
+ </div>
+ <form id="chat_bar" onsubmit="handleSubmit(); return false;">
+ <input type="text" id="text_input" size="80">
+ <button type="submit">Send</button>
+ </form>
+
+<div id="js">
+<script src="/socket.io/socket.io.js"></script>
+ <script>
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>"];
- } else {
- var namewrap = ["<b>", "</b>"];
+ row.className = 'me';
}
- var p = document.createElement('p');
- p.innerHTML = "<p>" + namewrap[0] + from + namewrap[1] + ": " + message + "</p>";
- chatBody.appendChild(p);
+ row.innerHTML = ''
+ + '<th class="author">' + from + '</th>'
+ + '<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>
-<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>
+</div>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.