From f4814543289382d9f92f95ea0b5467ca59f76bca Mon Sep 17 00:00:00 2001 From: ian ramzy Date: Mon, 30 Mar 2020 23:12:25 -0400 Subject: [PATCH] frontend refinement --- public/chat.html | 26 +++++-------- public/css/chat.css | 93 +++++++++++++++++++++++++++------------------ public/js/chat.js | 2 +- 3 files changed, 65 insertions(+), 56 deletions(-) diff --git a/public/chat.html b/public/chat.html index 33c0f17..748cf82 100644 --- a/public/chat.html +++ b/public/chat.html @@ -38,7 +38,7 @@ gtag("config", "UA-162048272-1"); - +
-
- -
-
- - - - - - - - - - - -
+
+ +
+
diff --git a/public/css/chat.css b/public/css/chat.css index a86046c..2ac02f5 100644 --- a/public/css/chat.css +++ b/public/css/chat.css @@ -44,6 +44,7 @@ body { -webkit-animation-duration: 0.3s; -moz-animation-duration: 0.3s; animation-duration: 0.3s; + overflow: hidden; } video { @@ -55,13 +56,14 @@ video { color: white; font-family: "Fira Sans", sans-serif; font-weight: 600; + font-size: 1rem; white-space: nowrap; - top: 40px; - left: 80px; - margin-left: 30px; - margin-top: 30px; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + top: 20px; + left: 20px; + /*margin-left: 30px;*/ + /*margin-top: 30px;*/ + /*-ms-transform: translate(-50%, -50%);*/ + /*transform: translate(-50%, -50%);*/ float: left; } @@ -161,7 +163,7 @@ button { color: gray; background: transparent; cursor: pointer; - padding: 10px; + padding: 7px; } button:focus { @@ -187,15 +189,16 @@ button:hover { box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328; padding: 15px; display: grid; - grid-gap: 0.5rem; - width: 50px; + grid-gap: 0.2rem; + width: 40px; } .HoverState { color: white; font-family: "Heebo", sans-serif; + font-size: 0.8rem; position: absolute; - left: 70px; + left: 60px; white-space: nowrap; top: 0px; font-weight: bold; @@ -217,30 +220,28 @@ button:hover { position: absolute; height: 100%; right: 0; - width: 13vw; + width: 15vw; padding: 0; } .compose { - width: 100%; - height: 10%; - overflow: scroll; + width: calc(13vw - 40px); + height: 100px; font-family: "Heebo", sans-serif; - position: absolute; + position: fixed; bottom: 0; right: 0; - /*margin: 0;*/ - /*z-index: 1;*/ + z-index: 100; border-radius: 20px; - /*box-shadow: 6px 6px 12px #b11882, -6px -6px 12px #292a30;*/ box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30; margin: 20px; box-sizing: border-box; - padding: 16px; -} - -.compose textarea::placeholder { - color: white; + padding: 12px; + background: #1c1d22; + overflow-x: hidden; + overflow: -moz-scrollbars-none; + -ms-overflow-style: none; + scrollbar-width: none; } .compose textarea { @@ -248,35 +249,45 @@ button:hover { font-size: inherit; border: none; width: 100%; - height: 80%; - + height: calc(100%); resize: 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; - /*background: #3a4150;*/ - background-color: rgb(22, 23, 26); - /*box-shadow: 6px 6px 12px #111314, -6px -6px 12px #292a30;*/ } #chat-zone { padding-top: 20px; box-sizing: border-box; - /*border: red 1px solid;*/ position: absolute; - height: calc(90% - 20px); + height: 100%; right: 0; width: 15vw; overflow: scroll; - /*overflow: -moz-scrollbars-none;*/ - /*-ms-overflow-style: none;*/ - /*-webkit-overflow-scrolling: touch;*/ 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 {*/ -/* !*width: 0 !important*!*/ -/* display: none;*/ -/*}*/ +#chat-zone::-webkit-scrollbar { + width: 0 !important; +} #chat-zone .chat-messages .message-item { position: relative; @@ -285,7 +296,13 @@ button:hover { align-items: flex-start; justify-content: flex-end; 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 { diff --git a/public/js/chat.js b/public/js/chat.js index db3cd23..d600162 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -255,7 +255,7 @@ var VideoChat = { var timesRun = 0; var interval = setInterval(function () { timesRun += 1; - if (timesRun === 20) { + if (timesRun === 10) { clearInterval(interval); } rePositionLocalVideo();