Improve chat design
This commit is contained in:
parent
12935a957f
commit
427bff7aa9
2
index.js
2
index.js
@ -23,7 +23,7 @@ const io = socketio(socketHTTPSServer, {
|
||||
});
|
||||
|
||||
function getCurrentTime() {
|
||||
|
||||
|
||||
function addZero(i) {
|
||||
if (i < 10) {
|
||||
i = "0" + i;
|
||||
|
@ -66,7 +66,7 @@
|
||||
</div>
|
||||
<div id="chat">
|
||||
<ul id="messages">
|
||||
<li><b>Rappel:</b> Tous les messages doivent parler de Denis !</li>
|
||||
<li class="is-received"><b>Rappel:</b> Tous les messages doivent parler de Denis !</li>
|
||||
</ul>
|
||||
<input id="message-input" type="text" placeholder="Écrivez votre message sur Denis ici..." autofocus>
|
||||
<img id="send" src="./images/send.png">
|
||||
|
@ -2,9 +2,19 @@ var socket;
|
||||
var username = "";
|
||||
|
||||
function addMessage(author, message) {
|
||||
|
||||
var li = document.createElement("li");
|
||||
li.innerHTML = "<b>" + author + ": </b>";
|
||||
li.innerText += message;
|
||||
li.innerHTML += message;
|
||||
|
||||
if(author != username) {
|
||||
li.classList.add("is-received");
|
||||
|
||||
} else {
|
||||
li.classList.add("is-sended");
|
||||
}
|
||||
|
||||
|
||||
document.getElementById("messages").appendChild(li);
|
||||
document.getElementById("messages").scrollTop = document.getElementById("messages").scrollHeight;
|
||||
}
|
||||
|
@ -116,6 +116,60 @@ body {
|
||||
}
|
||||
|
||||
|
||||
.is-received {
|
||||
position: relative;
|
||||
background: #e5e5ea;
|
||||
border-radius: .4em;
|
||||
|
||||
width: 90%;
|
||||
padding: 0.5vh;
|
||||
margin: 1vh;
|
||||
margin-left: 20px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.is-received::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 50%;
|
||||
width: 10px;
|
||||
height: 0;
|
||||
border: 1.281em solid transparent;
|
||||
border-right-color: #e5e5ea;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
margin-top: -0.641em;
|
||||
margin-left: -1.281em;
|
||||
}
|
||||
|
||||
.is-sended {
|
||||
position: relative;
|
||||
background: #007bff;
|
||||
border-radius: .4em;
|
||||
|
||||
width: 90%;
|
||||
padding: 0.5vh;
|
||||
margin: 1vh;
|
||||
margin-left: 20px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.is-sended::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0.625em solid transparent;
|
||||
border-left-color: #007bff;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
margin-top: -0.312em;
|
||||
margin-right: -0.625em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
body {
|
||||
|
Loading…
Reference in New Issue
Block a user