From 30c1825abd23e3d6a0050b5087dfa620348a4ebf Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Tue, 20 Apr 2021 19:54:37 +0200
Subject: [PATCH] Update syle mobile

- update my video side
- update user video side
- update button video cam and microphone side
---
 front/dist/resources/style/index.scss        |  3 +-
 front/dist/resources/style/mobile-style.scss | 53 ++++++++++++++++----
 front/dist/resources/style/style.css         | 18 -------
 3 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/front/dist/resources/style/index.scss b/front/dist/resources/style/index.scss
index 4d0355b7..7454b991 100644
--- a/front/dist/resources/style/index.scss
+++ b/front/dist/resources/style/index.scss
@@ -1,2 +1,3 @@
 @import "cowebsite.scss";
-@import "style.css";
\ No newline at end of file
+@import "style.css";
+@import "mobile-style.scss";
\ No newline at end of file
diff --git a/front/dist/resources/style/mobile-style.scss b/front/dist/resources/style/mobile-style.scss
index 286735b4..329dc78d 100644
--- a/front/dist/resources/style/mobile-style.scss
+++ b/front/dist/resources/style/mobile-style.scss
@@ -1,17 +1,50 @@
-@media only screen and (max-width: 600px) {
-  .sidebar > div {
-    max-height: 240px;
+@media only screen and (max-width: 700px) {
+  video#myCamVideo {
+    width: 200px;
   }
 
-  .sidebar > div {
-    max-height: 240px;
+  .sidebar {
+    width: 20%;
+    min-width: 200px;
+    position: absolute;
+    display: block;
+    right: 0;
+    height: 80%;
+
+    &> div {
+      max-height: 120px;
+      min-width: 200px;
+    }
+
+    .video-container{
+      min-width: 200px;
+    }
   }
 
-  .sidebar{
-    max-width: 200px;
+  .btn-cam-action div {
+    bottom: 30px;
+
+    &.btn-micro {
+      right: 15px;
+    }
+
+    &.btn-monitor {
+      right: 171px;
+    }
+
+    &.btn-video {
+      right: 95px;
+    }
   }
 
-  .btn-cam-action div{
-    bottom: 50px;
+  .main-section {
+    position: absolute;
+    width: 100%;
+    min-width: 400px;
+
+    & > div {
+      z-index: 2;
+    }
   }
-}
\ No newline at end of file
+}
+
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index ff79245c..492f5fa3 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -338,24 +338,6 @@ body {
 
     
 }
-@media (max-aspect-ratio: 1/1) {
-    .game-overlay {
-        flex-direction: column;
-    }
-
-    .sidebar {
-        flex-direction: row;
-        align-items: flex-end;
-    }
-
-    .sidebar > div {
-        max-width: 21%;
-    }
-
-    .sidebar > div:hover {
-        max-width: 25%;
-    }
-}
 
 #game {
     width: 100%;