refactor(member-events): group editor actions in dedicated wrapper

contao/templates/frontend/event_filter.html.twig

@@ -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;
     }
 

contao/templates/frontend/member_events.html.twig

@@ -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;" 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;" 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>
+            </div>
           {% endif %}
         </li>
       {% endfor %}
@@ -69,30 +71,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;" 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;" 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>
+            </div>
           {% endif %}
         </li>
       {% endfor %}