MigrateRepos
/
decentralized-video-chat
mirror of https://github.com/ianramzy/decentralized-video-chat.git
1
0
Fork 0
Code Issues Releases Wiki Activity

add initial-scale meta tag and fix styling 

- hid pip and screen sharing buttons
- made chat span the whole screen width
This commit is contained in:
Chaphasilor 2020-04-12 14:32:59 +02:00 committed by Ian Ramzy
parent 1df6b1e69a
commit 3edf6c1cb0
4 changed files with 55 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/chat.html vendored
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZipChat</title> <title>ZipChat</title>
<link rel="shortcut icon" href="/images/logo.svg" /> <link rel="shortcut icon" href="/images/logo.svg" />

44
public/css/chat.css vendored
View File

@ -360,13 +360,17 @@ button:hover {
/* Begin mobile layout */ /* Begin mobile layout */
@media (max-width: 1000px) { @media (max-width: 640px) {
/* @media (min-width: 320px) and (max-width: 480px) { */ /* @media (min-width: 320px) and (max-width: 480px) { */
html, body { html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 2.5em; font-size: 1em;
}
#header {
z-index: 5;
} }
#header img { #header img {
@ -395,7 +399,7 @@ button:hover {
min-height: 10%; min-height: 10%;
width: auto; width: auto;
height: auto; height: auto;
max-width: 25%; max-width: 20%;
} }
#moveable #local-video { #moveable #local-video {
@ -424,9 +428,9 @@ button:hover {
#remote-video-text { #remote-video-text {
position: fixed; position: fixed;
top: initial !important; top: 60% !important;
bottom: initial;
left: initial; left: initial;
bottom: 40%;
width: 80%; width: 80%;
height: auto; height: auto;
margin: 0; margin: 0;
@ -458,8 +462,10 @@ button:hover {
height: 100%; height: 100%;
font-size: 3rem; font-size: 3rem;
display: flex; display: flex;
flex-direction: col; flex-direction: column;
align-items: center; align-items: center;
min-width: 0;
margin: 0;
/* line-height: 1.5rem; */ /* line-height: 1.5rem; */
} }
@ -479,12 +485,17 @@ button:hover {
display: none !important; display: none !important;
} }
.buttonContainer:nth-child(3) ,
.buttonContainer:nth-child(5) {
display: none;
}
#entire-chat { #entire-chat {
position: absolute; position: absolute;
top: 3rem; top: 3rem;
right: 0; right: 0;
height: calc(100% - 3rem - 3rem); height: calc(100% - 3rem - 3rem);
width: 60vw; width: 100vw;
/* padding: 1rem 0; */ /* padding: 1rem 0; */
padding: 0; padding: 0;
/* border: 3px solid green; */ /* border: 3px solid green; */
@ -495,29 +506,38 @@ button:hover {
#chat-zone { #chat-zone {
position: relative; position: relative;
padding-top: 20px; padding-top: 20px;
width: 90%; width: 100%;
height: calc(100% - 2rem); height: calc(100% - 2rem);
margin-left: 5%; margin-left: 0;
/* box-shadow: 4px 4px 12px #030506, -4px -4px 12px #292a30; */ /* box-shadow: 4px 4px 12px #030506, -4px -4px 12px #292a30; */
/* border: 5px solid blue */ /* border: 5px solid blue */
border-radius: 10px; border-radius: 10px;
/* background: #16171a; */ /* background: #16171a; */
} }
#chat-zone .message-item.moderator .message-bloc,
#chat-zone .message-item.customer .message-bloc {
box-shadow: none;
}
.compose { .compose {
position: absolute; position: absolute;
font-size: 1rem; font-size: 1rem;
right: 2%; left: 10%;
right: initial;
/* bottom: calc(3rem + 2rem); */ /* bottom: calc(3rem + 2rem); */
bottom: 0; bottom: 0;
width: 60vw; width: 80%;
height: 2rem; height: 2rem;
margin: .5rem 0; margin: .5rem 0;
padding: 0;
box-shadow: none;
} }
.compose input { .compose input {
width: 90%; width: 90%;
height: calc(100% - 5px); height: 2rem;
line-height: 2rem;
} }
.compose input::placeholder { .compose input::placeholder {

39
public/css/snackbar.css vendored
View File

@ -46,13 +46,13 @@
} }
} }
@media (max-width: 640px) { /* @media (max-width: 640px) {
.snackbar-container { .snackbar-container {
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
} }
} } */
.snackbar-pos.bottom-center { .snackbar-pos.bottom-center {
top: auto !important; top: auto !important;
@ -92,35 +92,28 @@
right: 0; right: 0;
} }
@media (max-width: 640px) {
.snackbar-pos.bottom-center,
.snackbar-pos.top-center {
left: 0;
transform: none;
}
}
/* Mobile Styles Start */ /* Mobile Styles Start */
@media (max-width: 1000px) { @media (max-width: 640px) {
.snackbar-container { .snackbar-container {
position: fixed;
top: 5rem;
bottom: initial;
left: calc(10vw - 0.5rem);
right: initial;
display: flex; display: flex;
justify-content: space-between;
width: 80vw !important; width: 80vw !important;
min-width: 80vw; min-width: 80vw;
max-width: 80vw; max-width: 80vw;
height: auto; height: auto;
margin: 0;
margin-top: 1rem;
padding: .5rem;
word-wrap: break-word; word-wrap: break-word;
line-height: 1.2rem; line-height: 1.2rem;
font-size: 1rem; 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 { .snackbar-container p {
@ -136,10 +129,16 @@
font-size: 1rem; font-size: 1rem;
text-transform: uppercase; text-transform: uppercase;
color: #000000; color: #000000;
margin: 0 0 0 24px; margin: 0;
/*padding: 0;*/ /*padding: 0;*/
cursor: pointer; cursor: pointer;
} }
.snackbar-pos.bottom-center,
.snackbar-pos.top-center {
left: calc(10vw - 0.5rem);;
transform: none;
}
} }

14
public/js/chat.js
View File

@ -359,7 +359,7 @@ function rePositionLocalVideo() {
var bounds = remoteVideo.position(); var bounds = remoteVideo.position();
let localVideo = $("#local-video"); let localVideo = $("#local-video");
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 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; bounds.left += 10;
} else { } else {
bounds.top += 10; bounds.top += 10;
@ -884,24 +884,16 @@ function startUp() {
var timedelay = 1; var timedelay = 1;
function delayCheck() { function delayCheck() {
if (timedelay === 5) { if (timedelay === 5) {
$(".multi-button").fadeOut(); // $(".multi-button").fadeOut();
$("#header").fadeOut(); $("#header").fadeOut();
$(".multi-button").style = "display: none;";
// $("#header").style = "display: none;";
timedelay = 1; timedelay = 1;
} }
timedelay = timedelay + 1; timedelay = timedelay + 1;
} }
$(document).mousemove(function () { $(document).mousemove(function () {
$(".multi-button").fadeIn(function() { $(".multi-button").fadeIn();
// fix layout on mobile
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$(this).css("display", "flex");
}
});
$("#header").fadeIn(); $("#header").fadeIn();
$(".multi-button").style = ""; $(".multi-button").style = "";
// $("#header").style = "";
timedelay = 1; timedelay = 1;
clearInterval(_delay); clearInterval(_delay);
_delay = setInterval(delayCheck, 500); _delay = setInterval(delayCheck, 500);