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
Ian Ramzy
parent
1df6b1e69a
commit
3edf6c1cb0
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
|
||||
<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>
|
||||
<link rel="shortcut icon" href="/images/logo.svg" />
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue