Permalink
Browse files

[feature] hello_chat: begin port to bootstrap css

  • Loading branch information...
1 parent afee3cd commit 4a1f7a132b0c3beb76cbbaabe276348a224b744d François-Régis Sinot committed Aug 29, 2011
Showing with 27 additions and 216 deletions.
  1. +25 −8 doc/book/hello_chat/hello_chat.opa
  2. +2 −208 doc/book/hello_chat/resources/css.css
@@ -1,4 +1,11 @@
/**
+ * {1 Import standard classes of bootstrap css}
+ *
+ * see http://twitter.github.com/bootstrap/
+ */
+import stdlib.themes.bootstrap
+
+/**
* {1 Network infrastructure}
*/
@@ -26,9 +33,13 @@ type message = {author: string /**The name of the author (arbitrary string)*/
* @param x The message received from the chatroom
*/
user_update(x: message) =
- line = <div class="line">
- <div class="user">{x.author}:</div>
- <div class="message">{x.text}</div>
+ line = <div class="row line">
+ <div class="span2 columns">
+ <span class="user">{x.author}:</span>
+ </div>
+ <div class="span14 columns">
+ <span class="message">{x.text}</span>
+ </div>
</div>
do Dom.transform([#conversation +<- line ])
Dom.scroll_to_bottom(#conversation)
@@ -53,11 +64,17 @@ broadcast(author) =
*/
start() =
author = Random.string(8)
- <div id=#header><div id=#logo></div></div>
- <div id=#conversation onready={_ -> Network.add_callback(user_update, room)}></div>
- <div id=#footer>
- <input id=#entry onnewline={_ -> broadcast(author)}/>
- <div class="button" onclick={_ -> broadcast(author)}>Post</div>
+ <div class="topbar">
+ <div class="fill">
+ <div class="container">
+ <div id=#logo></div>
+ </div>
+ </div>
+ </div>
+ <div class="container" id=#conversation onready={_ -> Network.add_callback(user_update, room)}></div>
+ <div class="row" id=#footer>
+ <input id=#entry onnewline={_ -> broadcast(author)}/>
+ <div class="btn" onclick={_ -> broadcast(author)}>Post</div>
</div>
/**
@@ -1,225 +1,19 @@
-* {
- margin: 0;
- padding: 0;
-}
-
-html {
- background: none repeat scroll 0% 0% #F2F2ED;
-}
-
-body {
- background: none repeat scroll 0% 0% #F2F2ED;
- color: #252525;
- font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-Georgia",
- Georgia,"Times New Roman",Times,serif;
- font-size: 95%;
- font-weight: normal;
- line-height: 1.4em;
- text-align: center;
- text-shadow: 0 1px 0 white;
-}
-
-a, a:link, a:visited {
- color: #0B67B2;
- text-decoration: none;
-}
-
-a:hover {
- color: #0B4D86;
- text-decoration: underline;
-}
-
-a:active {
- color: #B30A0A;
-}
-
-ul, ol {
- margin: 0 0 1.5em;
-}
-
-ul li, ol li {
- list-style-type: disc;
- margin: 0;
-}
-
-ul li ul, ol li ol {
- margin-left: 20px;
-}
-
-ul, ol {
- list-style-image: none;
- list-style-position: inside;
-}
-
-textarea, input[type="text"], input[type="password"], select {
- border-radius: 2px 2px 2px 2px;
- border: 1px solid #DDDDDD;
- font-family: "Lucida Grande",Arial,sans-serif;
- font-size: 14px;
- margin-bottom: 2px;
- padding: 2px;
- text-align: left;
-}
-
-table {
- border-collapse: collapse;
- margin: 5px 0pt;
- width: 100%;
-}
-
-table td {
- border-bottom: 1px solid #C6C6C2;
- color: #767672;
- font-size: 0.9em;
- padding: 3px;
- vertical-align: top;
-}
-
-table td:after {
- border-bottom: 1px solid #FFFFFF;
- content: "";
- display: block;
- position: relative;
- top: 5px;
-}
-
-p {
- margin: 0 0 1.5em;
-}
-
-li p, td p {
- display: inline;
-}
-
-h1 {
- color: #000000;
- font-size: 2em;
- line-height: 1.5em;
- margin: 0 0 0.7em;
-}
-
-h2 {
- color: #B30A0A;
- font-size: 1.7em;
- line-height: 1.4em;
- margin: 0.5em 0;
-}
-
-h3 {
- color: #000000;
- font-size: 1.5em;
- line-height: 1em;
- margin: 1em 0;
-}
-
-h4 {
- color: #969692;
- font-size: 1.3em;
- line-height: 1em;
- margin: 0.5em 0;
-}
-
-h5 {
- color: #B30A0A;
- font-size: 1.25em;
- line-height: 1.2em;
- margin: 0 0 0.5em;
-}
-
-h6 {
- color: #969692;
- font-size: 1em;
- font-style: italic;
- line-height: 1em;
- margin: 0 0 0.5em;
-}
-
-h6 {
- color: #969692;
- font-size: 1em;
- font-style: italic;
- font-weight: normal;
- line-height: 1em;
- margin: 0 0 0.5em;
-}
-
-h1, h2, h3, h4, h5 {
- font-family: "proxima-nova","Avenir","Futura","Helvetica","Arial",sans-serif;
- font-weight: normal;
-}
-
-img {
- display: block;
- margin: 10px auto;
- position: relative;
- text-align: center;
-}
-
-pre {
- background: none repeat scroll 0% 0% #FFFFFF;
- border-color: #C6C6C2;
- border-style: solid;
- border-width: 1px 1px 1px 5px;
- color: #767672;
- margin: 5px 0;
- padding: 3px;
-}
-.button, input[type=submit] {
- background: #B30A0A;
- border:0;
- text-align:center;
- color:white;
- border-radius: 0.3em 0.3em 0.3em 0.3em;
- -webkit-border-radius: 0.3em 0.3em 0.3em 0.3em;
- -moz-border-radius: 0.3em 0.3em 0.3em 0.3em;
- text-shadow: 0 1px 0 #777777;
- margin:5px 0;
- padding:5px 15px;
- font-size:1.2em;
- cursor: pointer;
-}
-.button {display: inline-block;}
-
-input#entry {
- display: inline-block;
- margin: 0 10px;
- padding: 3px;
- width: 450px;
- font-size:1.2em;
-}
/***Header***/
-#header {
- margin: 0;
- padding: 10px;
- position: relative;
- text-align: right;
-}
-
#logo {
background: url("/resources/opa-logo.png") no-repeat scroll 0 0 transparent;
height: 41px;
margin: 5px 0 15px;
width: 100px;
- float: left;
}
/***Conversation***/
#conversation {
background: none repeat scroll 0% 0% transparent;
- margin: 5px 5px 60px 5px;
}
.line {
background: url("/resources/user.png") no-repeat 5px 5px;
- clear: both;
- display: block;
- margin: 5px 5px 5px 0;
min-height: 40px;
- padding: 5px 5px 5px 50px;
- display:block;
- padding:5px 5px 5px 50px;
- border-bottom: 1px solid #ccc;
- text-align:left;
}
.line:after {
border-bottom: 1px solid #FFF;
@@ -229,8 +23,8 @@ input#entry {
top:25px;
}
-.user {display:inline-block;color: #B30A0A;font-variant:small-caps;}
-.message{display:inline-block;color:#252525;}
+.user {color: #B30A0A;font-variant:small-caps;}
+.message{color:#252525;}
/***Footer***/
#footer {

0 comments on commit 4a1f7a1

Please sign in to comment.