Refactor responsive peer sidebar style

knadh · Mar 8, 2020 · 0504dcb · 0504dcb
1 parent 4164af1
commit 0504dcb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 63 deletions.
diff --git a/theme/static/style.css b/theme/static/style.css
@@ -302,18 +302,20 @@ form .help {
 
 .chat .sidebar-handle {
   display: inline-block;
-  background: #eee;
-  border-radius: 100%;
-  width: 32px;
-  text-align: center;
-
   position: fixed;
   top: 15px;
   right: 15px;
   z-index: 100;
   display: none;
   cursor: pointer;
 }
+.chat .sidebar-handle .icon {
+  display: inline-block;
+  background: #eee;
+  border-radius: 100%;
+  width: 32px;
+  text-align: center;
+}
 
 /* Peer list sidebar */
 .chat .sidebar {
@@ -407,9 +409,10 @@ form .help {
     top: 0;
     right: 0;
     height: 84vh;
-    width: 80%;
+    width: 90%;
     box-shadow: -3px 0 3px #eee;
     padding: 30px;
+    opacity: 0.9;
   }
   .chat .sidebar-handle {
     display: block;
@@ -430,59 +433,3 @@ form .help {
     width: 100%;
   }
 }
-
-.lds-ellipsis {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
-}
-.lds-ellipsis span {
-  position: absolute;
-  top: 33px;
-  width: 13px;
-  height: 13px;
-  border-radius: 50%;
-  background: #fff;
-  animation-timing-function: cubic-bezier(0, 1, 1, 0);
-}
-.lds-ellipsis span:nth-child(1) {
-  left: 8px;
-  animation: lds-ellipsis1 0.6s infinite;
-}
-.lds-ellipsis span:nth-child(2) {
-  left: 8px;
-  animation: lds-ellipsis2 0.6s infinite;
-}
-.lds-ellipsis span:nth-child(3) {
-  left: 32px;
-  animation: lds-ellipsis2 0.6s infinite;
-}
-.lds-ellipsis span:nth-child(4) {
-  left: 56px;
-  animation: lds-ellipsis3 0.6s infinite;
-}
-@keyframes lds-ellipsis1 {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-@keyframes lds-ellipsis3 {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-@keyframes lds-ellipsis2 {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(24px, 0);
-  }
-}
diff --git a/theme/templates/room.html b/theme/templates/room.html
@@ -31,7 +31,10 @@ <h3>Join room</h3>
 <!-- Chat area. -->
 <section v-if="chatOn">
 	<section class="chat">
-		<span class="sidebar-handle" v-on:click.prevent="toggleSidebar">👥<sup>{( peers.length )}</sup></span>
+		<span class="sidebar-handle" v-on:click.prevent="toggleSidebar">
+			{( sidebarOn ? "&rarr;" : "&larr;" )}
+			<span class="icon">👥<sup>{( peers.length )}</sup></span>
+		</span>
 		<div class="messages" ref="messages">
 			<ul class="no peers">
 				<li v-for="m in messages" class="message">