... | ... |
@@ -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 |
... | ... |
@@ -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 |
... | ... |
@@ -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 |