Browse code

Automaticke resizovanie chatu pri resize okna

Cinan Rakosnik authored on 06/03/2013 at 22:24:06
Showing 5 changed files
... ...
@@ -1,9 +1,6 @@
1
-App =
2
-  UI: {
1
+this.App =
2
+  UI:
3 3
     setAutoHeight: ->
4
-      $(window).resize(->
5
-        height = $(window).height()
6
-        $(".height-setter").css({height: height})
7
-        console.log $(".height-setter").css('height')
8
-      )
9
-  }
4
+      height = $(window).height()
5
+      $("#height-setter-1").css({height: height - 50})
6
+      $("#height-setter-2").css({height: height - $('#tabbar').outerHeight() - $('#msg-writer').outerHeight() - 57})
... ...
@@ -12,4 +12,5 @@
12 12
 //
13 13
 //= require jquery
14 14
 //= require jquery_ujs
15
+//= require _main
15 16
 //= require_tree .
... ...
@@ -1,3 +1,5 @@
1 1
 $().ready(->
2
-  App.UI.setAutoHeight()
2
+  $(window).resize( ->
3
+    App.UI.setAutoHeight()
4
+  ).trigger('resize')
3 5
 )
4 6
\ No newline at end of file
... ...
@@ -198,10 +198,11 @@
198 198
 
199 199
 .chatting-window {
200 200
   padding-left: 5px;
201
-  min-height: 400px;
202 201
 }
203 202
 
204 203
 .tabbar {
204
+  display: inline-block;
205
+  margin-bottom: -3px;
205 206
 
206 207
   .tab {
207 208
     background: #f7f6f5;
... ...
@@ -237,6 +238,7 @@
237 237
 .conversation {
238 238
   background: white;
239 239
   padding: 9px;
240
+  min-height: 367px;
240 241
 
241 242
   .event {
242 243
     color: $status-color;
... ...
@@ -247,6 +249,10 @@
247 247
     text-align: center;
248 248
   }
249 249
 
250
+  .messages {
251
+    min-height: 296px;
252
+  }
253
+
250 254
   .message-box {
251 255
     width: 75%;
252 256
     color: #393939;
... ...
@@ -3,7 +3,7 @@
3 3
 
4 4
 .container
5 5
   .leftside.left
6
-    .roster.border.no-top-border.top-border.height-setter
6
+    .roster.border.no-top-border.top-border#height-setter-1
7 7
       .user
8 8
         .avatar.bigger
9 9
           %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
... ...
@@ -79,7 +79,7 @@
79 79
         %a{ href: "#"}
80 80
           %span.icon-cog
81 81
   .chatting-window.left.rightside
82
-    .tabbar
82
+    .tabbar#tabbar
83 83
       %a{ href: "#", class: "tab active top-border"}
84 84
         Adam and John
85 85
         %span.right.icon.icon-x
... ...
@@ -90,7 +90,7 @@
90 90
          
91 91
         %span.right.icon.icon-x
92 92
     .conversation.clear.border
93
-      .messages
93
+      .messages#height-setter-2{style: "overflow: auto;"}
94 94
         %a{ href: "#", class: "event" }
95 95
           Load older messages
96 96
           %span.icon-arrow-up
... ...
@@ -125,6 +125,6 @@
125 125
         .event
126 126
           Adam left the room | 13:45
127 127
 
128
-      .message-writer
128
+      .message-writer#msg-writer
129 129
         %input{ type: "text", placeholder: "Type your message here" }
130 130
         %input{ type: "submit", value: "Send" }