GitList
Browse code

Automaticke resizovanie chatu pri resize okna

Cinan Rakosnik authored on 06/03/2013 at 22:24:06
Showing 5 changed files
app/assets/javascripts/_main.coffee
History View file @ 43b171a
... ... 
@@ -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})
app/assets/javascripts/application.js
History View file @ 43b171a
... ... 
@@ -12,4 +12,5 @@
12 12 
 //
13 13 
 //= require jquery
14 14 
 //= require jquery_ujs
15 
+//= require _main
15 16 
 //= require_tree .
app/assets/javascripts/chat.js.coffee
History View file @ 43b171a
... ... 
@@ -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
app/assets/stylesheets/chat.css.scss
History View file @ 43b171a
... ... 
@@ -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;
app/views/chat/index.html.haml
History View file @ 43b171a
... ... 
@@ -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" }