chat: right arrow on chat-label to toggle close

Rodrigo Souto
1 parent 68128c90
Showing 2 changed files with 24 additions and 4 deletions Show diff stats
app/views/shared/logged_in/xmpp_chat.html.erb
public/stylesheets/chat.css
@@ -14,7 +14,8 @@
   <div id="chat-label" class="opened">
-    <span><%= _('Chat') %></span>
+    <span class="right-arrow">&gt;</span>
+    <span class="title"><%= _('Chat') %></span>
     <br clear="both" />
     <div class="icon-big-chat"></div>
   </div>
@@ -4,7 +4,7 @@
   position: fixed;
   right: 0;
   top: 0;
-  z-index: 900;
+  z-index: 10;
   background-color: #FFF;
   box-shadow: -3px 0px 5px #888;
   transition: width 0.3s ease-in;
@@ -487,7 +487,7 @@ div.occupants &gt; a.up {
   right: 350px;
   cursor: pointer;
   text-align: center;
-  z-index: 7;
+  z-index: 11;
   transition: background-color 0.2s linear, right 0.3s ease-in, width 0.3s ease-in;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
@@ -512,15 +512,34 @@ div.occupants &gt; a.up {
 #chat-label span {
   color: white;
+}
+
+#chat-label span.title {
   font-size: 18px;
   line-height: 24px;
+}
+
+#chat-label span.right-arrow {
+  font-size: 24px;
+  line-height: 77px;
+}
+
+#chat-label .title {
   display: none;
 }
-#chat-label.opened span {
+#chat-label.opened .title {
   display: inline;
 }
+#chat-label .right-arrow {
+  display: inline;
+}
+
+#chat-label.opened .right-arrow {
+  display: none;
+}
+
 #chat-label div {
   width: 64px;
   height: 64px;
	@@ -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>