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/cookies.js';
import 'choices.js';
import 'choices.js/public/assets/styles/choices.min.css';
import 'quill'

View File

@ -1,7 +1,7 @@
{% extends 'base.html.twig' %}
{% 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-title shadow-sm p-3 d-flex justify-content-between align-items-center">
<h2>Modifier l'application</h2>
@ -13,51 +13,67 @@
<input name="name" type="text" value="{{ apps.name }}" class="form-control mb-3" required>
{# Description (full) #}
<div id="toolbar-description" class="mb-2">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
<select class="ql-header">
<option value="1"></option>
<option value="2"></option>
<option selected></option>
</select>
<select class="ql-size">
<option value="small"></option>
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
<select class="ql-color"></select>
<select class="ql-background"></select>
<select class="ql-align"></select>
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-clean"></button>
</div>
<div id="editor-description" class="form-control" style="min-height: 200px;">
{{ apps.description|raw }}
</div>
<textarea name="description" data-application-target="hidden" class="d-none">{{ apps.description|raw }}</textarea>
<div class="card">
<div class="card-header">
<div id="toolbar-description" class="border-0">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
<button class="ql-blockquote"></button>
<button class="ql-code-block"></button>
<select class="ql-header">
<option value="1"></option>
<option value="2"></option>
<option selected></option>
</select>
<select class="ql-size">
<option value="small"></option>
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
<select class="ql-color"></select>
<select class="ql-background"></select>
<select class="ql-align"></select>
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-clean"></button>
</div>
</div>
<div class="card-body">
<div id="editor-description" class="form-control border-0" style="min-height: 200px;">
{{ apps.description|raw }}
</div>
<textarea name="description" data-application-target="hidden" class="d-none">{{ apps.description|raw }}</textarea>
</div>
</div>
{# Description Small #}
<div id="toolbar-descriptionSmall" class="mb-2 mt-3">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<select class="ql-header">
<option value="2"></option>
<option selected></option>
</select>
<button class="ql-clean"></button>
<div class="card mt-3">
<div class="card-header">
<div id="toolbar-descriptionSmall" class="border-0">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<select class="ql-header">
<option value="2"></option>
<option selected></option>
</select>
<button class="ql-clean"></button>
</div>
</div>
<div class="card-body">
<div id="editor-descriptionSmall" class="form-control border-0" style="min-height: 120px;">
{{ apps.descriptionSmall|raw }}
</div>
<textarea name="descriptionSmall" data-application-target="hidden" class="d-none">{{ apps.descriptionSmall|raw }}</textarea>
</div>
</div>
<div id="editor-descriptionSmall" class="form-control" style="min-height: 120px;">
{{ apps.descriptionSmall|raw }}
</div>
<textarea name="descriptionSmall" data-application-target="hidden" class="d-none">{{ apps.descriptionSmall|raw }}</textarea>
<input type="file" name="logo" class="form-control mb-3 mt-3">
<button type="submit" class="btn btn-primary mt-3">Enregistrer</button>