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