Skip to content
Snippets Groups Projects
Commit 02d7accd authored by Lucie Bader's avatar Lucie Bader
Browse files

Ajout blocs repliables barre latérale

parent 9175b5ae
No related branches found
No related tags found
1 merge request!4Définitions (lexiques de l'utilisateur + Wiktionnaire)
Hide whitespace changes
Inline Side-by-side
barre_latérale/sidebar.html
+ 107
− 75
View file @ 02d7accd
...@@ -18,20 +18,49 @@ ...@@ -18,20 +18,49 @@
color: #323046; color: #323046;
} }
/* Conteneurs */ /* Conteneurs principaux */
#menu, #etat { #menu, #etat, #definitionContainer {
padding: 10px; padding: 10px;
margin-bottom: 0px; margin-bottom: 10px;
border-radius: 10px; border-radius: 10px;
background-color: #a08e9f; background-color: #a08e9f;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
} }
/* Titre */ /* En-têtes de blocs */
h3 { .block-header {
position: relative;
text-align: center;
margin-top: 2px;
}
.block-header h3 {
display: inline-block;
margin-top: 5px;
margin-bottom: 0;
}
.toggle-btn {
position: absolute;
right: 8px;
background: none;
margin: 0;
border: none;
color: #fff; color: #fff;
text-align: center; font-size: 15px;
font-weight: bold; padding: 3px 5px;
cursor: pointer;
width: auto;
display: inline-block;
}
/* Contenu des blocs */
.block-content {
padding-top: 2px;
}
.hidden {
display: none;
} }
/* Boutons */ /* Boutons */
...@@ -56,7 +85,6 @@ ...@@ -56,7 +85,6 @@
/* Mot sélectionné */ /* Mot sélectionné */
#motSelectionne { #motSelectionne {
font-style: italic; font-style: italic;
font-weight: bold;
text-align: center; text-align: center;
margin-top: 5px; margin-top: 5px;
} }
...@@ -100,12 +128,12 @@ ...@@ -100,12 +128,12 @@
/* Espace pour les pictogrammes */ /* Espace pour les pictogrammes */
.lexique-icon { .lexique-icon {
width: 25px; width: 25px;
height: 25px; height: 25px;
border-radius: 50%; border-radius: 50%;
background-color: #ccc; background-color: #ccc;
margin-right: 10px; margin-right: 10px;
flex-shrink: 0; flex-shrink: 0;
} }
.lexicon-section { .lexicon-section {
...@@ -130,10 +158,6 @@ ...@@ -130,10 +158,6 @@
margin-top: 5px; margin-top: 5px;
} }
.hidden {
display: none;
}
#mesLexiquesList { #mesLexiquesList {
display: inline; display: inline;
padding: 0; padding: 0;
...@@ -141,15 +165,14 @@ ...@@ -141,15 +165,14 @@
} }
#mesLexiquesContainer h4 { #mesLexiquesContainer h4 {
margin-bottom: 5px; margin-bottom: 5px;
} }
/* Définition */ /* Définition */
#definitionContainer { #definitionContainer {
margin-top: 10px;
background-color: #444; background-color: #444;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 10px;
color: white; color: white;
} }
...@@ -183,7 +206,7 @@ ...@@ -183,7 +206,7 @@
.modal-content { .modal-content {
background: white; background: white;
color:#8d5c70; color: #8d5c70;
padding: 1rem; padding: 1rem;
max-width: 600px; max-width: 600px;
max-height: 80vh; max-height: 80vh;
...@@ -214,73 +237,82 @@ ...@@ -214,73 +237,82 @@
font-weight: bold; font-weight: bold;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Menu des lexiques --> <!-- Bloc 1 : Menu des lexiques -->
<div id="menu"> <div id="menu">
<h3>Lexiques</h3> <div class="block-header">
<p id="highlight-note" style="display: none;">Cochez un/des lexique(s) pour activer le surlignage des mots sur la page.</p> <h3>Lexiques</h3>
<div id="lexiques">Chargement...</div> <button class="toggle-btn" onclick="toggleBlock('menuContent', this)">–</button>
</div>
<div id="auth-section"> <div id="menuContent" class="block-content">
<button id="auth-button">Se connecter</button> <p id="highlight-note" style="display: none;">Cochez un/des lexique(s) pour activer le surlignage des mots sur la page.</p>
<div id="lexiques">Chargement...</div>
<div id="auth-section">
<button id="auth-button">Se connecter</button>
</div>
</div> </div>
</div> </div>
<!-- État de la sélection --> <!-- Bloc 2 : État de la sélection -->
<hr>
<div id="etat"> <div id="etat">
<h3>Mot sélectionné</h3> <div class="block-header">
<p id="motSelectionne">Aucun mot sélectionné</p> <h3>Mot sélectionné</h3>
<p id="lexiconResult"></p> <button class="toggle-btn" onclick="toggleBlock('etatContent', this)">–</button>
<div id="add-to-lexiques" style="display: none;">
<button id="add-word-button">Ajouter le mot sélectionné</button>
</div> </div>
<div id="etatContent" class="block-content">
<button id="chercherDef">Rechercher une définition</button> <p id="motSelectionne">Aucun mot sélectionné</p>
<div id="possible-definitions" style="display: none;"> <p id="lexiconResult"></p>
<div id="add-to-lexiques" style="display: none;">
<button id="add-word-button">Ajouter le mot sélectionné</button>
</div>
<button id="chercherDef">Rechercher une définition</button>
<div id="possible-definitions" style="display: none;"></div>
</div> </div>
</div> </div>
<!-- Définition affichée -->
<div id="definitionContainer">
<h3>Définitions</h3>
<!-- Définitions des lexiques de l'utilisateur -->
<div id="mesLexiquesContainer">
<h4>📚 Mes lexiques</h4>
<label style="font-size: small;">
<input type="checkbox" id="toggle-definitions">
Afficher toutes les définitions
</label>
<ul id="mesLexiquesList"></ul>
</div>
<div id="noLexiconDefinitionsContainer" style="display: none; color: #8d5c70;">
<p>Aucune définition trouvée dans les lexiques.</p>
</div>
<div id="noWiktionaryDefinitionsContainer" style="display: none; color: #8d5c70;"> <!-- Bloc 3 : Définitions -->
<p>Aucune définition trouvée dans le Wiktionnaire.</p> <div id="definitionContainer">
</div> <div class="block-header">
<h3>Définitions</h3>
<!-- Définitions issues du Wiktionnaire --> <button class="toggle-btn" onclick="toggleBlock('definitionContent', this)">–</button>
<div id="wiktionnaireContainer"> </div>
<h4>🌍 Wiktionnaire</h4> <div id="definitionContent" class="block-content">
<ul id="wiktionnaireList"></ul> <!-- Définitions des lexiques de l'utilisateur -->
</div> <div id="mesLexiquesContainer">
<h4>📚 Mes lexiques</h4>
<!-- Fenêtre modale cachée --> <label style="font-size: small;">
<div id="modalOverlay" class="modal-overlay"> <input type="checkbox" id="toggle-definitions">
<div class="modal-content"> Afficher toutes les définitions
<span id="closeModal" class="close-button">X</span> </label>
<div id="modalFullText"></div> <ul id="mesLexiquesList"></ul>
</div>
<div id="noLexiconDefinitionsContainer" style="display: none; color: #8d5c70;">
<p>Aucune définition trouvée dans les lexiques.</p>
</div>
<div id="noWiktionaryDefinitionsContainer" style="display: none; color: #8d5c70;">
<p>Aucune définition trouvée dans le Wiktionnaire.</p>
</div>
<!-- Définitions issues du Wiktionnaire -->
<div id="wiktionnaireContainer">
<h4>🌍 Wiktionnaire</h4>
<ul id="wiktionnaireList"></ul>
</div>
<!-- Fenêtre modale cachée -->
<div id="modalOverlay" class="modal-overlay">
<div class="modal-content">
<span id="closeModal" class="close-button">X</span>
<div id="modalFullText"></div>
</div>
</div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>
barre_latérale/sidebar.js
+ 18
− 0
View file @ 02d7accd
...@@ -854,3 +854,21 @@ document.addEventListener("DOMContentLoaded", async () => { ...@@ -854,3 +854,21 @@ document.addEventListener("DOMContentLoaded", async () => {
}); });
} }
}); });
document.addEventListener("DOMContentLoaded", () => {
// Attache un écouteur de clic à tous les boutons de bascule
const toggleButtons = document.querySelectorAll(".toggle-btn");
toggleButtons.forEach((btn) => {
btn.addEventListener("click", (event) => {
event.stopPropagation(); // Pour éviter que d'autres gestionnaires sur l'en-tête ne soient déclenchés
const header = btn.parentElement;
// On suppose que le contenu à basculer se trouve juste après l'en-tête
const content = header.nextElementSibling;
if (content) {
content.classList.toggle("hidden");
// Met à jour le texte du bouton
btn.textContent = content.classList.contains("hidden") ? "+" : "–";
}
});
});
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment