bouton post form aligne

This commit is contained in:
Theouche 2024-08-14 16:10:53 +02:00
parent 58a0362b43
commit 53d1f969c0
3 changed files with 26 additions and 28 deletions

View File

@ -114,7 +114,7 @@ document.addEventListener('DOMContentLoaded', () => {
//logo.style.display = 'none'; //logo.style.display = 'none';
pongElements.style.display = 'none'; pongElements.style.display = 'none';
console.log("new button must appear !"); console.log("new button must appear !");
document.getElementById("post-form-buttons").style.display = 'block'; document.getElementById("post-form-buttons").style.display = 'inline-block';
//startWebSocketConnection(token); //startWebSocketConnection(token);
} else { } else {
alert('Registration failed. Please try again.'); alert('Registration failed. Please try again.');
@ -140,8 +140,7 @@ document.addEventListener('DOMContentLoaded', () => {
token = data.token; token = data.token;
} }
return data.registered; return data.registered;
}quickMatchButton.style.display = 'block'; }
tournamentButton.style.display = 'block';
async function handleLogin() { async function handleLogin() {
const nickname = nicknameInput.value.trim(); const nickname = nicknameInput.value.trim();
@ -155,7 +154,7 @@ document.addEventListener('DOMContentLoaded', () => {
//logo.style.display = 'none'; //logo.style.display = 'none';
//pongElements.style.display = 'none'; //pongElements.style.display = 'none';
console.log("new button must appear !"); console.log("new button must appear !");
document.getElementById("post-form-buttons").style.display = 'block'; document.getElementById("post-form-buttons").style.display = 'inline-block';
//startWebSocketConnection(token); //startWebSocketConnection(token);
} else { } else {
alert('Authentication failed. Please try again.'); alert('Authentication failed. Please try again.');

View File

@ -6,7 +6,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pong Game</title> <title>Pong Game</title>
<link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}?v=1">
<div class="logo"> <div class="logo">
<img src="{% static 'logo-42-perpignan.png' %}" alt="Logo"> <img src="{% static 'logo-42-perpignan.png' %}" alt="Logo">
</div> </div>

View File

@ -13,9 +13,9 @@ html {
justify-content: center; justify-content: center;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
label { label {
margin: 10px 0 5px; margin: 10px 0 5px;
} }
@ -261,60 +261,59 @@ button:hover {
max-width: 80%; max-width: 80%;
} }
/* Styles pour la barre de navigation */
.navbar { .navbar {
position: absolute; /* Positionne la barre de navigation relativement à son conteneur */ position: absolute;
top: 10px; /* Ajuste la position du menu déroulant par rapport au haut */ top: 10px;
right: 10px; /* Ajuste la position du menu déroulant par rapport à la droite */ right: 10px;
padding: 10px; padding: 10px;
} }
/* Styles pour le bouton du menu burger */
.burger-menu { .burger-menu {
font-size: 24px; font-size: 24px;
background: none; background: none;
border: none; border: none;
color: #00ffff; /* Couleur du texte du bouton */ color: #00ffff;
cursor: pointer; cursor: pointer;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.burger-menu:hover { .burger-menu:hover {
color: #ffffff; /* Couleur du texte au survol */ color: #ffffff;
} }
/* Styles pour le menu déroulant */
.dropdown-content { .dropdown-content {
display: none; display: none;
position: absolute; position: absolute;
top: 100%; /* Positionne le menu directement sous le bouton */ top: 100%;
right: 0; /* Aligne le menu avec le bouton */ right: 0;
margin-top: 10px; /* Espace entre le bouton et le menu */ margin-top: 10px;
background-color: #1a1a2e; /* Couleur de fond du menu */ background-color: #1a1a2e;
color: #ffffff; /* Couleur du texte du menu */ color: #ffffff;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
border-radius: 5px; border-radius: 5px;
z-index: 1; z-index: 1;
width: max-content; /* Ajuste la largeur du menu en fonction du contenu */ width: max-content;
} }
/* Affiche le menu déroulant lorsqu'il est actif */
.dropdown-content.show { .dropdown-content.show {
display: block; display: block;
} }
/* Styles pour les liens du menu déroulant */
.dropdown-content a { .dropdown-content a {
color: #ffffff; /* Couleur du texte des liens */ color: #ffffff;
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Ligne de séparation entre les éléments */ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
transition: background-color 0.3s ease; /* Transition pour le fond au survol */ transition: background-color 0.3s ease;
} }
/* Styles pour les liens au survol */
.dropdown-content a:hover { .dropdown-content a:hover {
background-color: #333; /* Couleur de fond au survol */ background-color: #333;
color: #00ffff; /* Couleur du texte au survol */ color: #00ffff;
} }