Fix FilePond label interaction CSS conflicts

Tune FilePond panel aspect ratios
Adjust FilePond sizing and upload resize rules
2026-03-01 11:52:43 +01:00 · 2026-03-01 11:34:24 +01:00 · 2026-03-01 10:56:38 +01:00 · 2026-03-01 10:22:53 +01:00 · 2026-03-01 10:04:36 +01:00 · 2026-02-27 21:15:09 +01:00
7 changed files with 215 additions and 46 deletions
@@ -10,11 +10,40 @@
    <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 .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;
+      }
+    </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>
    <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
+    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
+    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>

    {{ form_start(form, { action: app.request.uri, attr: { 'aria-live': 'polite' } }) }}
      <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
@@ -212,14 +241,46 @@
          if (typeof window.FilePondPluginImagePreview !== 'undefined') {
            window.FilePond.registerPlugin(window.FilePondPluginImagePreview);
          }
+          if (typeof window.FilePondPluginImageResize !== 'undefined') {
+            window.FilePond.registerPlugin(window.FilePondPluginImageResize);
+          }
+          if (typeof window.FilePondPluginImageTransform !== 'undefined') {
+            window.FilePond.registerPlugin(window.FilePondPluginImageTransform);
+          }

          const filePondOptions = {
            instantUpload: false,
            storeAsFile: true,
            allowMultiple: false,
            allowReplace: true,
+            stylePanelAspectRatio: 0.6666667,
+            styleItemPanelAspectRatio: 0.6666667,
            credits: false,
            acceptedFileTypes: ['image/*'],
+            allowImageResize: true,
+            imageResizeUpscale: false,
+            allowImageTransform: true,
+            onaddfile: function (error, fileItem) {
+              if (error || !fileItem || typeof fileItem.setMetadata !== 'function') {
+                return;
+              }
+
+              const fileType = fileItem.fileType || (fileItem.file && fileItem.file.type) || '';
+
+              if (fileType === 'image/svg+xml') {
+                fileItem.setMetadata('resize', null);
+                return;
+              }
+
+              fileItem.setMetadata('resize', {
+                mode: 'contain',
+                upscale: false,
+                size: {
+                  width: 2000,
+                  height: 2000
+                }
+              });
+            },
            labelIdle: 'Bild hierher ziehen oder <span class="filepond--label-action">durchsuchen</span>'
          };

@@ -74,6 +74,10 @@
        outline-offset: 3px;
    }

+    #eventfilters .widget-select.active::before {
+        display: none;
+    }
+
    #eventfilters select:focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 3px;
@@ -86,8 +90,9 @@
    #eventfilters .eventfilter-clear {
        position: absolute;
        top: 50%;
-        right: .5rem;
+        right: 0;
        transform: translateY(-50%);
+        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
@@ -95,7 +100,7 @@
        background: transparent;
        color: inherit;
        cursor: pointer;
-        padding: .125rem;
+        padding: 1em;
        line-height: 1;
    }

@@ -16,30 +16,32 @@
          </span>

          {% if isEditor %}
-            <form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
-              <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
-              <input type="hidden" name="action" value="toggle_published">
-              <input type="hidden" name="event_id" value="{{ item.id }}">
-              <button type="submit" aria-label="{{ item.published ? 'Auf inaktiv setzen' : 'Auf aktiv setzen' }} für {{ item.title }}">{{ item.published ? 'aktiv' : 'inaktiv' }}</button>
-            </form>
+            <div class="member-events-actions">
+              <form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
+                <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+                <input type="hidden" name="action" value="toggle_published">
+                <input type="hidden" name="event_id" value="{{ item.id }}">
+                <button type="submit" aria-label="{{ item.published ? 'Auf inaktiv setzen' : 'Auf aktiv setzen' }} für {{ item.title }}">{{ item.published ? 'aktiv' : 'inaktiv' }}</button>
+              </form>

-            {% if item.editUrl %}
-              <a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
-            {% endif %}
+              {% if item.editUrl %}
+                <a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
+              {% endif %}

-            <form method="post" style="display:inline;" aria-label="{{ item.title }} duplizieren">
-              <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
-              <input type="hidden" name="action" value="duplicate">
-              <input type="hidden" name="event_id" value="{{ item.id }}">
-              <button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
-            </form>
+              <form method="post" style="display:inline;" data-confirm-message="{{ ('Möchten Sie das Event \"' ~ item.title ~ '\" wirklich duplizieren?')|e('html_attr') }}" aria-label="{{ item.title }} duplizieren">
+                <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+                <input type="hidden" name="action" value="duplicate">
+                <input type="hidden" name="event_id" value="{{ item.id }}">
+                <button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
+              </form>

-            <form method="post" style="display:inline;" onsubmit="return confirm('wirklich löschen?');" aria-label="{{ item.title }} löschen">
-              <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
-              <input type="hidden" name="action" value="delete">
-              <input type="hidden" name="event_id" value="{{ item.id }}">
-              <button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
-            </form>
+              <form method="post" style="display:inline;" data-confirm-message="{{ ('Möchten Sie das Event \"' ~ item.title ~ '\" wirklich löschen?')|e('html_attr') }}" aria-label="{{ item.title }} löschen">
+                <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+                <input type="hidden" name="action" value="delete">
+                <input type="hidden" name="event_id" value="{{ item.id }}">
+                <button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
+              </form>
+            </div>
          {% endif %}
        </li>
      {% endfor %}
@@ -54,6 +56,8 @@
    </form>
  {% endif %}

+  <script src="/bundles/mummertmediaeventmanager/assets/member-events-confirm.js?v=20260301a"></script>
+
  <h2>Vergangene Veranstaltungen</h2>
  {% if pastEvents is empty %}
    <p>Keine vergangenen Veranstaltungen gefunden.</p>
@@ -69,30 +73,32 @@
          </span>

          {% if isEditor %}
-            <form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
-              <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
-              <input type="hidden" name="action" value="toggle_published">
-              <input type="hidden" name="event_id" value="{{ item.id }}">
-              <button type="submit" aria-label="{{ item.published ? 'Auf inaktiv setzen' : 'Auf aktiv setzen' }} für {{ item.title }}">{{ item.published ? 'aktiv' : 'inaktiv' }}</button>
-            </form>
+            <div class="member-events-actions">
+              <form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
+                <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+                <input type="hidden" name="action" value="toggle_published">
+                <input type="hidden" name="event_id" value="{{ item.id }}">
+                <button type="submit" aria-label="{{ item.published ? 'Auf inaktiv setzen' : 'Auf aktiv setzen' }} für {{ item.title }}">{{ item.published ? 'aktiv' : 'inaktiv' }}</button>
+              </form>

-            {% if item.editUrl %}
-              <a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
-            {% endif %}
+              {% if item.editUrl %}
+                <a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
+              {% endif %}

-            <form method="post" style="display:inline;" aria-label="{{ item.title }} duplizieren">
-              <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
-              <input type="hidden" name="action" value="duplicate">
-              <input type="hidden" name="event_id" value="{{ item.id }}">
-              <button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
-            </form>
+              <form method="post" style="display:inline;" data-confirm-message="{{ ('Möchten Sie das Event \"' ~ item.title ~ '\" wirklich duplizieren?')|e('html_attr') }}" aria-label="{{ item.title }} duplizieren">
+                <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+                <input type="hidden" name="action" value="duplicate">
+                <input type="hidden" name="event_id" value="{{ item.id }}">
+                <button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
+              </form>

-            <form method="post" style="display:inline;" onsubmit="return confirm('wirklich löschen?');" aria-label="{{ item.title }} löschen">
-              <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
-              <input type="hidden" name="action" value="delete">
-              <input type="hidden" name="event_id" value="{{ item.id }}">
-              <button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
-            </form>
+              <form method="post" style="display:inline;" data-confirm-message="{{ ('Möchten Sie das Event \"' ~ item.title ~ '\" wirklich löschen?')|e('html_attr') }}" aria-label="{{ item.title }} löschen">
+                <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
+                <input type="hidden" name="action" value="delete">
+                <input type="hidden" name="event_id" value="{{ item.id }}">
+                <button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
+              </form>
+            </div>
          {% endif %}
        </li>
      {% endfor %}
@@ -8,9 +8,38 @@
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.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-organization-edit .filepond--root {
+        width: 400px;
+        height: 400px;
+      }
+
+      .module-organization-edit .filepond--root .filepond--drop-label {
+        height: 100%;
+        inset: 0;
+      }
+
+      .module-organization-edit .filepond--root .filepond--drop-label label {
+        display: block;
+        width: auto;
+        float: none;
+        margin: 0;
+        padding: 0;
+        text-align: center;
+        font-weight: inherit;
+      }
+
+      .module-organization-edit .filepond--root .filepond--drop-label,
+      .module-organization-edit .filepond--root .filepond--drop-label label,
+      .module-organization-edit .filepond--root .filepond--file-action-button {
+        pointer-events: auto;
+      }
+    </style>
    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
    <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
+    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
+    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>

    {{ form_start(form, { attr: { 'aria-live': 'polite' } }) }}
      <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
@@ -73,14 +102,46 @@
          if (typeof window.FilePondPluginImagePreview !== 'undefined') {
            window.FilePond.registerPlugin(window.FilePondPluginImagePreview);
          }
+          if (typeof window.FilePondPluginImageResize !== 'undefined') {
+            window.FilePond.registerPlugin(window.FilePondPluginImageResize);
+          }
+          if (typeof window.FilePondPluginImageTransform !== 'undefined') {
+            window.FilePond.registerPlugin(window.FilePondPluginImageTransform);
+          }

          const filePondOptions = {
            instantUpload: false,
            storeAsFile: true,
            allowMultiple: false,
            allowReplace: true,
+            stylePanelAspectRatio: 1,
+            styleItemPanelAspectRatio: 1,
            credits: false,
            acceptedFileTypes: ['image/*'],
+            allowImageResize: true,
+            imageResizeUpscale: false,
+            allowImageTransform: true,
+            onaddfile: function (error, fileItem) {
+              if (error || !fileItem || typeof fileItem.setMetadata !== 'function') {
+                return;
+              }
+
+              const fileType = fileItem.fileType || (fileItem.file && fileItem.file.type) || '';
+
+              if (fileType === 'image/svg+xml') {
+                fileItem.setMetadata('resize', null);
+                return;
+              }
+
+              fileItem.setMetadata('resize', {
+                mode: 'contain',
+                upscale: false,
+                size: {
+                  width: 800,
+                  height: 800
+                }
+              });
+            },
            labelIdle: 'Logo hierher ziehen oder <span class="filepond--label-action">durchsuchen</span>'
          };

@@ -0,0 +1,28 @@
+(function () {
+    var decodeHtmlEntities = function (value) {
+        var textarea = document.createElement('textarea');
+        textarea.innerHTML = String(value || '');
+
+        return textarea.value;
+    };
+
+    var handleSubmit = function (event) {
+        var target = event.target;
+
+        if (!(target instanceof HTMLFormElement)) {
+            return;
+        }
+
+        var message = decodeHtmlEntities(target.getAttribute('data-confirm-message') || '');
+
+        if (!message) {
+            return;
+        }
+
+        if (!window.confirm(message)) {
+            event.preventDefault();
+        }
+    };
+
+    document.addEventListener('submit', handleSubmit, true);
+})();
@@ -65,7 +65,14 @@ class MemberEventsController extends AbstractFrontendModuleController
                if ('toggle_published' === $action) {
                    $this->eventRepository->togglePublished($eventId);
                } elseif ('duplicate' === $action) {
-                    $this->eventRepository->duplicate($eventId);
+                    $newEventId = $this->eventRepository->duplicate($eventId);
+
+                    if ($newEventId > 0 && $editPage instanceof PageModel) {
+                        return new RedirectResponse($this->generateContentUrl($editPage, [
+                            'event' => (string) $newEventId,
+                            'ref' => base64_encode($backUrl),
+                        ]));
+                    }
                } elseif ('delete' === $action) {
                    $this->eventRepository->delete($eventId);
                }
@@ -84,7 +84,8 @@ class EventRepository
        unset($row['id']);

        if (array_key_exists('title', $row)) {
-            $row['title'] = trim((string) $row['title'].' (Kopie)');
+            $normalizedTitle = html_entity_decode((string) $row['title'], ENT_QUOTES | ENT_HTML5, 'UTF-8');
+            $row['title'] = trim($normalizedTitle.' (Kopie)');
        }

        if (array_key_exists('alias', $row)) {
Author	SHA1	Message	Date
Jürgen Mummert	3176e6e414	Fix FilePond label interaction CSS conflicts	2026-03-01 11:52:43 +01:00
Jürgen Mummert	83c632f2dc	Tune FilePond panel aspect ratios	2026-03-01 11:34:24 +01:00
Jürgen Mummert	15a93466b6	Adjust FilePond sizing and upload resize rules	2026-03-01 10:56:38 +01:00
Jürgen Mummert	3942569fb3	fix(member-events): confirm actions reliably and normalize duplicate titles	2026-03-01 10:22:53 +01:00
Jürgen Mummert	ccf60a31e7	refactor(member-events): group editor actions in dedicated wrapper	2026-03-01 10:04:36 +01:00
Jürgen Mummert	000fdb8e79	fix(filter): adjust clear button spacing and hide select arrow when active	2026-02-27 21:15:09 +01:00