mummert/survey-bundle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine survey list layout and backend active toggle

Browse Source
This commit is contained in:
Jürgen Mummert
2026-06-07 20:52:57 +02:00
parent 59514c6911
commit fb9a5b9ee6
5 changed files with 65 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contao/dca/tl_survey.php
+2 -2
View File
@@ -59,11 +59,11 @@ $GLOBALS['TL_DCA']['tl_survey'] = [
'icon' => 'important.svg',
'button_callback' => [SurveyDcaListener::class, 'generatePublishedWarningButton'],
],
'toggleActive' => [
'toggle' => [
'label' => &$GLOBALS['TL_LANG']['tl_survey']['toggleActive'],
'href' => 'act=toggle&field=isActive',
'icon' => 'visible.svg',
'button_callback' => [SurveyDcaListener::class, 'generateToggleActiveButton'],
'primary' => true,
],
'delete' => [
'href' => 'act=delete',
contao/templates/frontend/_survey_assets.html.twig
+38 -31
View File
@@ -277,13 +277,13 @@
.survey-list-card {
display: grid;
gap: 0.9rem;
padding: 1.1rem 1.15rem;
gap: 0.55rem;
padding: 0.9rem 1rem;
}
.survey-list-card__head {
display: flex;
gap: 1rem;
gap: 0.75rem;
justify-content: space-between;
align-items: flex-start;
}
@@ -322,10 +322,21 @@
.survey-list-card__stats {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
gap: 0.45rem;
margin-top: 0.1rem;
}
.survey-list-stat {
display: inline-flex;
align-items: center;
padding: 0.34rem 0.62rem;
border-radius: 999px;
border: 1px solid rgba(0, 100, 173, 0.12);
background: rgba(255, 255, 255, 0.72);
color: var(--survey-gray-dark);
font-weight: 600;
margin-top: 0.3rem;
font-size: 0.78rem;
font-weight: 700;
line-height: 1;
}
.survey-meta {
@@ -379,7 +390,7 @@
transform: translateY(0);
}
.survey-visibility-eye {
.survey-visibility-dot {
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
@@ -392,41 +403,28 @@
transition: background 0.18s ease, border-color 0.18s ease;
}
.survey-visibility-eye__icon {
width: 1.25rem;
height: 0.8rem;
border: 2px solid currentColor;
border-radius: 99px;
position: relative;
color: #7f8793;
}
.survey-visibility-eye__icon::after {
content: "";
position: absolute;
width: 0.34rem;
height: 0.34rem;
.survey-visibility-dot__icon {
width: 1rem;
height: 1rem;
border-radius: 50%;
background: currentColor;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #7f8793;
display: inline-block;
}
.survey-visibility-eye.is-on {
.survey-visibility-dot.is-on {
background: rgba(0, 174, 151, 0.2);
border-color: rgba(0, 174, 151, 0.68);
}
.survey-visibility-eye.is-on .survey-visibility-eye__icon {
color: #0a8378;
.survey-visibility-dot.is-on .survey-visibility-dot__icon {
background: #0a8378;
}
.survey-button-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
gap: 0.5rem;
margin-top: 0.65rem;
}
.survey-button-row--form-actions {
@@ -517,7 +515,7 @@
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1rem;
padding: 0.72rem 0.95rem;
border-radius: 999px;
border: 1px solid transparent;
text-decoration: none;
@@ -525,6 +523,15 @@
cursor: pointer;
}
.survey-list-card__actions .survey-button {
padding: 0.55rem 0.82rem;
font-size: 0.9rem;
}
.survey-editor-meta-card {
margin-bottom: 1rem;
}
.survey-button.primary { background: var(--survey-blue); color: #fff; }
.survey-button.secondary { background: rgba(255,255,255,0.86); color: var(--survey-blue); border-color: rgba(0,100,173,0.18); }
.survey-button.danger { background: rgba(157, 82, 118, 0.12); color: var(--survey-purple); border-color: rgba(157, 82, 118, 0.22); }
contao/templates/frontend/member_survey_edit.html.twig
+21 -4
View File
@@ -46,16 +46,33 @@
{{ form_end(surveyForm, {render_rest: false}) }}
</div>
{% else %}
{% set surveyMetaFormId = 'survey-meta-form' %}
{% set newQuestionFormId = 'survey-question-form-new' %}
<div class="survey-button-row survey-button-row--editor-actions">
{% if backUrl %}<a class="survey-button secondary" href="{{ backUrl }}">{{ 'survey.edit.back_to_list'|trans }}</a>{% endif %}
</div>
{% if structureLocked|default(false) %}
<div class="survey-alert warning">{{ 'survey.edit.structure_locked'|trans }}</div>
{% if not survey.published %}
<div class="survey-card survey-editor-meta-card">
{{ form_start(surveyForm, {action: metadataFormActionUrl, attr: {class: 'survey-form-grid', id: surveyMetaFormId, 'data-survey-dirty-form': '1'}}) }}
<input type="hidden" name="REQUEST_TOKEN" value="{{ contao.request_token }}">
<input type="hidden" name="{{ surveyForm.published.vars.full_name }}" value="0">
{{ form_widget(surveyForm._token) }}
{{ form_errors(surveyForm) }}
<label class="survey-label">{{ 'survey.edit.label_survey_title'|trans }}{{ form_widget(surveyForm.title) }}{{ form_errors(surveyForm.title) }}</label>
<label class="survey-label">{{ 'survey.edit.label_description'|trans }}{{ form_widget(surveyForm.description) }}</label>
<div class="survey-button-row survey-button-row--form-actions">
<button class="survey-button primary">{{ 'survey.edit.save_metadata'|trans }}</button>
<div class="survey-dirty-hint" data-survey-dirty-hint-for="{{ surveyMetaFormId }}" hidden>{{ 'survey.edit.dirty_metadata'|trans }}</div>
</div>
{{ form_end(surveyForm, {render_rest: false}) }}
</div>
{% endif %}
{% set surveyMetaFormId = 'survey-meta-form' %}
{% set newQuestionFormId = 'survey-question-form-new' %}
{% if structureLocked|default(false) and not survey.published %}
<div class="survey-alert warning">{{ 'survey.edit.structure_locked'|trans }}</div>
{% endif %}
<div class="survey-grid-columns survey-editor-layout">
<div class="survey-question-editor-shell" data-survey-question-editor>
contao/templates/frontend/member_survey_list.html.twig
+4 -4
View File
@@ -60,15 +60,15 @@
<input type="hidden" name="_survey_action" value="toggle-active">
<input type="hidden" name="item_id" value="{{ survey.id }}">
<input type="hidden" name="_token" value="{{ csrf_token('toggle-active-' ~ survey.id) }}">
<button type="submit" class="survey-visibility-eye{{ survey.isActive ? ' is-on' : '' }}" title="{{ survey.isActive ? 'survey.edit.deactivate_survey'|trans : 'survey.edit.activate_survey'|trans }}" aria-label="{{ survey.isActive ? 'survey.edit.deactivate_survey'|trans : 'survey.edit.activate_survey'|trans }}">
<span class="survey-visibility-eye__icon" aria-hidden="true"></span>
<button type="submit" class="survey-visibility-dot{{ survey.isActive ? ' is-on' : '' }}" title="{{ survey.isActive ? 'survey.edit.deactivate_survey'|trans : 'survey.edit.activate_survey'|trans }}" aria-label="{{ survey.isActive ? 'survey.edit.deactivate_survey'|trans : 'survey.edit.activate_survey'|trans }}">
<span class="survey-visibility-dot__icon" aria-hidden="true"></span>
</button>
</form>
</div>
</div>
<div class="survey-list-card__stats">
<span>{{ 'survey.list.questions'|trans({'%count%': survey.questionCount}) }}</span>
<span>{{ 'survey.list.participations'|trans({'%count%': survey.participationCount}) }}</span>
<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 %}