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);