Commit e69496e7e154f827ac77e0bcc6fbc8911e09f597

Authored by Victor Costa
Committed by Rodrigo Souto
1 parent dc4e304d

Improve chat layout

app/views/shared/logged_in/xmpp_chat.html.erb
@@ -19,6 +19,7 @@ @@ -19,6 +19,7 @@
19 <%= profile_image(user, :portrait, :class => 'avatar') %> 19 <%= profile_image(user, :portrait, :class => 'avatar') %>
20 <%= user_status_menu('icon-menu-offline', _('Offline')) %> 20 <%= user_status_menu('icon-menu-offline', _('Offline')) %>
21 </div> 21 </div>
  22 + <a href="#" class="back"><%= _('Close') %></a>
22 <div class='dialog-error' style='display: none'></div> 23 <div class='dialog-error' style='display: none'></div>
23 </div> 24 </div>
24 25
public/stylesheets/chat.css
@@ -85,6 +85,7 @@ @@ -85,6 +85,7 @@
85 right: 0; 85 right: 0;
86 bottom: 0; 86 bottom: 0;
87 padding: 0 20px 15px 15px; 87 padding: 0 20px 15px 15px;
  88 + border-top: 1px solid rgb(65, 65, 65);
88 } 89 }
89 .msie7 .conversation .input-div { 90 .msie7 .conversation .input-div {
90 padding-left: 5px; 91 padding-left: 5px;
@@ -124,6 +125,7 @@ @@ -124,6 +125,7 @@
124 } 125 }
125 #chat-window .history .message { 126 #chat-window .history .message {
126 padding: 10px 8px 10px 6px; 127 padding: 10px 8px 10px 6px;
  128 + clear: both;
127 } 129 }
128 #chat-window .history .message .time { 130 #chat-window .history .message .time {
129 float: right; 131 float: right;
@@ -215,14 +217,14 @@ @@ -215,14 +217,14 @@
215 background-color: rgb(39, 39, 39); 217 background-color: rgb(39, 39, 39);
216 } 218 }
217 .conversation .header .chat-target { 219 .conversation .header .chat-target {
218 - padding: 6px 6px 0 6px; 220 + padding: 0px 6px 0 6px;
219 display: inline-block; 221 display: inline-block;
220 max-width: 70%; 222 max-width: 70%;
221 } 223 }
222 .conversation .header .other-name { 224 .conversation .header .other-name {
223 color: rgb(238, 238, 238); 225 color: rgb(238, 238, 238);
224 } 226 }
225 -.conversation .header .back { 227 +#chat .back {
226 float: right; 228 float: right;
227 margin: 6px; 229 margin: 6px;
228 padding: 7px; 230 padding: 7px;
@@ -232,11 +234,16 @@ @@ -232,11 +234,16 @@
232 font-weight: bold; 234 font-weight: bold;
233 color: white; 235 color: white;
234 } 236 }
235 -#chat #chat-window .other-name, #chat #chat-window .history .self-name, #chat #chat-window .history h5 { 237 +#chat #chat-window .other-name, #chat #chat-window .history .self-name, #chat #chat-window .history h5, #chat .toolbar #user-status span.other-name {
236 color: #257CAD; 238 color: #257CAD;
237 - height: 23px;  
238 overflow: hidden; 239 overflow: hidden;
239 - vertical-align: top; 240 + display: inline-block;
  241 + max-width: 140px;
  242 + width: 100%;
  243 +}
  244 +#chat .toolbar #user-status span, #chat #conversations .header .chat-target span {
  245 + width: auto;
  246 + color: rgb(238, 238, 238);
240 } 247 }
241 #chat #chat-window .history h5 { 248 #chat #chat-window .history h5 {
242 text-align: center; 249 text-align: center;
@@ -251,6 +258,7 @@ @@ -251,6 +258,7 @@
251 } 258 }
252 #chat #user-status { 259 #chat #user-status {
253 padding: 2px 4px; 260 padding: 2px 4px;
  261 + float: left;
254 } 262 }
255 #chat .user-status a { 263 #chat .user-status a {
256 color: rgb(224, 224, 224); 264 color: rgb(224, 224, 224);