Skip to content
Browse files

[layout] hello_chat: improve layout & update css

  • Loading branch information...
1 parent 4a1f7a1 commit 806f8e0f920b19d85722e8d2b3cf7ffa414f74ef Ida Swarczewskaja committed Aug 29, 2011
Showing with 25 additions and 26 deletions.
  1. +9 −7 doc/book/hello_chat/hello_chat.opa
  2. +16 −19 doc/book/hello_chat/resources/css.css
View
16 doc/book/hello_chat/hello_chat.opa
@@ -34,11 +34,11 @@ type message = {author: string /**The name of the author (arbitrary string)*/
*/
user_update(x: message) =
line = <div class="row line">
- <div class="span2 columns">
- <span class="user">{x.author}:</span>
+ <div class="span1 columns userpic"></div>
+ <div class="span2 columns user">
+ {x.author}:
</div>
- <div class="span14 columns">
- <span class="message">{x.text}</span>
+ <div class="span13 columns message">{x.text}
</div>
</div>
do Dom.transform([#conversation +<- line ])
@@ -72,9 +72,11 @@ start() =
</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 id=#footer>
+ <div class="container">
+ <input class="xlarge" id=#entry onnewline={_ -> broadcast(author)}/>
+ <div class="btn primary" onclick={_ -> broadcast(author)}>Post</div>
+ </div>
</div>
/**
View
35 doc/book/hello_chat/resources/css.css
@@ -1,34 +1,31 @@
/***Header***/
#logo {
background: url("/resources/opa-logo.png") no-repeat scroll 0 0 transparent;
- height: 41px;
- margin: 5px 0 15px;
- width: 100px;
+ height: 32px;
+ margin: 10px 0 5px;
+ width: 61px;
}
/***Conversation***/
#conversation {
- background: none repeat scroll 0% 0% transparent;
+ margin-top:58px;
+ margin-bottom:40px;
+ overflow:auto;
}
-
-.line {
- background: url("/resources/user.png") no-repeat 5px 5px;
- min-height: 40px;
-}
-.line:after {
- border-bottom: 1px solid #FFF;
- content:"";
- display:block;
- position:relative;
- top:25px;
+.line {border-bottom:1px solid #ddd;padding-bottom:8px;}
+.line {margin-bottom:8px !important;}
+.user, .message {padding-top:8px;}
+.userpic {
+ background: url("/resources/user.png") no-repeat 0 0;
+ height: 40px;
+ width:40px;
}
-
-.user {color: #B30A0A;font-variant:small-caps;}
-.message{color:#252525;}
+.user {color: #000;font-weight:bold;}
+.message{color:#666;}
/***Footer***/
#footer {
- background:#E4E1D8;
+ background:#eee;
position:fixed;
bottom:0;
left:0;

0 comments on commit 806f8e0

Please sign in to comment.
Something went wrong with that request. Please try again.