Fix survey reader back flow

2026-06-08 20:14:57 +02:00
parent e3553e1108
commit 79c4402aee
3 changed files with 101 additions and 20 deletions
@@ -466,6 +466,29 @@
        align-items: center;
    }

+    .survey-button-row--navigation {
+        width: 100%;
+        justify-content: flex-end;
+        align-items: center;
+        margin-top: 1rem;
+    }
+
+    .survey-button-row--navigation.has-back {
+        justify-content: space-between;
+    }
+
+    .survey-navigation-form {
+        margin: 0;
+    }
+
+    .survey-navigation-form--back {
+        margin: 0;
+    }
+
+    .survey-navigation-submit {
+        margin-left: auto;
+    }
+
    .survey-publish-toggle-form {
        margin: 0;
    }
@@ -843,6 +866,56 @@
        color: var(--survey-green);
    }

+    .survey-range-block {
+        gap: 1rem;
+    }
+
+    .survey-range-value-card {
+        display: grid;
+        place-items: center;
+        gap: 0.2rem;
+        width: min(100%, 8.5rem);
+        min-height: 8.5rem;
+        margin-inline: auto;
+        padding: 1rem;
+        border-radius: 50%;
+        background: radial-gradient(circle at top left, rgba(0, 100, 173, 0.12), rgba(255, 255, 255, 0.96) 62%, rgba(236, 124, 50, 0.16) 100%);
+        border: 1px solid rgba(0, 100, 173, 0.16);
+        box-shadow: 0 10px 24px rgba(34, 34, 34, 0.08);
+        text-align: center;
+    }
+
+    .survey-range-value-label {
+        font-size: 0.8rem;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--survey-gray-dark);
+    }
+
+    .survey-range-scale {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
+        width: 100%;
+    }
+
+    .survey-range-boundary {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 2.75rem;
+        min-height: 2.75rem;
+        padding: 0.45rem 0.7rem;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.82);
+        border: 1px solid rgba(0, 100, 173, 0.14);
+        color: var(--survey-blue);
+        font-weight: 700;
+        box-shadow: 0 6px 16px rgba(34, 34, 34, 0.05);
+    }
+
    @media (min-width: 960px) {
        .survey-grid-columns {
            grid-template-columns: 0.95fr 1.05fr;
@@ -880,6 +953,10 @@
            align-items: flex-start;
        }

+        .survey-button-row--navigation.has-back {
+            justify-content: space-between;
+        }
+
        .survey-list-publish-help {
            left: 0;
            right: auto;
@@ -52,20 +52,7 @@
                <h3>{{ question.question|striptags|trim }}</h3>
                {% if question.description|striptags|trim %}<p>{{ question.description|striptags|trim }}</p>{% endif %}

-                {% if canGoBack %}
-                    <form method="post" class="survey-button-row survey-button-row--navigation">
-                        <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
-                        <input type="hidden" name="_survey_navigation" value="back">
-                        <input type="hidden" name="_navigation_token" value="{{ csrf_token((isPreview ? 'survey-preview-back-' : 'survey-back-') ~ survey.id) }}">
-                        {% if isPreview %}
-                            <input type="hidden" name="preview_question" value="{{ question.id }}">
-                            <input type="hidden" name="preview_history" value="{{ historyState }}">
-                        {% endif %}
-                        <button type="submit" class="survey-button secondary">{{ 'survey.survey.back'|trans }}</button>
-                    </form>
-                {% endif %}
-
-                {{ form_start(surveyForm, {attr: {class: 'survey-form-grid'}}) }}
+                {{ form_start(surveyForm, {attr: {class: 'survey-form-grid', id: 'survey-answer-form-' ~ question.id}}) }}
                    <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
                    {% if isPreview %}
                        <input type="hidden" name="preview_question" value="{{ question.id }}">
@@ -89,21 +76,37 @@
                            {% endfor %}
                        </div>
                    {% elseif question.type == 'range' %}
-                        <div class="survey-grid">
-                            <div class="survey-card">
-                                <div>{{ 'survey.survey.current_value'|trans }}</div>
+                        <div class="survey-grid survey-range-block">
+                            <div class="survey-range-value-card">
+                                <div class="survey-range-value-label">{{ 'survey.survey.current_value'|trans }}</div>
                                <div id="survey-range-output-{{ question.id }}" class="survey-range-output">{{ question.rangeMin }}</div>
                            </div>
                            {{ form_widget(surveyForm.answer, {attr: {'data-survey-range': '1', 'data-survey-range-target': 'survey-range-output-' ~ question.id}}) }}
-                            <div class="survey-meta"><span>{{ question.rangeMin }}</span><span>{{ question.rangeMax }}</span></div>
+                            <div class="survey-range-scale"><span class="survey-range-boundary">{{ question.rangeMin }}</span><span class="survey-range-boundary">{{ question.rangeMax }}</span></div>
                        </div>
                    {% else %}
                        {{ form_widget(surveyForm.answer) }}
                    {% endif %}

                    {{ form_errors(surveyForm.answer) }}
-                    <div class="survey-button-row"><button class="survey-button primary">{{ 'survey.survey.next'|trans }}</button></div>
                {{ form_end(surveyForm) }}
+
+                <div class="survey-button-row survey-button-row--navigation{{ canGoBack ? ' has-back' : '' }}">
+                    {% if canGoBack %}
+                        <form method="post" class="survey-navigation-form survey-navigation-form--back">
+                            <input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
+                            <input type="hidden" name="_survey_navigation" value="back">
+                            <input type="hidden" name="_navigation_token" value="{{ csrf_token((isPreview ? 'survey-preview-back-' : 'survey-back-') ~ survey.id) }}">
+                            {% if isPreview %}
+                                <input type="hidden" name="preview_question" value="{{ question.id }}">
+                                <input type="hidden" name="preview_history" value="{{ historyState }}">
+                            {% endif %}
+                            <button type="submit" class="survey-button secondary">{{ 'survey.survey.back'|trans }}</button>
+                        </form>
+                    {% endif %}
+
+                    <button type="submit" form="{{ 'survey-answer-form-' ~ question.id }}" class="survey-button primary survey-navigation-submit">{{ 'survey.survey.next'|trans }}</button>
+                </div>
            </article>
        {% endif %}
    {% endif %}
@@ -6,6 +6,7 @@ namespace Mummert\SurveyBundle\Repository;

 use Doctrine\DBAL\ArrayParameterType;
 use Doctrine\DBAL\Connection;
+use Doctrine\DBAL\ParameterType;

 final class SurveyAnswerRepository
 {
@@ -92,7 +93,7 @@ final class SurveyAnswerRepository
        $this->connection->executeStatement(
            'DELETE FROM tl_survey_answer WHERE submission = ? AND question NOT IN (?)',
            [$submissionId, array_values(array_unique(array_map('intval', $questionIds)))],
-            [\PDO::PARAM_INT, ArrayParameterType::INTEGER],
+            [ParameterType::INTEGER, ArrayParameterType::INTEGER],
        );
    }