Misc appearence changes.
parent
7039ad807e
commit
cb636f047f
8
chat.css
8
chat.css
|
@ -12,7 +12,7 @@ form {
|
|||
input {
|
||||
padding: 2%;
|
||||
width: 100%;
|
||||
background-color: #55CDFC;
|
||||
background-color: darkgrey;
|
||||
border-style: none;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: black;
|
||||
|
@ -34,7 +34,7 @@ button {
|
|||
font-size: 30px;
|
||||
}
|
||||
|
||||
#chatbox {
|
||||
#outerchatbox {
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
box-shadow: 10px 10px 10px black;
|
||||
|
@ -44,8 +44,8 @@ button {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
#innerchatbox {
|
||||
background-color: rgba(60, 60, 60, .85);
|
||||
#chatbox {
|
||||
background-color: rgb(60, 60, 60);
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
overflow-y: scroll;
|
||||
|
|
|
@ -15,9 +15,9 @@
|
|||
|
||||
<h1>Welcome to the chat!</h1>
|
||||
|
||||
<div id="chatbox">
|
||||
<div id="outerchatbox">
|
||||
|
||||
<div id="innerchatbox">
|
||||
<div id="chatbox">
|
||||
|
||||
</div>
|
||||
|
||||
|
|
9
chat.js
9
chat.js
|
@ -38,7 +38,7 @@ let messageUpdate = window.setInterval(fetchMessages, 500);
|
|||
async function fetchMessages() {
|
||||
const response = await fetch('/api/message/messages.json');
|
||||
const recievedMessages = await response.json();
|
||||
document.getElementById("innerchatbox").innerHTML = ""
|
||||
document.getElementById("chatbox").innerHTML = ""
|
||||
|
||||
for (const message of recievedMessages) {
|
||||
printText(message.user.bold().toString() + ": " + message.body.toString());
|
||||
|
@ -46,7 +46,7 @@ async function fetchMessages() {
|
|||
|
||||
|
||||
if (recievedMessages.length != messageCount) {
|
||||
let scroll = document.getElementById("innerchatbox");
|
||||
let scroll = document.getElementById("chatbox");
|
||||
scroll.scrollTop = scroll.scrollHeight;
|
||||
}
|
||||
|
||||
|
@ -58,7 +58,7 @@ async function fetchMessages() {
|
|||
|
||||
function printText(text) {
|
||||
let p = document.createElement("p");
|
||||
const div = document.getElementById("innerchatbox");
|
||||
const div = document.getElementById("chatbox");
|
||||
div.appendChild(p)
|
||||
p.innerHTML = text
|
||||
}
|
||||
|
@ -76,3 +76,6 @@ function loggedIn() {
|
|||
}
|
||||
|
||||
loggedIn()
|
||||
|
||||
|
||||
//REVIECE USERS PRONOUNS
|
|
@ -1,6 +1,5 @@
|
|||
html {
|
||||
background: #F7A8B8;
|
||||
text-align: center;
|
||||
font-family: "Lucida Console", "Courier New", monospace;
|
||||
}
|
||||
|
||||
|
@ -28,14 +27,14 @@ a {
|
|||
margin-right: 0.3em;
|
||||
margin-left: -40%;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-bottom: 20%;
|
||||
}
|
||||
|
||||
#chatbox {
|
||||
flex: 1;
|
||||
height: 53rem;
|
||||
margin-left: 0.3em;
|
||||
margin-right: -50%;
|
||||
margin-right: -30%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue