mummert/eventmanager-bundle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move editor icons to eventmanager and remove inline styling

Browse Source
This commit is contained in:
Jürgen Mummert
2026-03-01 13:02:42 +01:00
parent 141e310320
commit 5facca2566
36 changed files with 97 additions and 546 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contao/templates/frontend/event_edit.html.twig
+14 -221
View File
@@ -10,213 +10,6 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/airbnb.css">
<link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
<link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">
<style>
.module-event-edit .event-editor-toolbar {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: .5rem 0;
}
.module-event-edit .event-editor-toolbar button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.2rem;
padding: .4rem .65rem;
border: 1px solid #cbd5e1;
border-radius: .375rem;
background: #f8fafc;
color: #1f2937;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
line-height: 1;
}
.module-event-edit .event-editor-toolbar button img {
width: 1rem;
height: 1rem;
display: block;
filter: brightness(0) saturate(100%) invert(18%) sepia(18%) saturate(522%) hue-rotate(177deg) brightness(94%) contrast(91%);
transition: filter .15s ease;
}
.module-event-edit .event-editor-toolbar button:hover {
background: #eef2ff;
border-color: #a5b4fc;
}
.module-event-edit .event-editor-toolbar button:hover img {
filter: brightness(0) saturate(100%) invert(24%) sepia(57%) saturate(2496%) hue-rotate(231deg) brightness(87%) contrast(105%);
}
.module-event-edit .event-editor-toolbar button.is-active {
background: #4f46e5;
border-color: #4338ca;
color: #fff;
}
.module-event-edit .event-editor-toolbar button.is-active img {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(63deg) brightness(106%) contrast(101%);
}
.module-event-edit .event-editor-toolbar button:disabled {
opacity: .45;
cursor: not-allowed;
background: #f1f5f9;
border-color: #d1d5db;
color: #6b7280;
}
.module-event-edit .event-editor-toolbar button:disabled img {
filter: brightness(0) saturate(100%) invert(49%) sepia(8%) saturate(616%) hue-rotate(175deg) brightness(91%) contrast(88%);
}
.module-event-edit .event-editor {
border: 1px solid #cbd5e1;
border-radius: .375rem;
padding: .75rem;
min-height: 14rem;
background: #fff;
}
.module-event-edit .event-editor .ProseMirror {
outline: none;
min-height: 12rem;
}
.module-event-edit .event-editor-counter {
margin-top: .5rem;
font-size: .85rem;
color: #475569;
}
.module-event-edit .event-editor-counter.is-over-limit {
color: #b91c1c;
font-weight: 600;
}
.module-event-edit .event-editor-shortcuts {
margin-top: .6rem;
font-size: .85rem;
color: #334155;
}
.module-event-edit .event-editor-shortcuts ul {
margin: .25rem 0 0;
padding-left: 1.1rem;
}
.module-event-edit .ns-tag-switches {
display: grid;
gap: .5rem;
margin-top: .35rem;
}
.module-event-edit .ns-tag-switch-item {
display: flex;
align-items: center;
gap: .65rem;
}
.module-event-edit .ns-tag-switch-item label {
margin: 0;
}
.module-event-edit .visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
}
.module-event-edit .ns-tag-switch-input {
appearance: none;
width: 2.5rem;
height: 1.4rem;
border-radius: 999px;
border: 1px solid #94a3b8;
background: #e2e8f0;
position: relative;
cursor: pointer;
transition: background-color .15s ease;
}
.module-event-edit .ns-tag-switch-input::after {
content: '';
position: absolute;
top: .1rem;
left: .12rem;
width: 1rem;
height: 1rem;
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
transition: transform .15s ease;
}
.module-event-edit .ns-tag-switch-input:checked {
background: #4f46e5;
border-color: #4338ca;
}
.module-event-edit .ns-tag-switch-input:checked::after {
transform: translateX(1.05rem);
}
.module-event-edit .ns-tag-switch-input:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 2px;
}
.module-event-edit .filepond--root {
width: 400px;
height: 600px;
}
.module-event-edit .filepond--root .filepond--drop-label {
height: 100%;
inset: 0;
}
.module-event-edit .filepond--root .filepond--drop-label label {
display: block;
width: auto;
float: none;
margin: 0;
padding: 0;
text-align: center;
font-weight: inherit;
}
.module-event-edit .filepond--root .filepond--drop-label,
.module-event-edit .filepond--root .filepond--drop-label label,
.module-event-edit .filepond--root .filepond--file-action-button {
pointer-events: auto;
}
.module-event-edit .filepond--root .filepond--image-preview-wrapper {
background: #f7f7f7;
}
.module-event-edit .filepond--root .filepond--panel-root,
.module-event-edit .filepond--root .filepond--item-panel,
.module-event-edit .filepond--root .filepond--image-preview {
background-color: #f7f7f7 !important;
}
.module-event-edit .filepond--root .filepond--image-preview-overlay-idle,
.module-event-edit .filepond--root .filepond--image-preview-overlay-success,
.module-event-edit .filepond--root .filepond--image-preview-overlay-failure {
background: rgba(255, 255, 255, 0.65);
}
</style>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/de.js"></script>
@@ -235,7 +28,7 @@
{{ form_row(form.startDate) }}
{{ form_row(form.endDate) }}
{{ form_row(form.addTime) }}
<div id="event-time-wrap" style="display:none;" hidden aria-hidden="true">
<div id="event-time-wrap" hidden aria-hidden="true">
{{ form_row(form.startTime) }}
{{ form_row(form.endTime) }}
</div>
@@ -279,51 +72,51 @@
aria-controls="{{ form.teaser.vars.id }}-editor"
>
<button type="button" data-action="paragraph" title="Absatz">
<img src="{{ asset('bundles/newssubmission/icons/paragraph.svg') }}" alt="" aria-hidden="true">
<img src="{{ asset('bundles/mummertmediaeventmanager/icons/paragraph.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Absatz</span>
</button>
<button type="button" data-action="h2" title="Überschrift H2">
<img src="{{ asset('bundles/newssubmission/icons/h2.svg') }}" alt="" aria-hidden="true">
<img src="{{ asset('bundles/mummertmediaeventmanager/icons/h2.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">H2</span>
</button>
<button type="button" data-action="h3" title="Überschrift H3">
<img src="{{ asset('bundles/newssubmission/icons/h3.svg') }}" alt="" aria-hidden="true">
<img src="{{ asset('bundles/mummertmediaeventmanager/icons/h3.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">H3</span>
</button>
<button type="button" data-action="bold" title="Fett (Strg/Cmd+B)" aria-keyshortcuts="Control+B Meta+B">
<img src="{{ asset('bundles/newssubmission/icons/bold.svg') }}" alt="" aria-hidden="true">
<img src="{{ asset('bundles/mummertmediaeventmanager/icons/bold.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Fett</span>
</button>
<button type="button" data-action="italic" title="Kursiv (Strg/Cmd+I)" aria-keyshortcuts="Control+I Meta+I">
<img src="{{ asset('bundles/newssubmission/icons/italic.svg') }}" alt="" aria-hidden="true">
<img src="{{ asset('bundles/mummertmediaeventmanager/icons/italic.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Kursiv</span>
</button>
<button type="button" data-action="underline" title="Unterstrichen (Strg/Cmd+U)" aria-keyshortcuts="Control+U Meta+U">
<img src="{{ asset('bundles/newssubmission/icons/underline.svg') }}" alt="" aria-hidden="true">
<img src="{{ asset('bundles/mummertmediaeventmanager/icons/underline.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Unterstrichen</span>
</button>
<button type="button" data-action="bulletList" title="Liste">
<img src="{{ asset('bundles/newssubmission/icons/ul.svg') }}" alt="" aria-hidden="true">
<img src="{{ asset('bundles/mummertmediaeventmanager/icons/ul.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Liste</span>
</button>
<button type="button" data-action="orderedList" title="Nummerierte Liste">
<img src="{{ asset('bundles/newssubmission/icons/ol.svg') }}" alt="" aria-hidden="true">
<img src="{{ asset('bundles/mummertmediaeventmanager/icons/ol.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Nummerierte Liste</span>
</button>
<button type="button" data-action="indent" title="Einzug vergrößern">
<img src="{{ asset('bundles/newssubmission/icons/indent.svg') }}" alt="" aria-hidden="true">
<img src="{{ asset('bundles/mummertmediaeventmanager/icons/indent.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Einzug vergrößern</span>
</button>
<button type="button" data-action="outdent" title="Einzug verkleinern">
<img src="{{ asset('bundles/newssubmission/icons/outdent.svg') }}" alt="" aria-hidden="true">
<img src="{{ asset('bundles/mummertmediaeventmanager/icons/outdent.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Einzug verkleinern</span>
</button>
<button type="button" data-action="undo" title="Rückgängig (Strg/Cmd+Z)" aria-keyshortcuts="Control+Z Meta+Z">
<img src="{{ asset('bundles/newssubmission/icons/undo.svg') }}" alt="" aria-hidden="true">
<img src="{{ asset('bundles/mummertmediaeventmanager/icons/undo.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Rückgängig</span>
</button>
<button type="button" data-action="redo" title="Wiederholen (Strg/Cmd+Shift+Z)" aria-keyshortcuts="Control+Shift+Z Meta+Shift+Z">
<img src="{{ asset('bundles/newssubmission/icons/redo.svg') }}" alt="" aria-hidden="true">
<img src="{{ asset('bundles/mummertmediaeventmanager/icons/redo.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Wiederholen</span>
</button>
</div>
@@ -359,7 +152,7 @@
{{ form_row(form.url) }}
{{ form_row(form.addImage) }}
<div id="event-image-upload-wrap" style="display:none;" hidden aria-hidden="true">
<div id="event-image-upload-wrap" hidden aria-hidden="true">
{{ form_row(form.eventUpload) }}
{{ form_row(form.photographer) }}
<p class="help-text">Die Angabe des Urhebers ist notwendig. Ihnen muss eine Genehmigung zur Verwendung des Bildes vorliegen.</p>