From 3edf6c1cb036aafc9a9b1b7e100ab793ef6c71e3 Mon Sep 17 00:00:00 2001 From: Chaphasilor Date: Sun, 12 Apr 2020 14:32:59 +0200 Subject: [PATCH] add initial-scale meta tag and fix styling - hid pip and screen sharing buttons - made chat span the whole screen width --- public/chat.html | 2 +- public/css/chat.css | 44 ++++++++++++++++++++++++++++++----------- public/css/snackbar.css | 39 ++++++++++++++++++------------------ public/js/chat.js | 14 +++---------- 4 files changed, 55 insertions(+), 44 deletions(-) diff --git a/public/chat.html b/public/chat.html index b39ab4f..d635206 100644 --- a/public/chat.html +++ b/public/chat.html @@ -3,7 +3,7 @@ - + ZipChat diff --git a/public/css/chat.css b/public/css/chat.css index e281966..3fa07d6 100644 --- a/public/css/chat.css +++ b/public/css/chat.css @@ -360,13 +360,17 @@ button:hover { /* Begin mobile layout */ -@media (max-width: 1000px) { +@media (max-width: 640px) { /* @media (min-width: 320px) and (max-width: 480px) { */ html, body { width: 100%; height: 100%; - font-size: 2.5em; + font-size: 1em; + } + + #header { + z-index: 5; } #header img { @@ -395,7 +399,7 @@ button:hover { min-height: 10%; width: auto; height: auto; - max-width: 25%; + max-width: 20%; } #moveable #local-video { @@ -424,9 +428,9 @@ button:hover { #remote-video-text { position: fixed; - top: initial !important; + top: 60% !important; + bottom: initial; left: initial; - bottom: 40%; width: 80%; height: auto; margin: 0; @@ -458,8 +462,10 @@ button:hover { height: 100%; font-size: 3rem; display: flex; - flex-direction: col; + flex-direction: column; align-items: center; + min-width: 0; + margin: 0; /* line-height: 1.5rem; */ } @@ -479,12 +485,17 @@ button:hover { display: none !important; } + .buttonContainer:nth-child(3) , + .buttonContainer:nth-child(5) { + display: none; + } + #entire-chat { position: absolute; top: 3rem; right: 0; height: calc(100% - 3rem - 3rem); - width: 60vw; + width: 100vw; /* padding: 1rem 0; */ padding: 0; /* border: 3px solid green; */ @@ -495,29 +506,38 @@ button:hover { #chat-zone { position: relative; padding-top: 20px; - width: 90%; + width: 100%; height: calc(100% - 2rem); - margin-left: 5%; + margin-left: 0; /* box-shadow: 4px 4px 12px #030506, -4px -4px 12px #292a30; */ /* border: 5px solid blue */ border-radius: 10px; /* background: #16171a; */ } + #chat-zone .message-item.moderator .message-bloc, + #chat-zone .message-item.customer .message-bloc { + box-shadow: none; + } + .compose { position: absolute; font-size: 1rem; - right: 2%; + left: 10%; + right: initial; /* bottom: calc(3rem + 2rem); */ bottom: 0; - width: 60vw; + width: 80%; height: 2rem; margin: .5rem 0; + padding: 0; + box-shadow: none; } .compose input { width: 90%; - height: calc(100% - 5px); + height: 2rem; + line-height: 2rem; } .compose input::placeholder { diff --git a/public/css/snackbar.css b/public/css/snackbar.css index 3a84233..3e67c97 100644 --- a/public/css/snackbar.css +++ b/public/css/snackbar.css @@ -46,13 +46,13 @@ } } -@media (max-width: 640px) { +/* @media (max-width: 640px) { .snackbar-container { left: 0; right: 0; width: 100%; } -} +} */ .snackbar-pos.bottom-center { top: auto !important; @@ -92,35 +92,28 @@ right: 0; } -@media (max-width: 640px) { - .snackbar-pos.bottom-center, - .snackbar-pos.top-center { - left: 0; - transform: none; - } -} - /* Mobile Styles Start */ -@media (max-width: 1000px) { +@media (max-width: 640px) { .snackbar-container { + position: fixed; + top: 5rem; + bottom: initial; + left: calc(10vw - 0.5rem); + right: initial; display: flex; + justify-content: space-between; width: 80vw !important; min-width: 80vw; max-width: 80vw; height: auto; + margin: 0; + margin-top: 1rem; + padding: .5rem; word-wrap: break-word; line-height: 1.2rem; font-size: 1rem; - position: fixed; - justify-content: space-between; - align-items: center; - padding: .5rem; - bottom: initial; - top: 5rem; - margin: 0; - margin-top: 1rem; } .snackbar-container p { @@ -136,10 +129,16 @@ font-size: 1rem; text-transform: uppercase; color: #000000; - margin: 0 0 0 24px; + margin: 0; /*padding: 0;*/ cursor: pointer; } + + .snackbar-pos.bottom-center, + .snackbar-pos.top-center { + left: calc(10vw - 0.5rem);; + transform: none; + } } diff --git a/public/js/chat.js b/public/js/chat.js index bc5cb9d..320515d 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -359,7 +359,7 @@ function rePositionLocalVideo() { var bounds = remoteVideo.position(); let localVideo = $("#local-video"); if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { - bounds.top = $(window).height() - localVideo.height()*1.5; + bounds.top = $(window).height()*0.75; bounds.left += 10; } else { bounds.top += 10; @@ -884,24 +884,16 @@ function startUp() { var timedelay = 1; function delayCheck() { if (timedelay === 5) { - $(".multi-button").fadeOut(); + // $(".multi-button").fadeOut(); $("#header").fadeOut(); - $(".multi-button").style = "display: none;"; - // $("#header").style = "display: none;"; timedelay = 1; } timedelay = timedelay + 1; } $(document).mousemove(function () { - $(".multi-button").fadeIn(function() { - // fix layout on mobile - if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { - $(this).css("display", "flex"); - } - }); + $(".multi-button").fadeIn(); $("#header").fadeIn(); $(".multi-button").style = ""; - // $("#header").style = ""; timedelay = 1; clearInterval(_delay); _delay = setInterval(delayCheck, 500);