Improve chat design

This commit is contained in:
Quentin ANIERE 2022-04-26 21:52:01 +02:00
parent 12935a957f
commit 427bff7aa9
4 changed files with 67 additions and 3 deletions

View File

@ -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">

View File

@ -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;
}

View File

@ -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 {