Esenjin_Asakha/Lectures
Esenjin_Asakha/Lectures
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

l'éditeur de texte reste toujours visible

Browse Source
This commit is contained in:
Esenjin 2025-02-16 14:35:53 +01:00
parent f2acf10fab
commit 117999c60a
2 changed files with 86 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
admin/story-edit.php
View File

@ -143,14 +143,20 @@ function generateSlug($title) {
</div>
</section>
<div id="chapterEditor" class="modal" style="display: none;">
<div id="chapterEditor" class="modal">
<div class="modal-content">
<h2>Éditer le chapitre</h2>
<input type="text" id="chapterTitle" placeholder="Titre du chapitre">
<div id="editor"></div>
<div class="modal-actions">
<button type="button" class="button" id="saveChapter">Enregistrer</button>
<button type="button" class="button" id="cancelEdit">Annuler</button>
<div class="modal-header">
<h2>Éditer un chapitre</h2>
<input type="text" id="chapterTitle" placeholder="Titre du chapitre">
</div>
<div class="editor-container">
<div id="editor"></div>
</div>
<div class="modal-footer">
<button type="button" id="cancelEdit" class="button dark">Annuler</button>
<button type="button" id="saveChapter" class="button">Enregistrer</button>
</div>
</div>
</div>

95
assets/css/components.css
View File

@ -185,38 +185,43 @@
color: var(--text-primary);
}
/* Modal */
/* Styles pour la modal et l'éditeur */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
overflow: hidden;
}
.modal-content {
position: absolute;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--bg-tertiary);
padding: var(--spacing-xl);
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
width: 90%;
max-width: 800px;
max-height: 90vh;
overflow-y: auto;
height: 90vh;
display: flex;
flex-direction: column;
}
.modal-content h2 {
margin-top: 0;
margin-bottom: var(--spacing-lg);
color: var(--text-primary);
/* En-tête de la modal */
.modal-header {
padding: var(--spacing-lg);
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
}
.modal-header h2 {
margin: 0 0 var(--spacing-md) 0;
}
#chapterTitle {
@ -227,14 +232,55 @@
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 1rem;
margin-bottom: var(--spacing-md);
transition: border-color var(--transition-fast);
}
#chapterTitle:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.2);
/* Container de l'éditeur */
.editor-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
/* Barre d'outils Quill */
.ql-toolbar.ql-snow {
background: var(--bg-secondary);
border-color: var(--border-color);
padding: var(--spacing-sm);
display: flex;
flex-wrap: wrap;
gap: 5px;
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 2;
}
/* Container principal de Quill */
.ql-container.ql-snow {
flex: 1;
overflow: auto;
border-color: var(--border-color);
background: var(--input-bg);
}
/* Zone d'édition */
.ql-editor {
min-height: 100%;
font-size: 1rem;
line-height: 1.6;
padding: var(--spacing-lg);
}
/* Pied de la modal */
.modal-footer {
padding: var(--spacing-lg);
border-top: 1px solid var(--border-color);
display: flex;
justify-content: flex-end;
gap: var(--spacing-md);
flex-shrink: 0;
}
.modal-actions {
@ -274,14 +320,19 @@
}
.modal-content {
padding: var(--spacing-md);
width: 95%;
height: 95vh;
}
.modal-actions {
#chapterTitle {
width: 100%;
}
.modal-footer {
flex-direction: column;
}
.modal-actions button {
.modal-footer button {
width: 100%;
}