Use class-only grid activation in event filter

contao/templates/frontend/event_edit.html.twig

@@ -27,7 +27,13 @@
       {{ form_row(form.title) }}
       {{ form_row(form.startDate) }}
       {{ form_row(form.endDate) }}
-      {{ form_row(form.addTime) }}
+      <div class="widget fullwidth">
+        <div class="ns-tag-switch-item">
+          {{ form_widget(form.addTime, { attr: { class: (form.addTime.vars.attr.class|default('') ~ ' ns-tag-switch-input')|trim, role: 'switch' } }) }}
+          {{ form_label(form.addTime) }}
+        </div>
+        {{ form_errors(form.addTime) }}
+      </div>
       <div id="event-time-wrap" hidden aria-hidden="true">
         {{ form_row(form.startTime) }}
         {{ form_row(form.endTime) }}
@@ -150,7 +156,13 @@
       </div>
 
       {{ form_row(form.url) }}
-      {{ form_row(form.addImage) }}
+      <div class="widget fullwidth">
+        <div class="ns-tag-switch-item">
+          {{ form_widget(form.addImage, { attr: { class: (form.addImage.vars.attr.class|default('') ~ ' ns-tag-switch-input')|trim, role: 'switch' } }) }}
+          {{ form_label(form.addImage) }}
+        </div>
+        {{ form_errors(form.addImage) }}
+      </div>
 
       <div id="event-image-upload-wrap" hidden aria-hidden="true">
         {{ form_row(form.eventUpload) }}
@@ -158,10 +170,34 @@
         <p class="help-text">Die Angabe des Urhebers ist notwendig. Ihnen muss eine Genehmigung zur Verwendung des Bildes vorliegen.</p>
       </div>
 
-      {{ form_row(form.termsAccepted) }}
-      {{ form_row(form.isSoldOut) }}
-      {{ form_row(form.isCanceled) }}
-      {{ form_row(form.published) }}
+      <div class="widget fullwidth">
+        <div class="ns-tag-switch-item">
+          {{ form_widget(form.termsAccepted, { attr: { class: (form.termsAccepted.vars.attr.class|default('') ~ ' ns-tag-switch-input')|trim, role: 'switch' } }) }}
+          {{ form_label(form.termsAccepted) }}
+        </div>
+        {{ form_errors(form.termsAccepted) }}
+      </div>
+      <div class="widget fullwidth">
+        <div class="ns-tag-switch-item">
+          {{ form_widget(form.isSoldOut, { attr: { class: (form.isSoldOut.vars.attr.class|default('') ~ ' ns-tag-switch-input')|trim, role: 'switch' } }) }}
+          {{ form_label(form.isSoldOut) }}
+        </div>
+        {{ form_errors(form.isSoldOut) }}
+      </div>
+      <div class="widget fullwidth">
+        <div class="ns-tag-switch-item">
+          {{ form_widget(form.isCanceled, { attr: { class: (form.isCanceled.vars.attr.class|default('') ~ ' ns-tag-switch-input')|trim, role: 'switch' } }) }}
+          {{ form_label(form.isCanceled) }}
+        </div>
+        {{ form_errors(form.isCanceled) }}
+      </div>
+      <div class="widget fullwidth">
+        <div class="ns-tag-switch-item">
+          {{ form_widget(form.published, { attr: { class: (form.published.vars.attr.class|default('') ~ ' ns-tag-switch-input')|trim, role: 'switch' } }) }}
+          {{ form_label(form.published) }}
+        </div>
+        {{ form_errors(form.published) }}
+      </div>
       <div class="actions" aria-label="Formularaktionen">
         <button type="submit" id="save-btn" disabled>Speichern</button>
         <button type="submit" id="save-back-btn" name="save_back" value="1" disabled>Speichern und Zurück</button>

contao/templates/frontend/event_filter.html.twig

@@ -47,11 +47,23 @@
     const targetEventListId = filters.dataset.eventlistId || 'eventlist';
     const list = document.getElementById(targetEventListId);
 
-    if (!list) {
-        console.warn(`[event_filter] Target event list #${targetEventListId} was not found.`);
+    const applyDefaultGrid = (targetList) => {
+        if (!targetList) {
+            return;
         }
 
-    list?.classList.add('event-filter-target-list');
+        targetList.classList.add('event-filter-target-list');
+        targetList.classList.add('grid');
+    };
+
+    if (!list) {
+        console.warn(`[event_filter] Target event list #${targetEventListId} was not found.`);
+        window.addEventListener('DOMContentLoaded', () => {
+            applyDefaultGrid(document.getElementById(targetEventListId));
+        }, { once: true });
+    }
+
+    applyDefaultGrid(list);
 
     const events = list ? Array.from(list.querySelectorAll(':scope > .event')) : [];
     const tagSelect = filters.querySelector('#tag-filter');