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

Refine survey editor flow and auth styling

Browse Source
This commit is contained in:
Jürgen Mummert
2026-05-25 16:02:47 +02:00
parent e204da60b6
commit a893078945
18 changed files with 1649 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contao/templates/frontend/_survey_assets.html.twig
+538 -16
View File
@@ -40,30 +40,22 @@
.survey-brand-strip {
display: flex;
align-items: center;
gap: 1.5rem;
justify-content: center;
gap: 1.5rem;
max-width: 1400px;
box-sizing: border-box;
margin-top: 0;
margin-right: max(var(--survey-page-gutter), calc((100% - 1400px) / 2));
margin-bottom: clamp(2rem, 4vw, 3.5rem);
margin-left: max(var(--survey-page-gutter), calc((100% - 1400px) / 2));
padding: 1rem 1.25rem 0.5rem;
}
.survey-brand-logo {
display: block;
min-width: 0;
max-width: 100%;
flex-shrink: 1;
object-fit: contain;
object-position: center;
margin-right: max(var(--survey-page-gutter), calc((100% - 1400px) / 2));
margin-top: 0;
margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
padding: 0.5rem 0 0;
box-sizing: border-box;
}
.survey-brand-logo.primary {
width: auto;
max-width: min(100%, 320px);
height: 75px;
height: 82px;
display: block;
}
.survey-brand-logo.secondary {
@@ -240,6 +232,72 @@
box-shadow: 0 12px 32px rgba(34, 34, 34, 0.06);
}
.survey-list-grid {
grid-template-columns: 1fr;
align-items: stretch;
}
.survey-list-card {
display: grid;
gap: 0.9rem;
padding: 1.1rem 1.15rem;
}
.survey-list-card__head {
display: flex;
gap: 1rem;
justify-content: space-between;
align-items: flex-start;
}
.survey-list-card__title-wrap {
display: grid;
gap: 0.45rem;
min-width: 0;
}
.survey-list-card__title-wrap h3 {
margin: 0;
}
.survey-list-card__stats {
gap: 0.6rem;
}
.survey-list-card__actions {
margin-top: 0;
align-items: center;
}
.survey-list-card__actions .survey-question-action-form {
margin: 0;
}
.survey-list-card__toggle-form {
flex-shrink: 0;
align-self: flex-start;
}
.survey-publish-toggle--compact {
min-height: 2.8rem;
padding: 0.45rem 0.65rem 0.45rem 0.85rem;
gap: 0.7rem;
}
.survey-publish-toggle--compact .survey-publish-toggle__track {
width: 3rem;
height: 1.7rem;
}
.survey-publish-toggle--compact .survey-publish-toggle__thumb {
width: 1.4rem;
height: 1.4rem;
}
.survey-publish-toggle--compact.is-on .survey-publish-toggle__thumb {
transform: translateX(1.25rem);
}
.survey-meta {
display: flex;
flex-wrap: wrap;
@@ -270,6 +328,89 @@
margin-top: 1rem;
}
.survey-button-row--form-actions {
align-items: stretch;
}
.survey-button-row--editor-actions {
margin-top: 0;
margin-bottom: 1rem;
align-items: center;
}
.survey-publish-toggle-form {
margin: 0;
}
.survey-publish-toggle {
display: inline-flex;
align-items: center;
gap: 0.9rem;
padding: 0.55rem 0.7rem 0.55rem 1rem;
border-radius: 999px;
border: 1px solid rgba(0, 100, 173, 0.18);
background: rgba(255, 255, 255, 0.9);
color: var(--survey-blue);
cursor: pointer;
min-height: 3.2rem;
}
.survey-publish-toggle.is-on {
border-color: rgba(0, 174, 151, 0.3);
background: rgba(0, 174, 151, 0.08);
}
.survey-publish-toggle__copy {
display: grid;
gap: 0.05rem;
text-align: left;
line-height: 1.1;
}
.survey-publish-toggle__label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--survey-gray-dark);
}
.survey-publish-toggle__value {
font-weight: 700;
}
.survey-publish-toggle__track {
position: relative;
display: inline-flex;
align-items: center;
width: 3.35rem;
height: 1.9rem;
border-radius: 999px;
background: rgba(162, 168, 180, 0.45);
transition: background 0.2s ease;
flex-shrink: 0;
}
.survey-publish-toggle.is-on .survey-publish-toggle__track {
background: rgba(0, 174, 151, 0.72);
}
.survey-publish-toggle__thumb {
position: absolute;
top: 0.15rem;
left: 0.15rem;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 12px rgba(34, 34, 34, 0.18);
transition: transform 0.2s ease;
}
.survey-publish-toggle.is-on .survey-publish-toggle__thumb {
transform: translateX(1.45rem);
}
.survey-button {
display: inline-flex;
justify-content: center;
@@ -287,6 +428,11 @@
.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); }
.survey-button-compact {
padding: 0.65rem 0.9rem;
font-size: 0.95rem;
}
.survey-form-grid {
display: grid;
gap: 1rem;
@@ -302,6 +448,7 @@
.survey-label textarea,
.survey-label select {
width: 100%;
box-sizing: border-box;
border-radius: 1rem;
border: 1px solid rgba(162,168,180,0.5);
padding: 0.8rem 0.9rem;
@@ -319,6 +466,16 @@
background: rgba(252,228,214,0.42);
}
.survey-question-toggles {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.survey-question-toggles .survey-inline-check {
margin: 0;
}
.survey-alert {
border-radius: 1.2rem;
padding: 1rem 1.1rem;
@@ -327,6 +484,15 @@
border: 1px solid rgba(162,168,180,0.35);
}
.survey-alert.success {
background: linear-gradient(135deg, rgba(0, 174, 151, 0.2), rgba(255,255,255,0.96));
border-color: rgba(0, 174, 151, 0.62);
color: #085e57;
box-shadow: 0 18px 40px rgba(0, 174, 151, 0.16);
font-weight: 700;
border-left: 0.45rem solid rgba(0, 174, 151, 0.92);
}
.survey-alert.error { border-color: rgba(157, 82, 118, 0.28); color: var(--survey-purple); }
.survey-alert.warning { border-color: rgba(236, 124, 50, 0.28); color: var(--survey-orange); }
@@ -336,6 +502,178 @@
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.survey-kpis--compact {
grid-template-columns: minmax(0, 360px);
}
.survey-editor-layout {
align-items: start;
}
.survey-editor-meta {
align-self: start;
}
.survey-question-editor-shell {
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
}
.survey-section-head {
justify-content: space-between;
align-items: center;
}
.survey-accordion-list {
display: grid;
gap: 0.85rem;
}
.survey-accordion-item {
border: 1px solid rgba(162, 168, 180, 0.34);
border-radius: 1.3rem;
background: rgba(255, 255, 255, 0.78);
overflow: hidden;
}
.survey-accordion-header {
margin: 0;
}
.survey-accordion-toggle {
display: flex;
width: 100%;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.1rem;
background: transparent;
border: 0;
text-align: left;
}
.survey-accordion-item .handorgel__header__button,
.survey-accordion-item .handorgel__header__button:hover,
.survey-accordion-item .handorgel__header__button:focus {
background: transparent;
border-top: 0;
color: inherit;
transition: background 0.2s ease, color 0.2s ease;
}
.survey-accordion-item .handorgel__header__button:hover,
.survey-accordion-item .handorgel__header__button:focus,
.survey-accordion-item .handorgel__header--opened .handorgel__header__button {
background: var(--survey-blue);
color: #fff;
}
.survey-accordion-item .handorgel__header__button:hover .survey-accordion-index,
.survey-accordion-item .handorgel__header__button:focus .survey-accordion-index,
.survey-accordion-item .handorgel__header--opened .survey-accordion-index,
.survey-accordion-item .handorgel__header__button:hover .survey-accordion-copy strong,
.survey-accordion-item .handorgel__header__button:focus .survey-accordion-copy strong,
.survey-accordion-item .handorgel__header--opened .survey-accordion-copy strong {
color: #fff;
}
.survey-accordion-item .handorgel__header__button:hover .survey-badge,
.survey-accordion-item .handorgel__header__button:focus .survey-badge,
.survey-accordion-item .handorgel__header--opened .survey-badge {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.survey-accordion-heading {
display: flex;
align-items: flex-start;
gap: 0.8rem;
min-width: 0;
flex: 1 1 280px;
}
.survey-accordion-index {
display: inline-flex;
min-width: 2ch;
justify-content: flex-end;
font-family: "Blogger Sans", sans-serif;
font-weight: 700;
color: var(--survey-orange);
}
.survey-accordion-copy {
display: grid;
gap: 0.2rem;
min-width: 0;
}
.survey-accordion-copy strong {
color: var(--survey-blue);
font-family: "Blogger Sans", sans-serif;
font-weight: 500;
}
.survey-accordion-copy span {
color: var(--survey-gray-dark);
font-size: 0.95rem;
}
.survey-accordion-actions {
justify-content: flex-end;
align-items: center;
flex: 1 0 auto;
margin-left: auto;
}
.survey-accordion-panel {
border-top: 1px solid rgba(162, 168, 180, 0.24);
background: rgba(255, 255, 255, 0.72);
}
.survey-accordion-panel .handorgel__content__inner {
display: grid;
gap: 1rem;
padding: 1.4rem;
}
.survey-condition-card {
padding: 1rem 1.1rem;
}
.survey-button-row--question-actions {
margin-top: 0;
align-items: center;
}
.survey-question-action-form {
margin: 0;
}
.survey-dirty-hint {
display: inline-flex;
align-items: center;
gap: 0.45rem;
justify-content: center;
margin-left: auto;
min-height: 3rem;
max-width: 100%;
padding: 0.8rem 1rem;
border-radius: 999px;
background: rgba(189, 29, 29, 0.14);
border: 1px solid rgba(189, 29, 29, 0.35);
color: #a11f1f;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.02em;
text-align: center;
}
.survey-dirty-hint[hidden] {
display: none !important;
}
.survey-progress {
width: 100%;
height: 0.75rem;
@@ -367,24 +705,96 @@
grid-template-columns: 0.95fr 1.05fr;
}
.survey-editor-layout > .survey-editor-meta {
grid-column: 1 / -1;
}
.survey-editor-layout > [data-survey-question-editor] {
grid-column: 1 / -1;
}
.survey-editor-layout > .survey-editor-side {
grid-column: 1 / -1;
}
.survey-results-layout {
grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
}
}
@media (max-width: 767px) {
.survey-list-card__head {
flex-direction: column;
}
.survey-list-card__toggle-form {
width: auto;
max-width: 100%;
}
.survey-list-card__toggle-form .survey-publish-toggle {
width: auto;
max-width: 100%;
}
.survey-brand-strip {
padding: 0.75rem 0.75rem 0.25rem;
}
.survey-brand-logo.primary {
height: 64px;
max-width: min(100%, 260px);
}
.survey-brand-logo.secondary {
height: 75px;
max-width: 100%;
}
.survey-kpis--compact {
grid-template-columns: 1fr;
}
.survey-accordion-header {
margin: 0;
}
.survey-accordion-actions {
width: auto;
justify-content: flex-end;
}
.survey-accordion-toggle {
padding: 0.95rem 1rem;
}
.survey-publish-toggle:not(.survey-publish-toggle--compact) {
width: 100%;
justify-content: space-between;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var surveyEditor = document.querySelector('[data-survey-handorgel]');
var resetEditorViewport = function () {
if (!surveyEditor) {
return;
}
window.scrollTo(0, 0);
};
if (surveyEditor && window.history && 'scrollRestoration' in window.history) {
window.history.scrollRestoration = 'manual';
}
resetEditorViewport();
window.addEventListener('load', function () {
window.setTimeout(resetEditorViewport, 0);
}, { once: true });
document.querySelectorAll('[data-survey-range]').forEach(function (input) {
var targetId = input.getAttribute('data-survey-range-target');
var output = targetId ? document.getElementById(targetId) : null;
@@ -428,5 +838,117 @@
select.addEventListener('change', toggle);
toggle();
});
document.querySelectorAll('[data-copy-text]').forEach(function (button) {
var originalLabel = button.getAttribute('data-copy-label') || button.textContent;
var successLabel = button.getAttribute('data-copy-success') || originalLabel;
var copyText = function (value) {
if (navigator.clipboard && navigator.clipboard.writeText) {
return navigator.clipboard.writeText(value);
}
return new Promise(function (resolve, reject) {
var helper = document.createElement('textarea');
helper.value = value;
helper.setAttribute('readonly', 'readonly');
helper.style.position = 'absolute';
helper.style.left = '-9999px';
document.body.appendChild(helper);
helper.select();
try {
document.execCommand('copy');
document.body.removeChild(helper);
resolve();
} catch (error) {
document.body.removeChild(helper);
reject(error);
}
});
};
button.addEventListener('click', function () {
var text = button.getAttribute('data-copy-text') || '';
if (!text) {
return;
}
copyText(text).then(function () {
button.textContent = successLabel;
window.setTimeout(function () {
button.textContent = originalLabel;
}, 1800);
}).catch(function () {
button.textContent = originalLabel;
});
});
});
document.querySelectorAll('[data-survey-dirty-form]').forEach(function (form) {
var formId = form.getAttribute('id') || '';
var hint = form.querySelector('[data-survey-dirty-hint]');
if (!hint && formId) {
hint = document.querySelector('[data-survey-dirty-hint-for="' + formId + '"]');
}
if (!hint) {
return;
}
var serializeForm = function () {
var entries = [];
var formData = new FormData(form);
formData.forEach(function (value, key) {
entries.push(key + '=' + String(value));
});
return entries.join('&');
};
var initialState = serializeForm();
var updateDirtyState = function () {
hint.hidden = serializeForm() === initialState;
};
var markDirty = function () {
updateDirtyState();
};
hint.hidden = true;
form.addEventListener('input', markDirty);
form.addEventListener('change', markDirty);
form.addEventListener('reset', function () {
window.setTimeout(function () {
hint.hidden = true;
}, 0);
});
});
if (typeof handorgel === 'function') {
document.querySelectorAll('[data-survey-handorgel]').forEach(function (element) {
var accordion = new handorgel(element, {
collapsible: true,
multiSelectable: false,
initialOpenTransition: true,
initialOpenTransitionDelay: 0
});
if (accordion && Array.isArray(accordion.folds)) {
accordion.folds.forEach(function (fold) {
if (fold && fold.expanded) {
fold.close();
}
});
}
});
}
resetEditorViewport();
});
</script>