From 30c1825abd23e3d6a0050b5087dfa620348a4ebf Mon Sep 17 00:00:00 2001 From: Gregoire Parant 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%;