Commit c843fcb5fbc11af754b5d1653ef3cf0dd282d3c4
1 parent
68128c90
Exists in
master
and in
29 other branches
chat: right arrow on chat-label to toggle close
Showing
2 changed files
with
24 additions
and
4 deletions
Show diff stats
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">></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 > a.up { | @@ -487,7 +487,7 @@ div.occupants > 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 > a.up { | @@ -512,15 +512,34 @@ div.occupants > 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; |