add CSS for chat

This commit is contained in:
Quentin ANIERE 2022-04-12 10:25:14 +02:00
parent b37e05023a
commit 45cdd713bd
5 changed files with 99 additions and 3 deletions

BIN
src/images/cross.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/images/send.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -50,6 +50,12 @@
<img src="./images/chat.png"> <img src="./images/chat.png">
</div> </div>
<div id="chat"> <div id="chat">
<ul id="messages">
<li><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...">
<img id="send" src="./images/send.png">
<img id="close" src="./images/cross.png">
</div> </div>
<script src="https://danby.aniere.fr:3000/socket.io/socket.io.js"></script> <script src="https://danby.aniere.fr:3000/socket.io/socket.io.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

View File

@ -1,4 +1,16 @@
document.addEventListener('DOMContentLoaded', () => { function addMessage(author, message) {
var li = document.createElement("li");
li.innerHTML = "<b>" + author + ": </b>";
li.innerText += message;
document.getElementById("messages").appendChild(li);
}
function sendMessage() {
document.getElementById("message-input").value = "";
}
document.addEventListener("DOMContentLoaded", () => {
try { try {
var socket = io("https://danby.aniere.fr:3000"); var socket = io("https://danby.aniere.fr:3000");
@ -20,3 +32,21 @@ const swiper = new Swiper('.swiper', {
speed: 400, speed: 400,
spaceBetween: 100, spaceBetween: 100,
}); });
document.getElementById("chat-button").addEventListener("click", () => {
document.getElementById("chat").style.display = "block";
});
document.getElementById("close").addEventListener("click", () => {
document.getElementById("chat").style.display = "none";
});
document.getElementById("send").addEventListener("click", sendMessage);
document.getElementById("message-input").addEventListener("keyup", (event) => {
if(event.key == "Enter") {
sendMessage();
}
});

View File

@ -11,6 +11,7 @@ body {
} }
#title { #title {
margin-top: 1vh;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -48,11 +49,15 @@ body {
width: 100px; width: 100px;
border-radius: 50%; border-radius: 50%;
background-color: white; background-color: white;
display: flex;
align-items: center;
justify-content: center;
} }
#chat-button > img { #chat-button > img {
height: 90px; height: 60px;
width: 90px; width: 60px;
} }
#chat { #chat {
@ -64,9 +69,37 @@ body {
right: 0; right: 0;
display: none; display: none;
padding: 1.5vh;
border-radius: 30px 0px 0px 0px;
background-color: white; background-color: white;
} }
#messages {
height: 50vh;
padding: 0;
list-style: none;
overflow-y: scroll;
font-family: sans-serif;
}
#message-input {
padding: 1vh;
width: 20vw;
}
#send {
height: 30px;
margin-left: 5px;
transform: translateY(10px);
}
#close {
height: 30px;
margin-left: 5px;
transform: translateY(10px);
}
.swiper { .swiper {
width: 500px; width: 500px;
height: 400px; height: 400px;
@ -86,6 +119,7 @@ body {
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
body { body {
overflow-y: hidden;
background-image: url("./images/mobile-background.jpg"); background-image: url("./images/mobile-background.jpg");
} }
@ -97,10 +131,36 @@ body {
display: flex; display: flex;
} }
#chat-button {
height: 60px;
width: 60px;
bottom: 5vh;
}
#chat-button > img {
z-index: 9998;
height: 30px;
width: 30px;
}
#chat { #chat {
z-index: 9999; z-index: 9999;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
border-radius: 0px 0px 0px 0px;
}
#messages {
padding-left: 5vw;
height: 80vh;
width: 95vw;
}
#message-input {
margin-left: 5vw;
width: 60vw;
} }
.photo-container { .photo-container {