Added quill to Apps editor

This commit is contained in:
Charles 2025-10-13 15:09:57 +02:00
parent fd02fc26f1
commit 25bad81f03
2 changed files with 59 additions and 44 deletions

View File

@ -20,5 +20,4 @@ import './js/off_canvas.js';
import './js/hoverable-collapse.js'; import './js/hoverable-collapse.js';
import './js/cookies.js'; import './js/cookies.js';
import 'choices.js'; import 'choices.js';
import 'choices.js/public/assets/styles/choices.min.css';
import 'quill' import 'quill'

View File

@ -1,7 +1,7 @@
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %}
{% block body %} {% block body %}
<div class=" col-md-10 m-auto p-5"> <div class="w-100 h-100 p-5 m-auto">
<div class="card"> <div class="card">
<div class="card-title shadow-sm p-3 d-flex justify-content-between align-items-center"> <div class="card-title shadow-sm p-3 d-flex justify-content-between align-items-center">
<h2>Modifier l'application</h2> <h2>Modifier l'application</h2>
@ -13,7 +13,9 @@
<input name="name" type="text" value="{{ apps.name }}" class="form-control mb-3" required> <input name="name" type="text" value="{{ apps.name }}" class="form-control mb-3" required>
{# Description (full) #} {# Description (full) #}
<div id="toolbar-description" class="mb-2"> <div class="card">
<div class="card-header">
<div id="toolbar-description" class="border-0">
<button class="ql-bold"></button> <button class="ql-bold"></button>
<button class="ql-italic"></button> <button class="ql-italic"></button>
<button class="ql-underline"></button> <button class="ql-underline"></button>
@ -38,13 +40,21 @@
<button class="ql-image"></button> <button class="ql-image"></button>
<button class="ql-clean"></button> <button class="ql-clean"></button>
</div> </div>
<div id="editor-description" class="form-control" style="min-height: 200px;"> </div>
<div class="card-body">
<div id="editor-description" class="form-control border-0" style="min-height: 200px;">
{{ apps.description|raw }} {{ apps.description|raw }}
</div> </div>
<textarea name="description" data-application-target="hidden" class="d-none">{{ apps.description|raw }}</textarea> <textarea name="description" data-application-target="hidden" class="d-none">{{ apps.description|raw }}</textarea>
</div>
</div>
{# Description Small #} {# Description Small #}
<div id="toolbar-descriptionSmall" class="mb-2 mt-3"> <div class="card mt-3">
<div class="card-header">
<div id="toolbar-descriptionSmall" class="border-0">
<button class="ql-bold"></button> <button class="ql-bold"></button>
<button class="ql-italic"></button> <button class="ql-italic"></button>
<button class="ql-underline"></button> <button class="ql-underline"></button>
@ -54,10 +64,16 @@
</select> </select>
<button class="ql-clean"></button> <button class="ql-clean"></button>
</div> </div>
<div id="editor-descriptionSmall" class="form-control" style="min-height: 120px;"> </div>
<div class="card-body">
<div id="editor-descriptionSmall" class="form-control border-0" style="min-height: 120px;">
{{ apps.descriptionSmall|raw }} {{ apps.descriptionSmall|raw }}
</div> </div>
<textarea name="descriptionSmall" data-application-target="hidden" class="d-none">{{ apps.descriptionSmall|raw }}</textarea> <textarea name="descriptionSmall" data-application-target="hidden" class="d-none">{{ apps.descriptionSmall|raw }}</textarea>
</div>
</div>
<input type="file" name="logo" class="form-control mb-3 mt-3"> <input type="file" name="logo" class="form-control mb-3 mt-3">
<button type="submit" class="btn btn-primary mt-3">Enregistrer</button> <button type="submit" class="btn btn-primary mt-3">Enregistrer</button>