Refine survey list layout and backend active toggle
This commit is contained in:
Jürgen Mummert
@@ -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); }
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user