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';
pongElements.style.display = 'none';
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);
} else {
alert('Registration failed. Please try again.');
@ -140,8 +140,7 @@ document.addEventListener('DOMContentLoaded', () => {
token = data.token;
}
return data.registered;
}quickMatchButton.style.display = 'block';
tournamentButton.style.display = 'block';
}
async function handleLogin() {
const nickname = nicknameInput.value.trim();
@ -155,7 +154,7 @@ document.addEventListener('DOMContentLoaded', () => {
//logo.style.display = 'none';
//pongElements.style.display = 'none';
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);
} else {
alert('Authentication failed. Please try again.');

View File

@ -6,7 +6,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<img src="{% static 'logo-42-perpignan.png' %}" alt="Logo">
</div>

View File

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