extracted template from channel.html

thenoviceoof · Feb 4, 2012 · ede220d · ede220d
1 parent a4c2791
commit ede220d
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -77,7 +77,7 @@ TODO
  - Probably clean up the styles right about here
    - front page
    - channel list
-   - \ channel
+   - / channel
    - settings
  - who's in the room list? / past participants (sadd, srem)
  - Add title-page notification

diff --git a/static/css/authd-template.css b/static/css/authd-template.css
@@ -0,0 +1,25 @@
+/* authd-template.css */
+
+body {
+    margin:0;
+    padding:0;
+}
+
+/* ------------------------------------------------------------ */
+
+#page-header {
+    padding:0.3em;
+    font:bold 16pt sans-serif;
+    background-color:black;
+}
+
+#page-header a, #page-header a:visited {
+    color:white;
+}
+
+#home-page {
+    display:inline-block;
+    margin-right:1em;
+    padding-right:1em;
+    border-right:2px #888 solid;
+}
diff --git a/static/css/channel.css b/static/css/channel.css
@@ -0,0 +1,94 @@
+/* channel.css */
+/* ------------------------------------------------------------ */
+
+#load-past {
+    display:inline-block;
+    margin:0.5em;
+}
+
+#channel-name {
+    margin:0.3em;
+    font-family:sans-serif;
+}
+
+#chatroom {
+    height:100px;
+    overflow:auto;
+    margin:0;
+    padding:0;
+    font-family:sans-serif;
+    list-style:none;
+}
+
+#chatroom li {
+    padding:0.1em 0;
+    border:0px #EEE solid;
+    border-width:0 0 1px 0;
+}
+
+#chatroom li:nth-child(even) {
+    background-color:#F5F5F5;
+}
+
+.timestamp {
+    display:inline-block;
+    width:5em;
+    color:#AAA;
+}
+.timestamp:hover {
+    color:black;
+}
+
+.line-number {
+    display:inline-block;
+    width:3em;
+    color:#888;
+}
+.line-number:hover {
+    color:black;
+}
+
+.username {
+    display:inline-block;
+    overflow:hidden;
+    width:10em;
+    padding-right:0.5em;
+    border-right:2px #CCC solid;
+    font-weight:bold;
+    text-align:right;
+}
+
+.message {
+    display:inline-block;
+    padding-left:0.5em;
+    font-family:Georgia, serif;
+    text-align:left;
+}
+
+/* ------------------------------------------------------------ */
+
+#post-cont {
+    position:fixed;
+    left:0;
+    bottom:0;
+    display:block;
+    width:100%;
+    margin:0;
+    margin-right:85px;
+    padding:0;
+}
+
+#post {
+    display:inline-block;
+    width:90%;
+}
+
+#submit {
+    position:relative;
+    float:right;
+    display:inline-block;
+    width:10%;
+    margin:0;
+    padding:3px;
+    z-index:1;
+}
diff --git a/templates/authd-template.html b/templates/authd-template.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Sockityak - {% block title %} Channels {% end %}</title>
+
+    <link rel="stylesheet" type="text/css" href="/static/css/authd-template.css" />
+    {% block css %}{% end %}
+  </head>
+
+  <body>
+    <header id="page-header">
+      <a id="home-page" href="/">Channels</a>
+    </header>
+
+    {% block content %}
+    {% end %}
+
+    <script src="/static/js/jquery-1.7.1.min.js"></script>
+    <script src="/static/js/underscore-min.js"></script>
+    <script src="/static/js/backbone-min.js"></script>
+    {% block javascript %}
+    {% end %}
+  </body>
+</html>
diff --git a/templates/channel.html b/templates/channel.html
@@ -1,43 +1,38 @@
-<!doctype html>
-<html>
-  <head>
-    <title>Sockityak</title>
+{% extends "authd-template.html" %}
 
-    <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
-  </head>
+{% block title %}
+## {{ channel }}
+{% end %}
 
-  <body>
-    <header id="page-header">
-      <a id="home-page" href="/">Channels</a>
-      <a href="#">Some Other... organizations?</a>
-    </header>
+{% block css %}
+<link rel="stylesheet" type="text/css" href="/static/css/channel.css" />
+{% end %}
 
-    <h1 id="channel-name">{{ channel }}</h1>
+{% block content %}
+<h1 id="channel-name">##{{ channel }}</h1>
 
-    <ul id="chatroom">
-      <button id="load-past">Load past chats</button>
-    </ul>
-    <form method="POST" id="form">
-      <button type="button" id="submit">SUBMIT</button>
-      <div id="post-cont">
-	<input type="text" name="post" id="post" />
-      </div>
-    </form>
+<ul id="chatroom">
+  <button id="load-past">Load past chats</button>
+</ul>
+<form method="POST" id="form">
+  <button type="button" id="submit">SUBMIT</button>
+  <div id="post-cont">
+    <input type="text" name="post" id="post" />
+  </div>
+</form>
 
-    <script type="text/template" id="line-template">
-      <span class="timestamp"></span>
-      <span class="line-number"></span>
-      <span class="username"></span>
-      <span class="message"></span>
-    </script>
+<script type="text/template" id="line-template">
+  <span class="timestamp"></span>
+  <span class="line-number"></span>
+  <span class="username"></span>
+  <span class="message"></span>
+</script>
+{% end %}
 
-    <script src="/static/js/jquery-1.7.1.min.js"></script>
-    <script src="/static/js/underscore-min.js"></script>
-    <script src="/static/js/backbone-min.js"></script>
-    <script type="text/javascript">
-      var channel = "{{ channel }}";
-      var user = "{{ user }}";
-    </script>
-    <script src="/static/js/script.js"></script>
-  </body>
-</html>
+{% block javascript %}
+<script type="text/javascript">
+  var channel = "{{ channel }}";
+  var user = "{{ user }}";
+</script>
+<script src="/static/js/script.js"></script>
+{% end %}