MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2024-11-23 18:49:21 +08:00
Code Issues Releases Wiki Activity

frontend refinement

Browse Source
This commit is contained in:
ian ramzy 2020-03-30 23:12:25 -04:00
parent b2574f47a6
commit f481454328
3 changed files with 65 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/chat.html
View File

@ -38,7 +38,7 @@
gtag("config", "UA-162048272-1"); gtag("config", "UA-162048272-1");
</script> </script>
</head> </head>
<body> <body onresize="rePositionLocalVideo()">
<div id="header"> <div id="header">
<a href="/"> <a href="/">
<img src="/images/logo.svg" alt="Neon" width="48" height="48" /> <img src="/images/logo.svg" alt="Neon" width="48" height="48" />
@ -54,23 +54,15 @@
</div> </div>
<div id="entire-chat"> <div id="entire-chat">
<form class="compose">
<textarea type="text" placeholder="Type a message"></textarea>
</form>
<div id="chat-zone"> <div id="chat-zone">
<div class="chat-messages"> <form class="compose">
<!-- <div class="message-item customer">--> <textarea
<!-- <div class="message-bloc">--> type="text"
<!-- <div class="message">Have you tried this chat?</div>--> placeholder="Type a message"
<!-- </div>--> style="overflow: -moz-scrollbars-none;"
<!-- </div>--> ></textarea>
</form>
<!-- <div class="message-item moderator">--> <div class="chat-messages"></div>
<!-- <div class="message-bloc">-->
<!-- <div class="message">Not yet! It looks awesome</div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div> </div>
</div> </div>

93
public/css/chat.css
View File

@ -44,6 +44,7 @@ body {
-webkit-animation-duration: 0.3s; -webkit-animation-duration: 0.3s;
-moz-animation-duration: 0.3s; -moz-animation-duration: 0.3s;
animation-duration: 0.3s; animation-duration: 0.3s;
overflow: hidden;
} }
video { video {
@ -55,13 +56,14 @@ video {
color: white; color: white;
font-family: "Fira Sans", sans-serif; font-family: "Fira Sans", sans-serif;
font-weight: 600; font-weight: 600;
font-size: 1rem;
white-space: nowrap; white-space: nowrap;
top: 40px; top: 20px;
left: 80px; left: 20px;
margin-left: 30px; /*margin-left: 30px;*/
margin-top: 30px; /*margin-top: 30px;*/
-ms-transform: translate(-50%, -50%); /*-ms-transform: translate(-50%, -50%);*/
transform: translate(-50%, -50%); /*transform: translate(-50%, -50%);*/
float: left; float: left;
} }
@ -161,7 +163,7 @@ button {
color: gray; color: gray;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
padding: 10px; padding: 7px;
} }
button:focus { button:focus {
@ -187,15 +189,16 @@ button:hover {
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328; box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
padding: 15px; padding: 15px;
display: grid; display: grid;
grid-gap: 0.5rem; grid-gap: 0.2rem;
width: 50px; width: 40px;
} }
.HoverState { .HoverState {
color: white; color: white;
font-family: "Heebo", sans-serif; font-family: "Heebo", sans-serif;
font-size: 0.8rem;
position: absolute; position: absolute;
left: 70px; left: 60px;
white-space: nowrap; white-space: nowrap;
top: 0px; top: 0px;
font-weight: bold; font-weight: bold;
@ -217,30 +220,28 @@ button:hover {
position: absolute; position: absolute;
height: 100%; height: 100%;
right: 0; right: 0;
width: 13vw; width: 15vw;
padding: 0; padding: 0;
} }
.compose { .compose {
width: 100%; width: calc(13vw - 40px);
height: 10%; height: 100px;
overflow: scroll;
font-family: "Heebo", sans-serif; font-family: "Heebo", sans-serif;
position: absolute; position: fixed;
bottom: 0; bottom: 0;
right: 0; right: 0;
/*margin: 0;*/ z-index: 100;
/*z-index: 1;*/
border-radius: 20px; border-radius: 20px;
/*box-shadow: 6px 6px 12px #b11882, -6px -6px 12px #292a30;*/
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30; box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30;
margin: 20px; margin: 20px;
box-sizing: border-box; box-sizing: border-box;
padding: 16px; padding: 12px;
} background: #1c1d22;
overflow-x: hidden;
.compose textarea::placeholder { overflow: -moz-scrollbars-none;
color: white; -ms-overflow-style: none;
scrollbar-width: none;
} }
.compose textarea { .compose textarea {
@ -248,35 +249,45 @@ button:hover {
font-size: inherit; font-size: inherit;
border: none; border: none;
width: 100%; width: 100%;
height: 80%; height: calc(100%);
resize: none; resize: none;
outline: none; outline: none;
background-color: inherit;
color: white;
}
textarea {
overflow: scroll;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
}
textarea::-webkit-scrollbar {
width: 0 !important;
}
.compose textarea::placeholder {
color: white; color: white;
/*background: #3a4150;*/
background-color: rgb(22, 23, 26);
/*box-shadow: 6px 6px 12px #111314, -6px -6px 12px #292a30;*/
} }
#chat-zone { #chat-zone {
padding-top: 20px; padding-top: 20px;
box-sizing: border-box; box-sizing: border-box;
/*border: red 1px solid;*/
position: absolute; position: absolute;
height: calc(90% - 20px); height: 100%;
right: 0; right: 0;
width: 15vw; width: 15vw;
overflow: scroll; overflow: scroll;
/*overflow: -moz-scrollbars-none;*/
/*-ms-overflow-style: none;*/
/*-webkit-overflow-scrolling: touch;*/
font-family: "Heebo", sans-serif; font-family: "Heebo", sans-serif;
font-size: 0.8rem;
/*background: #1c1d22;*/
/*background: #16171a;*/
/*box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;*/
} }
/*#chat-zone::-webkit-scrollbar {*/ #chat-zone::-webkit-scrollbar {
/* !*width: 0 !important*!*/ width: 0 !important;
/* display: none;*/ }
/*}*/
#chat-zone .chat-messages .message-item { #chat-zone .chat-messages .message-item {
position: relative; position: relative;
@ -285,7 +296,13 @@ button:hover {
align-items: flex-start; align-items: flex-start;
justify-content: flex-end; justify-content: flex-end;
padding: 0 16px 4px; padding: 0 16px 4px;
margin-bottom: 20px; margin-bottom: 10px;
}
.chat-messages {
overflow-x: hidden;
padding-bottom: 100px;
overflow: -moz-scrollbars-none;
} }
#chat-zone .chat-messages .message-item.customer { #chat-zone .chat-messages .message-item.customer {

2
public/js/chat.js
View File

@ -255,7 +255,7 @@ var VideoChat = {
var timesRun = 0; var timesRun = 0;
var interval = setInterval(function () { var interval = setInterval(function () {
timesRun += 1; timesRun += 1;
if (timesRun === 20) { if (timesRun === 10) {
clearInterval(interval); clearInterval(interval);
} }
rePositionLocalVideo(); rePositionLocalVideo();