Commit c843fcb5fbc11af754b5d1653ef3cf0dd282d3c4

Authored by Rodrigo Souto
1 parent 68128c90

chat: right arrow on chat-label to toggle close

app/views/shared/logged_in/xmpp_chat.html.erb
@@ -14,7 +14,8 @@ @@ -14,7 +14,8 @@
14 14
15 15
16 <div id="chat-label" class="opened"> 16 <div id="chat-label" class="opened">
17 - <span><%= _('Chat') %></span> 17 + <span class="right-arrow">&gt;</span>
  18 + <span class="title"><%= _('Chat') %></span>
18 <br clear="both" /> 19 <br clear="both" />
19 <div class="icon-big-chat"></div> 20 <div class="icon-big-chat"></div>
20 </div> 21 </div>
public/stylesheets/chat.css
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 position: fixed; 4 position: fixed;
5 right: 0; 5 right: 0;
6 top: 0; 6 top: 0;
7 - z-index: 900; 7 + z-index: 10;
8 background-color: #FFF; 8 background-color: #FFF;
9 box-shadow: -3px 0px 5px #888; 9 box-shadow: -3px 0px 5px #888;
10 transition: width 0.3s ease-in; 10 transition: width 0.3s ease-in;
@@ -487,7 +487,7 @@ div.occupants &gt; a.up { @@ -487,7 +487,7 @@ div.occupants &gt; a.up {
487 right: 350px; 487 right: 350px;
488 cursor: pointer; 488 cursor: pointer;
489 text-align: center; 489 text-align: center;
490 - z-index: 7; 490 + z-index: 11;
491 transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in; 491 transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
492 border-top-left-radius: 10px; 492 border-top-left-radius: 10px;
493 border-bottom-left-radius: 10px; 493 border-bottom-left-radius: 10px;
@@ -512,15 +512,34 @@ div.occupants &gt; a.up { @@ -512,15 +512,34 @@ div.occupants &gt; a.up {
512 512
513 #chat-label span { 513 #chat-label span {
514 color: white; 514 color: white;
  515 +}
  516 +
  517 +#chat-label span.title {
515 font-size: 18px; 518 font-size: 18px;
516 line-height: 24px; 519 line-height: 24px;
  520 +}
  521 +
  522 +#chat-label span.right-arrow {
  523 + font-size: 24px;
  524 + line-height: 77px;
  525 +}
  526 +
  527 +#chat-label .title {
517 display: none; 528 display: none;
518 } 529 }
519 530
520 -#chat-label.opened span { 531 +#chat-label.opened .title {
521 display: inline; 532 display: inline;
522 } 533 }
523 534
  535 +#chat-label .right-arrow {
  536 + display: inline;
  537 +}
  538 +
  539 +#chat-label.opened .right-arrow {
  540 + display: none;
  541 +}
  542 +
524 #chat-label div { 543 #chat-label div {
525 width: 64px; 544 width: 64px;
526 height: 64px; 545 height: 64px;