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> </div>
</section> </section>
<div id="chapterEditor" class="modal" style="display: none;"> <div id="chapterEditor" class="modal">
<div class="modal-content"> <div class="modal-content">
<h2>Éditer le chapitre</h2> <div class="modal-header">
<input type="text" id="chapterTitle" placeholder="Titre du chapitre"> <h2>Éditer un chapitre</h2>
<div id="editor"></div> <input type="text" id="chapterTitle" placeholder="Titre du chapitre">
<div class="modal-actions"> </div>
<button type="button" class="button" id="saveChapter">Enregistrer</button>
<button type="button" class="button" id="cancelEdit">Annuler</button> <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> </div>
</div> </div>

95
assets/css/components.css
View File

@ -185,38 +185,43 @@
color: var(--text-primary); color: var(--text-primary);
} }
/* Modal */ /* Styles pour la modal et l'éditeur */
.modal { .modal {
display: none;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
z-index: 1000; z-index: 1000;
overflow: hidden;
} }
.modal-content { .modal-content {
position: absolute; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: var(--bg-tertiary); background: var(--bg-tertiary);
padding: var(--spacing-xl);
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
width: 90%; width: 90%;
max-width: 800px; max-width: 800px;
max-height: 90vh; height: 90vh;
overflow-y: auto; display: flex;
flex-direction: column;
} }
.modal-content h2 { /* En-tête de la modal */
margin-top: 0; .modal-header {
margin-bottom: var(--spacing-lg); padding: var(--spacing-lg);
color: var(--text-primary); border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
}
.modal-header h2 {
margin: 0 0 var(--spacing-md) 0;
} }
#chapterTitle { #chapterTitle {
@ -227,14 +232,55 @@
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
color: var(--text-primary); color: var(--text-primary);
font-size: 1rem; font-size: 1rem;
margin-bottom: var(--spacing-md);
transition: border-color var(--transition-fast);
} }
#chapterTitle:focus { /* Container de l'éditeur */
outline: none; .editor-container {
border-color: var(--accent-primary); flex: 1;
box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.2); 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 { .modal-actions {
@ -274,14 +320,19 @@
} }
.modal-content { .modal-content {
padding: var(--spacing-md); width: 95%;
height: 95vh;
} }
.modal-actions { #chapterTitle {
width: 100%;
}
.modal-footer {
flex-direction: column; flex-direction: column;
} }
.modal-actions button { .modal-footer button {
width: 100%; width: 100%;
} }