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