deleted file mode 100755

Binary files a/app/assets/images/rails.png and /dev/null differ

new file mode 100755

@@ -0,0 +1,9 @@

+App =

+  UI: {

+    setAutoHeight: ->

+      $(window).resize(->

+        height = $(window).height()

+        $(".height-setter").css({height: height})

+        console.log $(".height-setter").css('height')

+      )

+  }

@@ -1,3 +1,3 @@

-# Place all the behaviors and hooks related to the matching controller here.

-# All this logic will automatically be available in application.js.

-# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

+$().ready(->

+  App.UI.setAutoHeight()

+)

\ No newline at end of file

@@ -1,8 +1,10 @@

 $bg-color: #DEDBDB;

 $app-color: #24a396;

+$bg-roster: #F4F4F4;

 $white: #fff;

 $gray: #b0b7b9;

 $gray-light: #dde0e3;

+$black: #282828;

 $error: #AD3A3A;

\ No newline at end of file

@@ -7,22 +7,9 @@

 @import "config";

 @import "compass/css3/box-sizing";

-h1 {

-  color: $app-color;

-  background: #f4f4f4;

-  font-size: 17px;

-  padding: 7px 14px;

-}

-

 body {

   background: $bg-color;

-}

-

-label {

-  display: block;

-  color: $gray;

-  font-size: 12px;

-  margin: 11px 0 2px;

+  border-top: #658489 7px solid;

 }

 input {

@@ -51,7 +38,19 @@ input {

 }

 .top-border {

-  border-top: 7px solid $app-color;

+  border-top: 5px solid $app-color;

+}

+

+.left-border {

+  border-left: 5px solid $app-color !important;

+}

+

+.border {

+  border: solid 1px #c5c6c9;

+}

+

+.no-top-border {

+  border-top: 0;

 }

 .alert {

@@ -63,4 +62,12 @@ input {

   &.alert-error {

     color: $error;

   }

+}

+

+.left {

+  float: left;

+}

+

+.clear {

+  clear: both;

 }

\ No newline at end of file

@@ -1,3 +1,108 @@

-// Place all the styles related to the chat controller here.

-// They will automatically be included in application.css.

-// You can use Sass (SCSS) here: http://sass-lang.com/

+@import "config";

+

+.container {

+  width: 1000px;

+  padding: 5px 17px;

+}

+

+.leftside {

+  width: 23%;

+}

+

+.roster {

+  background: $bg-roster;

+  padding: 16px 9px 9px;

+  min-height: 400px;

+  position: relative;

+

+  &:hover, &:active {

+    cursor: default;

+  }

+}

+

+.user {

+  padding: 4px 3px;

+  margin-right: -9px;

+

+  &:hover {

+    background: #fbfbfb;

+  }

+

+  h1, h2, h3 {

+    margin: 0 0 1px;

+  }

+

+  h1 {

+    font-size: 12px;

+    color: $black;

+    text-shadow: white 1px 1px;

+  }

+

+  h2 {

+    font-size: 11px;

+    font-weight: normal;

+    color: #7e8b90;

+    text-shadow: white 1px 1px;

+  }

+

+  h3 {

+    font-size: 12px;

+    color: #b0b7b9;

+  }

+

+  .avatar {

+    float: left;

+    margin-right: 8px;

+    height: 46px;

+  }

+}

+

+.friends {

+  .group-header {

+    margin: 16px 3px 3px;

+    font-size: 12px;

+    text-transform: uppercase;

+    color: #9db0b7;

+

+    &.active {

+      color: $app-color;

+    }

+  }

+

+  ul {

+    padding: 0;

+    margin: 0;

+

+    li {

+      list-style: none;

+

+      img {

+        width: 32px;

+      }

+    }

+  }

+

+  .active-group {

+    margin: 0 -14px 0 -10px;

+    padding: 8px 10px;

+    background: white;

+    border-right: 1px solid #fcfcfc;

+

+    .user {

+      margin-right: -6px;

+

+      &:hover {

+        background: $bg-roster;

+      }

+    }

+  }

+}

+

+.toolbox {

+  position: absolute;

+  bottom: 0;

+}

+

+.chatting-window {

+

+}

\ No newline at end of file

@@ -1,7 +1,10 @@

 @import "config";

-body {

-  border-top: #658489 7px solid;

+label {

+  display: block;

+  color: $gray;

+  font-size: 12px;

+  margin: 11px 0 2px;

 }

 $form-wrapper-padding: 14px;

@@ -11,6 +14,13 @@ $form-wrapper-padding: 14px;

   background: $white;

   padding: 0 $form-wrapper-padding;

   margin: 100px auto;

+

+  h1 {

+    color: $app-color;

+    background: #f4f4f4;

+    font-size: 17px;

+    padding: 7px 14px;

+  }

 }

 .login-form-header {

@@ -1,2 +1,47 @@

-%h1 Chat#index

-%p Find me in app/views/chat/index.html.haml

\ No newline at end of file

+- content_for :title, t("chat.title")

+- content_for :javascript, javascript_include_tag("application")

+

+.container

+  .top-border.leftside.left

+    .roster.border.no-top-border.height-setter

+      .user

+        .avatar

+          %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+        %h1 Cinan Rakosnik

+        %h2 frontend developer

+        %h3 available

+      .friends

+        %h1.group-header.active Chat group

+        %ul.active-group.border.left-border

+          %li.clear

+            .user

+              .avatar

+                %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+              %h1 Adam Wolsky

+              %h2 co-founder

+          %li.clear

+            .user

+              .avatar

+                %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+              %h1 John Savage

+              %h2 web & ui designer

+

+        %h1.group-header Friends

+        %ul

+          %li.clear

+            .user

+              .avatar

+                %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+              %h1 Ashley Bond

+              %h2 sexretary

+          %li.clear

+            .user

+              .avatar

+                %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}

+              %h1 Bob Awesome

+              %h2 sales manager

+

+      .toolbox

+        %input{type: "text", placeholder: "Search contact"}

+  .chatting-window

+    Chatting

\ No newline at end of file

@@ -5,4 +5,5 @@

     %meta{ :charset => "utf-8" }/

     = stylesheet_link_tag "application"

   %body

-    = yield

\ No newline at end of file

+    = yield

+    = yield(:javascript)

\ No newline at end of file

@@ -11,4 +11,7 @@ en:

     new:

       form-header: "Login form"

-      form-send: "Login"

\ No newline at end of file

+      form-send: "Login"

+  chat:

+    title: "Chat"

+    avatar_alt: "Your avatar"

\ No newline at end of file

@@ -4,7 +4,7 @@ describe "Chatting behaviour" do

 	subject { page }

-	it "should show account info" do

+	describe "should show account info" do

 		before { visit chat_path }

 		it { should have_selector('h1', text: 'Cinan Rakosnik') }

@@ -12,10 +12,11 @@ describe "Chatting behaviour" do

 		it { should have_selector('h3', text: 'available') }

 	end

-	it "should show contact list" do

+	describe "should show contact list" do

 		before { visit chat_path }

 		it { should have_selector('h1', 'Friends') }

+

 		it { should have_selector('h1', 'John Savage') }

 		it { should have_selector('h1', 'Adam Wolsky') }

 	end