Browse code

CSS pre roster

Cinan Rakosnik authored on 04/03/2013 at 18:05:06
Showing 11 changed files
1 1
deleted file mode 100755
2 2
Binary files a/app/assets/images/rails.png and /dev/null differ
3 3
new file mode 100755
... ...
@@ -0,0 +1,9 @@
0
+App =
1
+  UI: {
2
+    setAutoHeight: ->
3
+      $(window).resize(->
4
+        height = $(window).height()
5
+        $(".height-setter").css({height: height})
6
+        console.log $(".height-setter").css('height')
7
+      )
8
+  }
... ...
@@ -1,3 +1,3 @@
1
-# Place all the behaviors and hooks related to the matching controller here.
2
-# All this logic will automatically be available in application.js.
3
-# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
1
+$().ready(->
2
+  App.UI.setAutoHeight()
3
+)
4 4
\ No newline at end of file
... ...
@@ -1,8 +1,10 @@
1 1
 $bg-color: #DEDBDB;
2 2
 $app-color: #24a396;
3
+$bg-roster: #F4F4F4;
3 4
 
4 5
 $white: #fff;
5 6
 $gray: #b0b7b9;
6 7
 $gray-light: #dde0e3;
8
+$black: #282828;
7 9
 
8 10
 $error: #AD3A3A;
9 11
\ No newline at end of file
... ...
@@ -7,22 +7,9 @@
7 7
 @import "config";
8 8
 @import "compass/css3/box-sizing";
9 9
 
10
-h1 {
11
-  color: $app-color;
12
-  background: #f4f4f4;
13
-  font-size: 17px;
14
-  padding: 7px 14px;
15
-}
16
-
17 10
 body {
18 11
   background: $bg-color;
19
-}
20
-
21
-label {
22
-  display: block;
23
-  color: $gray;
24
-  font-size: 12px;
25
-  margin: 11px 0 2px;
12
+  border-top: #658489 7px solid;
26 13
 }
27 14
 
28 15
 input {
... ...
@@ -51,7 +38,19 @@ input {
51 51
 }
52 52
 
53 53
 .top-border {
54
-  border-top: 7px solid $app-color;
54
+  border-top: 5px solid $app-color;
55
+}
56
+
57
+.left-border {
58
+  border-left: 5px solid $app-color !important;
59
+}
60
+
61
+.border {
62
+  border: solid 1px #c5c6c9;
63
+}
64
+
65
+.no-top-border {
66
+  border-top: 0;
55 67
 }
56 68
 
57 69
 .alert {
... ...
@@ -63,4 +62,12 @@ input {
63 63
   &.alert-error {
64 64
     color: $error;
65 65
   }
66
+}
67
+
68
+.left {
69
+  float: left;
70
+}
71
+
72
+.clear {
73
+  clear: both;
66 74
 }
67 75
\ No newline at end of file
... ...
@@ -1,3 +1,108 @@
1
-// Place all the styles related to the chat controller here.
2
-// They will automatically be included in application.css.
3
-// You can use Sass (SCSS) here: http://sass-lang.com/
1
+@import "config";
2
+
3
+.container {
4
+  width: 1000px;
5
+  padding: 5px 17px;
6
+}
7
+
8
+.leftside {
9
+  width: 23%;
10
+}
11
+
12
+.roster {
13
+  background: $bg-roster;
14
+  padding: 16px 9px 9px;
15
+  min-height: 400px;
16
+  position: relative;
17
+
18
+  &:hover, &:active {
19
+    cursor: default;
20
+  }
21
+}
22
+
23
+.user {
24
+  padding: 4px 3px;
25
+  margin-right: -9px;
26
+
27
+  &:hover {
28
+    background: #fbfbfb;
29
+  }
30
+
31
+  h1, h2, h3 {
32
+    margin: 0 0 1px;
33
+  }
34
+
35
+  h1 {
36
+    font-size: 12px;
37
+    color: $black;
38
+    text-shadow: white 1px 1px;
39
+  }
40
+
41
+  h2 {
42
+    font-size: 11px;
43
+    font-weight: normal;
44
+    color: #7e8b90;
45
+    text-shadow: white 1px 1px;
46
+  }
47
+
48
+  h3 {
49
+    font-size: 12px;
50
+    color: #b0b7b9;
51
+  }
52
+
53
+  .avatar {
54
+    float: left;
55
+    margin-right: 8px;
56
+    height: 46px;
57
+  }
58
+}
59
+
60
+.friends {
61
+  .group-header {
62
+    margin: 16px 3px 3px;
63
+    font-size: 12px;
64
+    text-transform: uppercase;
65
+    color: #9db0b7;
66
+
67
+    &.active {
68
+      color: $app-color;
69
+    }
70
+  }
71
+
72
+  ul {
73
+    padding: 0;
74
+    margin: 0;
75
+
76
+    li {
77
+      list-style: none;
78
+
79
+      img {
80
+        width: 32px;
81
+      }
82
+    }
83
+  }
84
+
85
+  .active-group {
86
+    margin: 0 -14px 0 -10px;
87
+    padding: 8px 10px;
88
+    background: white;
89
+    border-right: 1px solid #fcfcfc;
90
+
91
+    .user {
92
+      margin-right: -6px;
93
+
94
+      &:hover {
95
+        background: $bg-roster;
96
+      }
97
+    }
98
+  }
99
+}
100
+
101
+.toolbox {
102
+  position: absolute;
103
+  bottom: 0;
104
+}
105
+
106
+.chatting-window {
107
+
108
+}
4 109
\ No newline at end of file
... ...
@@ -1,7 +1,10 @@
1 1
 @import "config";
2 2
 
3
-body {
4
-  border-top: #658489 7px solid;
3
+label {
4
+  display: block;
5
+  color: $gray;
6
+  font-size: 12px;
7
+  margin: 11px 0 2px;
5 8
 }
6 9
 
7 10
 $form-wrapper-padding: 14px;
... ...
@@ -11,6 +14,13 @@ $form-wrapper-padding: 14px;
11 11
   background: $white;
12 12
   padding: 0 $form-wrapper-padding;
13 13
   margin: 100px auto;
14
+
15
+  h1 {
16
+    color: $app-color;
17
+    background: #f4f4f4;
18
+    font-size: 17px;
19
+    padding: 7px 14px;
20
+  }
14 21
 }
15 22
 
16 23
 .login-form-header {
... ...
@@ -1,2 +1,47 @@
1
-%h1 Chat#index
2
-%p Find me in app/views/chat/index.html.haml
3 1
\ No newline at end of file
2
+- content_for :title, t("chat.title")
3
+- content_for :javascript, javascript_include_tag("application")
4
+
5
+.container
6
+  .top-border.leftside.left
7
+    .roster.border.no-top-border.height-setter
8
+      .user
9
+        .avatar
10
+          %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
11
+        %h1 Cinan Rakosnik
12
+        %h2 frontend developer
13
+        %h3 available
14
+      .friends
15
+        %h1.group-header.active Chat group
16
+        %ul.active-group.border.left-border
17
+          %li.clear
18
+            .user
19
+              .avatar
20
+                %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
21
+              %h1 Adam Wolsky
22
+              %h2 co-founder
23
+          %li.clear
24
+            .user
25
+              .avatar
26
+                %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
27
+              %h1 John Savage
28
+              %h2 web & ui designer
29
+
30
+        %h1.group-header Friends
31
+        %ul
32
+          %li.clear
33
+            .user
34
+              .avatar
35
+                %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
36
+              %h1 Ashley Bond
37
+              %h2 sexretary
38
+          %li.clear
39
+            .user
40
+              .avatar
41
+                %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
42
+              %h1 Bob Awesome
43
+              %h2 sales manager
44
+
45
+      .toolbox
46
+        %input{type: "text", placeholder: "Search contact"}
47
+  .chatting-window
48
+    Chatting
4 49
\ No newline at end of file
... ...
@@ -5,4 +5,5 @@
5 5
     %meta{ :charset => "utf-8" }/
6 6
     = stylesheet_link_tag "application"
7 7
   %body
8
-    = yield
9 8
\ No newline at end of file
9
+    = yield
10
+    = yield(:javascript)
10 11
\ No newline at end of file
... ...
@@ -11,4 +11,7 @@ en:
11 11
 
12 12
     new:
13 13
       form-header: "Login form"
14
-      form-send: "Login"
15 14
\ No newline at end of file
15
+      form-send: "Login"
16
+  chat:
17
+    title: "Chat"
18
+    avatar_alt: "Your avatar"
16 19
\ No newline at end of file
... ...
@@ -4,7 +4,7 @@ describe "Chatting behaviour" do
4 4
 
5 5
 	subject { page }
6 6
 
7
-	it "should show account info" do
7
+	describe "should show account info" do
8 8
 		before { visit chat_path }
9 9
 
10 10
 		it { should have_selector('h1', text: 'Cinan Rakosnik') }
... ...
@@ -12,10 +12,11 @@ describe "Chatting behaviour" do
12 12
 		it { should have_selector('h3', text: 'available') }
13 13
 	end
14 14
 
15
-	it "should show contact list" do
15
+	describe "should show contact list" do
16 16
 		before { visit chat_path }
17 17
 
18 18
 		it { should have_selector('h1', 'Friends') }
19
+
19 20
 		it { should have_selector('h1', 'John Savage') }
20 21
 		it { should have_selector('h1', 'Adam Wolsky') }
21 22
 	end