Polish survey list actions and backend toggle

contao/dca/tl_survey.php

@@ -64,6 +64,7 @@ $GLOBALS['TL_DCA']['tl_survey'] = [
                 'href' => 'act=toggle&field=isActive',
                 'icon' => 'visible.svg',
                 'primary' => true,
+                'showInHeader' => true,
             ],
             'delete' => [
                 'href' => 'act=delete',

contao/templates/frontend/_survey_assets.html.twig

@@ -283,28 +283,32 @@
 
     .survey-list-card__head {
         display: flex;
-        gap: 0.75rem;
+        gap: 0.6rem;
-        justify-content: space-between;
+        align-items: center;
-        align-items: flex-start;
+    }
+
+    .survey-list-card__headline {
+        display: flex;
+        align-items: center;
+        gap: 0.6rem;
+        flex-wrap: wrap;
+        min-width: 0;
+        flex: 1 1 auto;
     }
 
     .survey-list-card__title-wrap {
-        display: grid;
-        gap: 0.45rem;
         min-width: 0;
     }
 
     .survey-list-card__title-wrap h3 {
         margin: 0;
-    }
+        line-height: 1.15;
-
-    .survey-list-card__stats {
-        gap: 0.6rem;
     }
 
     .survey-list-card__actions {
         margin-top: 0;
         align-items: center;
+        flex: 1 1 auto;
     }
 
     .survey-list-card__actions .survey-question-action-form {
@@ -313,10 +317,19 @@
 
     .survey-list-card__head-actions {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         justify-content: flex-end;
-        gap: 0.6rem;
+        gap: 0.5rem;
-        margin-left: auto;
+        flex: 0 0 auto;
+        margin-left: 1rem;
+    }
+
+    .survey-list-card__footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.75rem;
+        flex-wrap: wrap;
     }
 
     .survey-list-card__stats {
@@ -355,6 +368,11 @@
         position: relative;
     }
 
+    .survey-list-card__head-actions .survey-button {
+        padding: 0.55rem 0.82rem;
+        font-size: 0.9rem;
+    }
+
     .survey-list-publish-button[disabled] {
         opacity: 1;
         background: rgba(162, 168, 180, 0.4);
@@ -391,8 +409,8 @@
     }
 
     .survey-visibility-dot {
-        width: 2.75rem;
+        width: 2.2rem;
-        height: 2.75rem;
+        height: 2.2rem;
         border-radius: 999px;
         border: 1px solid rgba(162, 168, 180, 0.62);
         background: rgba(162, 168, 180, 0.22);
@@ -404,8 +422,8 @@
     }
 
     .survey-visibility-dot__icon {
-        width: 1rem;
+        width: 0.9rem;
-        height: 1rem;
+        height: 0.9rem;
         border-radius: 50%;
         background: #7f8793;
         display: inline-block;
@@ -843,10 +861,14 @@
 
         .survey-list-card__head-actions {
             margin-left: 0;
-            justify-content: flex-start;
+            justify-content: flex-end;
             width: 100%;
         }
 
+        .survey-list-card__footer {
+            align-items: flex-start;
+        }
+
         .survey-list-publish-help {
             left: 0;
             right: auto;

contao/templates/frontend/member_survey_list.html.twig

@@ -33,9 +33,43 @@
             {% for survey in surveys %}
                 <article class="survey-card survey-list-card">
                     <div class="survey-list-card__head">
+                        <div class="survey-list-card__headline">
                             <div class="survey-list-card__title-wrap">
                                 <h3>{{ survey.title|striptags|trim }}</h3>
                             </div>
+                            <div class="survey-list-card__stats">
+                                <span class="survey-list-stat">{{ 'survey.list.questions'|trans({'%count%': survey.questionCount}) }}</span>
+                                <span class="survey-list-stat">{{ 'survey.list.participations'|trans({'%count%': survey.participationCount}) }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="survey-list-card__footer">
+                        <div class="survey-button-row survey-list-card__actions">
+                            {% if survey.editUrl %}
+                                {% if survey.published %}
+                                    <span class="survey-button primary is-disabled" aria-disabled="true">{{ 'survey.list.edit'|trans }}</span>
+                                {% else %}
+                                    <a class="survey-button primary" href="{{ survey.editUrl }}">{{ 'survey.list.edit'|trans }}</a>
+                                {% endif %}
+                            {% endif %}
+                            {% if survey.publicUrl and survey.published %}
+                                <a class="survey-button secondary" href="{{ survey.publicUrl }}" target="_blank" rel="noreferrer">{{ 'survey.list.public_view'|trans }}</a>
+                            {% endif %}
+                            {% if survey.draftUrl and not survey.published %}
+                                <a class="survey-button secondary" href="{{ survey.draftUrl }}" target="_blank" rel="noreferrer">{{ 'survey.list.draft_view'|trans }}</a>
+                            {% endif %}
+                            {% if survey.resultsUrl %}
+                                <a class="survey-button secondary" href="{{ survey.resultsUrl }}" target="_blank" rel="noreferrer">{{ 'survey.list.show_results'|trans }}</a>
+                            {% endif %}
+                            <form method="post" class="survey-question-action-form">
+                                <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
+                                <input type="hidden" name="_survey_action" value="delete-survey">
+                                <input type="hidden" name="item_id" value="{{ survey.id }}">
+                                <input type="hidden" name="_token" value="{{ csrf_token('delete-survey-' ~ survey.id) }}">
+                                <button class="survey-button danger" onclick="return confirm('{{ 'survey.list.delete_confirm'|trans|e('js') }}') && confirm('{{ 'survey.list.delete_confirm_second'|trans|e('js') }}');">{{ 'survey.list.delete'|trans }}</button>
+                            </form>
+                        </div>
+
                         <div class="survey-list-card__head-actions">
                             <form method="post" class="survey-list-publish-form">
                                 <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
@@ -66,35 +100,6 @@
                             </form>
                         </div>
                     </div>
-                    <div class="survey-list-card__stats">
-                        <span class="survey-list-stat">{{ 'survey.list.questions'|trans({'%count%': survey.questionCount}) }}</span>
-                        <span class="survey-list-stat">{{ 'survey.list.participations'|trans({'%count%': survey.participationCount}) }}</span>
-                    </div>
-                    <div class="survey-button-row survey-list-card__actions">
-                        {% if survey.editUrl %}
-                            {% if survey.published %}
-                                <span class="survey-button primary is-disabled" aria-disabled="true">{{ 'survey.list.edit'|trans }}</span>
-                            {% else %}
-                                <a class="survey-button primary" href="{{ survey.editUrl }}">{{ 'survey.list.edit'|trans }}</a>
-                            {% endif %}
-                        {% endif %}
-                        {% if survey.publicUrl and survey.published %}
-                            <a class="survey-button secondary" href="{{ survey.publicUrl }}" target="_blank" rel="noreferrer">{{ 'survey.list.public_view'|trans }}</a>
-                        {% endif %}
-                        {% if survey.draftUrl and not survey.published %}
-                            <a class="survey-button secondary" href="{{ survey.draftUrl }}" target="_blank" rel="noreferrer">{{ 'survey.list.draft_view'|trans }}</a>
-                        {% endif %}
-                        {% if survey.resultsUrl %}
-                            <a class="survey-button secondary" href="{{ survey.resultsUrl }}" target="_blank" rel="noreferrer">{{ 'survey.list.show_results'|trans }}</a>
-                        {% endif %}
-                        <form method="post" class="survey-question-action-form">
-                            <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
-                            <input type="hidden" name="_survey_action" value="delete-survey">
-                            <input type="hidden" name="item_id" value="{{ survey.id }}">
-                            <input type="hidden" name="_token" value="{{ csrf_token('delete-survey-' ~ survey.id) }}">
-                            <button class="survey-button danger" onclick="return confirm('{{ 'survey.list.delete_confirm'|trans|e('js') }}') && confirm('{{ 'survey.list.delete_confirm_second'|trans|e('js') }}');">{{ 'survey.list.delete'|trans }}</button>
-                        </form>
-                    </div>
                 </article>
             {% else %}
                 <div class="survey-card">{{ 'survey.list.empty'|trans }}</div>