arne/arnweb-chat
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fancy mode activated

Browse Source
This commit is contained in:
Arne van Iterson 2019-08-24 15:11:22 +02:00
parent 7498b550db
commit 4ddf4e865b
1 changed files with 45 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@ -9,6 +9,7 @@
$(function () {
// Create socket
var socket = io();
const date = new Date();
// Wait for server response and identify client
socket.on('user_identify', function(){
@ -28,8 +29,15 @@
// Receive messages from server
socket.on('message_receive', function(msg){
$('.message_container').append($('<span>').html(msg.username + ': ' + msg.message));
$('.message_container').append($('<br>'));
document.getElementById('message_container').innerHTML +=
`<div class="message">
<img src="https://www.gravatar.com/avatar/${msg.mailHash}?s=48">
<div>
<span>${msg.username}</span>
<span>${date.getHours() + ':' + date.getMinutes()}</span>
<span>${msg.message}</span>
</div>
</div>`;
});
});
</script>
@ -40,7 +48,7 @@
border: 1px solid black;
width: 500px;
}
div.message_container {
div#message_container {
border: 1px solid black;
height: 500px;
overflow: auto;
@ -51,9 +59,28 @@
div.input_container > form > input, div.input_container > button {
margin: 10px;
}
div.message {
background-color: white;
height: auto;
word-wrap: anywhere;
display: grid;
grid-template-columns: 48px auto;
}
div.message > div {
height: auto;
display: grid;
padding: 10px 10px 10px 20px;
grid-template-areas:
'username time'
'message message';
}
div.message > img { padding: 10px; }
div.message > div > span:nth-child(1) { grid-area: username; border-left: 3px solid black; padding-left: 5px;}
div.message > div > span:nth-child(2) { grid-area: time; text-align: right;}
div.message > div > span:nth-child(3) { grid-area: message; border-left: 3px solid black; padding-left: 5px;}
</style>
<div class="chat_container">
<div class="message_container">
<div id="message_container">
<!-- JS will push messages here -->
</div>
<div class="input_container">