diff sat_templates/templates/bulma/static/call.css @ 371:a5a80d761e3e

bulma (call): update template to integrate call features: previously, call template was a minimum UI for testing implementation. This commit introduce a usable UI with search interface, mute and full screen button, animations, and other UI/UX improvments. rel 423
author Goffi <goffi@goffi.org>
date Wed, 09 Aug 2023 00:11:39 +0200
parents c98a0a4a3fd0
children a603cf0fa5d1
line wrap: on
line diff
--- a/sat_templates/templates/bulma/static/call.css	Mon Jul 10 15:43:49 2023 +0200
+++ b/sat_templates/templates/bulma/static/call.css	Wed Aug 09 00:11:39 2023 +0200
@@ -1,11 +1,14 @@
+#containers_wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
 
-.call_box {
+}
+
+#call_container {
+  position: absolute;
+  height: 100%;
   width: 100%;
-  height: 500px;
-  position: relative;
-  overflow: hidden;
-  border: 1px solid #ddd;
-  margin-bottom: 15px;
 }
 
 #remote_video, #local_video {
@@ -13,7 +16,8 @@
   box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
+  background-color: #000;
 }
 
 #remote_video {
@@ -22,11 +26,56 @@
   left: 0;
 }
 
+#hangup_btn {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+
+.fullscreen-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 2;
+}
+
 #local_video {
   position: absolute;
-  bottom: 10px;
-  right: 10px;
+  bottom: 0;
+  right: 0;
   width: 30%;
   height: 30%;
 }
 
+.controls {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+}
+
+.muted::after {
+    content: "/";
+    position: absolute;
+    font-size: 50px;
+    color: red;
+    top: 43%;
+    left: 52%;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.dropdown .dropdown-menu {
+  display: none;
+}
+
+.dropdown.is-active .dropdown-menu {
+  display: block;
+}
+
+.call_status {
+    padding-top: 1.3rem;
+    padding-bottom: 1.3rem;
+}