From 71f5db03ad600b7fd04bc2c6946cda3a73be53e2 Mon Sep 17 00:00:00 2001
From: Alain Takoudjou <alain.takoudjou@nexedi.com>
Date: Fri, 4 Sep 2020 17:34:38 +0200
Subject: [PATCH] fix display login form and video on mibile

---
 static/sfu.css | 21 +++++++++++++++++----
 static/sfu.js  |  3 ++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/static/sfu.css b/static/sfu.css
index c058dea..e0d0ea2 100644
--- a/static/sfu.css
+++ b/static/sfu.css
@@ -880,10 +880,6 @@ header .colapse {
         display: none;
     }
 
-    .label {
-        margin: 5px 5px 5px 30%;
-    }
-
     .video-container {
         height: calc(100vh - 64px);
         position: fixed;
@@ -893,6 +889,19 @@ header .colapse {
         margin-bottom: 60px;
     }
 
+    .login-container {
+        height: calc(100vh - 64px);
+        position: fixed;
+        top: 64px;
+        right: 0;
+        left: 0;
+        background: #eff3f9;
+    }
+
+    .login-box {
+        left: calc(100vw / 2 - 10.5em);
+    }
+
     .coln-left {
         flex: 100%;
         width: 100vw;
@@ -943,4 +952,8 @@ header .colapse {
       display: none;
     }
 
+    #sharebutton {
+      display: none;
+    }
+
 }
diff --git a/static/sfu.js b/static/sfu.js
index 6020150..661aa06 100644
--- a/static/sfu.js
+++ b/static/sfu.js
@@ -60,6 +60,7 @@ function hideVideo(force) {
     }
     let video_container = document.getElementById('video-container');
     video_container.classList.add('no-video');
+    document.getElementById('switch-video').style.display = "";
 }
 
 /**
@@ -648,7 +649,7 @@ function resizePeers() {
         return;
     let rows = "";
     let size = 100 / columns;
-    // Peers div has padding 10 on top and bottom, remove 20 on offsetHeight
+    // Peers div has total padding of 30px, we remove 30 on offsetHeight
     let max_video_height = Math.trunc((peers.offsetHeight - 30) / columns);
     for(let i = 0; i < columns; i++){
       rows += size + "% ";