Merge branch 'develop' of github.com:thecodingmachine/workadventure into main

front/dist/resources/style/cowebsite-mobile.scss

@@ -0,0 +1,49 @@
+@media (max-aspect-ratio: 1/1) {
+
+    #main-container {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+  
+  
+    #cowebsite {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 50%;
+      display: flex;
+      flex-direction: column-reverse;
+  
+      &.loading {
+        transform: translateY(-90%);
+      }
+      &.hidden {
+        transform: translateY(-100%);
+      }
+  
+      main {
+        height: 100%;
+      }
+  
+  
+      aside {
+        height: 30px;
+        cursor: ns-resize;
+        flex-direction: column;
+  
+        img {
+          cursor: ns-resize;
+        }
+      }
+  
+      .top-right-btn {
+        &#cowebsite-close {
+          right: 0;
+        }
+        &#cowebsite-fullscreen {
+          left: 0;
+        }
+      }
+    }
+  }
+  

front/dist/resources/style/cowebsite.scss

@@ -87,51 +87,3 @@
     }
   }
 }
-@media (max-aspect-ratio: 1/1) {
-  
-  #main-container {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-
-
-  #cowebsite {
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 50%;
-    display: flex;
-    flex-direction: column-reverse;
-
-    &.loading {
-      transform: translateY(-90%);
-    }
-    &.hidden {
-      transform: translateY(-100%);
-    }
-
-    main {
-      height: 100%;
-    }
-
-
-    aside {
-      height: 30px;
-      cursor: ns-resize;
-      flex-direction: column;
-      
-      img {
-        cursor: ns-resize;
-      }
-    }
-
-    .top-right-btn {
-      &#cowebsite-close {
-        right: 0px;
-      }
-      &#cowebsite-fullscreen {
-        right: 25px;
-      }
-    }
-  }
-}

front/dist/resources/style/index.scss

@@ -1,2 +1,4 @@
 @import "cowebsite.scss";
-@import "style.css";
+@import "cowebsite-mobile.scss";
+@import "style.css";
+@import "mobile-style.scss";

front/dist/resources/style/mobile-style.scss

@@ -0,0 +1,59 @@
+@media screen and (max-width: 700px),
+        screen and (max-height: 700px){
+  video#myCamVideo {
+    width: 150px;
+  }
+
+  .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;
+    }
+  }
+
+  .btn-cam-action {
+    &:hover{
+      transform: translateY(20px);
+    }
+    div {
+      &:hover {
+        background-color: #666;
+      }
+
+      bottom: 30px;
+
+      &.btn-micro {
+        right: 0;
+      }
+
+      &.btn-monitor {
+        right: 130px;
+      }
+
+      &.btn-video {
+        right: 65px;
+      }
+    }
+  }
+
+  .main-section {
+    position: absolute;
+    width: 100%;
+    min-width: 400px;
+
+    & > div {
+      z-index: 2;
+    }
+  }
+}

front/dist/resources/style/style.css

@@ -53,6 +53,7 @@ body .message-info.warning{
     padding-top: 32px;
     font-size: 28px;
     color: white;
+    overflow: hidden;
 }
 
 .video-container img{
@@ -338,24 +339,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%;
@@ -1058,7 +1041,7 @@ div.modal-report-user{
 
 .discussion .messages{
     position: absolute;
-    height: calc(100% - 360px);
+    height: calc(100% - 390px);
     overflow-x: hidden;
     overflow-y: auto;
     max-width: calc(100% - 40px);