Jürgen Mummert
db7094fd1e
CSRF / actions: - List action forms now send both REQUEST_TOKEN (Contao gate) and _token (Symfony, validated via isCsrfTokenValid) — mirrors the editor; fixes the 400/500 "Ungültiger CSRF-Token" on publish/toggle/duplicate/delete Public reader / URLs: - Reader & results read auto_item via Input::get (marks the route param used) so clean path URLs /<page>/<alias> no longer 404 - List controller generates path URLs via ['parameters' => '/'.$alias] - Allow re-participation in the same session after a 60s cooldown Review fixes: - Results: merge answer snapshots by questionId+type (no more split cards on label edits); seed "Vielleicht" when allowMaybe so screen matches Excel - Reader: replace generic answer hint with per-option "weiter zu Frage X" only when a jump is configured; strip HTML tags from survey description - PDF: render free-text frequency summary; drop duplicate "Minimum" label - Drag-sort: bundle SortableJS locally, drop the duplicated inline sort CSS/JS from _survey_assets, throttle the backend MutationObserver - Backend: move hardcoded tl_survey operation labels to TL_LANG (de+en) - Remove dead code: SurveyEditorVoter, SurveyPermissionService, categoryFilter/categorySummary + helpers, orphaned publishSurvey lang key Reader layout: - max-width 1000px (other views keep 1400px); back/next buttons fill the width as equal, card-sized halves; sort handle icon offset tweak Docs: update AI_HANDOVER (dual-token CSRF, clean URLs) and README Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1210 lines
32 KiB
Twig
1210 lines
32 KiB
Twig
<style>
|
|
@font-face {
|
|
font-family: "PT Sans Narrow";
|
|
src: url("{{ asset('bundles/survey/fonts/PTSansNarrow-Regular.woff2') }}") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "PT Sans Narrow";
|
|
src: url("{{ asset('bundles/survey/fonts/PTSansNarrow-Bold.woff2') }}") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Blogger Sans";
|
|
src: url("{{ asset('bundles/survey/fonts/Blogger%20Sans-Medium.woff2') }}") format("woff2");
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--survey-blue: #0064ad;
|
|
--survey-orange: #ec7c32;
|
|
--survey-purple: #9d5276;
|
|
--survey-green: #00ae97;
|
|
--survey-rose: #fce4d6;
|
|
--survey-black: #222222;
|
|
--survey-gray-dark: #555e68;
|
|
--survey-gray-mid: #a2a8b4;
|
|
--survey-gray-soft: #e9e9eb;
|
|
--survey-surface: rgba(255, 255, 255, 0.92);
|
|
--survey-page-gutter: clamp(1.5em, 5vw, 10em);
|
|
}
|
|
|
|
.survey-brand-strip {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
max-width: 1400px;
|
|
margin-left: max(var(--survey-page-gutter), calc((100% - 1400px) / 2));
|
|
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: 82px;
|
|
display: block;
|
|
}
|
|
|
|
.survey-brand-logo.secondary {
|
|
width: auto;
|
|
max-width: min(100%, 420px);
|
|
height: 75px;
|
|
}
|
|
|
|
.survey-shell {
|
|
max-width: 1400px;
|
|
box-sizing: border-box;
|
|
margin-left: max(var(--survey-page-gutter), calc((100% - 1400px) / 2));
|
|
margin-right: max(var(--survey-page-gutter), calc((100% - 1400px) / 2));
|
|
color: var(--survey-black);
|
|
font-family: "PT Sans Narrow", sans-serif;
|
|
font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
|
|
line-height: 1.55;
|
|
letter-spacing: 0.3px;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(0, 100, 173, 0.22), transparent 30%),
|
|
radial-gradient(circle at bottom right, rgba(0, 174, 151, 0.12), transparent 34%),
|
|
linear-gradient(180deg, rgba(0, 100, 173, 0.12) 0%, rgba(255, 255, 255, 0.98) 52%, rgba(0, 100, 173, 0.08) 100%);
|
|
border: 1px solid rgba(162, 168, 180, 0.45);
|
|
border-radius: 2rem;
|
|
box-shadow: 0 28px 80px rgba(34, 34, 34, 0.08);
|
|
padding: clamp(1.5rem, 2.2vw, 2.4rem);
|
|
margin-bottom: 4em;
|
|
}
|
|
|
|
.survey-shell--reader {
|
|
max-width: 1000px;
|
|
margin-left: max(var(--survey-page-gutter), calc((100% - 1000px) / 2));
|
|
margin-right: max(var(--survey-page-gutter), calc((100% - 1000px) / 2));
|
|
}
|
|
|
|
.survey-shell--template {
|
|
background:
|
|
radial-gradient(circle at top left, rgba(236, 124, 50, 0.18), transparent 32%),
|
|
radial-gradient(circle at bottom right, rgba(157, 82, 118, 0.12), transparent 36%),
|
|
linear-gradient(180deg, rgba(252, 228, 214, 0.92) 0%, rgba(255, 250, 246, 0.98) 52%, rgba(252, 228, 214, 0.78) 100%);
|
|
}
|
|
|
|
.survey-shell h2,
|
|
.survey-shell h3,
|
|
.survey-shell h4 {
|
|
font-family: "Blogger Sans", sans-serif;
|
|
font-weight: 500;
|
|
color: var(--survey-blue);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.survey-shell,
|
|
.survey-shell * {
|
|
font-style: normal;
|
|
}
|
|
|
|
.survey-shell button,
|
|
.survey-shell input,
|
|
.survey-shell select,
|
|
.survey-shell textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
.survey-grid {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.survey-grid-columns {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.survey-results-card {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.survey-results-layout {
|
|
display: grid;
|
|
gap: 1.25rem;
|
|
margin-top: 1.1rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.survey-results-layout.no-chart {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.survey-chart-panel {
|
|
position: relative;
|
|
min-height: 320px;
|
|
}
|
|
|
|
.survey-chart-panel::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 1.5rem;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(0, 100, 173, 0.18), transparent 42%),
|
|
radial-gradient(circle at bottom right, rgba(236, 124, 50, 0.18), transparent 42%),
|
|
linear-gradient(135deg, rgba(0, 100, 173, 0.12) 0%, rgba(255, 255, 255, 0.9) 52%, rgba(236, 124, 50, 0.12) 100%);
|
|
border: 1px solid rgba(162, 168, 180, 0.28);
|
|
}
|
|
|
|
.survey-chart-frame {
|
|
position: relative;
|
|
z-index: 1;
|
|
min-height: 320px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.survey-chart-panel.is-line .survey-chart-frame {
|
|
min-height: 360px;
|
|
padding: 1rem 1rem 0.75rem;
|
|
}
|
|
|
|
.survey-chart-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.survey-results-panel {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.survey-results-list {
|
|
display: grid;
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.survey-results-row {
|
|
display: grid;
|
|
gap: 0.45rem;
|
|
padding: 0.9rem 1rem;
|
|
border-radius: 1.15rem;
|
|
background: rgba(255, 255, 255, 0.78);
|
|
border: 1px solid rgba(162, 168, 180, 0.24);
|
|
}
|
|
|
|
.survey-results-responses {
|
|
max-height: 24rem;
|
|
overflow: auto;
|
|
padding-right: 0.25rem;
|
|
}
|
|
|
|
.survey-text-summary-grid {
|
|
display: grid;
|
|
gap: 0.9rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
}
|
|
|
|
.survey-text-summary-card {
|
|
display: grid;
|
|
gap: 0.6rem;
|
|
padding: 1rem;
|
|
border-radius: 1.2rem;
|
|
background: rgba(255, 255, 255, 0.78);
|
|
border: 1px solid rgba(162, 168, 180, 0.24);
|
|
}
|
|
|
|
.survey-text-response-grid {
|
|
display: grid;
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.survey-response-card {
|
|
display: grid;
|
|
gap: 0.7rem;
|
|
margin: 0;
|
|
font-style: normal;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
.survey-response-card blockquote {
|
|
margin: 0;
|
|
}
|
|
|
|
.survey-response-card__index {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 999px;
|
|
background: rgba(0, 100, 173, 0.1);
|
|
color: var(--survey-blue);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.survey-metric-grid {
|
|
display: grid;
|
|
gap: 0.85rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
}
|
|
|
|
.survey-metric-card {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
padding: 0.95rem 1rem;
|
|
border-radius: 1.2rem;
|
|
background: rgba(252, 228, 214, 0.38);
|
|
border: 1px solid rgba(236, 124, 50, 0.16);
|
|
}
|
|
|
|
.survey-metric-card strong {
|
|
font-family: "Blogger Sans", sans-serif;
|
|
font-size: 1.35rem;
|
|
color: var(--survey-blue);
|
|
}
|
|
|
|
.survey-metric-label {
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--survey-gray-dark);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.survey-card {
|
|
background: var(--survey-surface);
|
|
border: 1px solid rgba(162, 168, 180, 0.34);
|
|
border-radius: 1.5rem;
|
|
padding: 1.25rem;
|
|
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.55rem;
|
|
padding: 0.9rem 1rem;
|
|
}
|
|
|
|
.survey-list-card__head {
|
|
display: flex;
|
|
gap: 0.6rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.survey-list-card__head--template {
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.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__headline--template {
|
|
align-items: baseline;
|
|
justify-content: flex-start;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.survey-list-card__title-wrap {
|
|
min-width: 0;
|
|
}
|
|
|
|
.survey-list-card__title-wrap h3 {
|
|
margin: 0;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.survey-list-card__actions {
|
|
margin-top: 0;
|
|
align-items: center;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.survey-list-card__actions .survey-question-action-form {
|
|
margin: 0;
|
|
}
|
|
|
|
.survey-list-card__head-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
flex: 0 0 auto;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.survey-list-card__head-actions--template {
|
|
align-items: baseline;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.survey-list-card__footer {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
margin-top: .3em;
|
|
}
|
|
|
|
.survey-list-card__stats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
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-size: 0.78rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.survey-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.survey-list-publish-form,
|
|
.survey-list-eye-form {
|
|
margin: 0;
|
|
}
|
|
|
|
.survey-list-publish-form {
|
|
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);
|
|
border-color: rgba(162, 168, 180, 0.65);
|
|
color: var(--survey-gray-dark);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.survey-list-publish-help {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 0.35rem);
|
|
width: 19rem;
|
|
max-width: min(72vw, 19rem);
|
|
border-radius: 0.75rem;
|
|
background: rgba(52, 58, 69, 0.94);
|
|
color: #fff;
|
|
padding: 0.5rem 0.65rem;
|
|
font-size: 0.8rem;
|
|
line-height: 1.3;
|
|
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-0.25rem);
|
|
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.survey-list-publish-form:hover .survey-list-publish-help,
|
|
.survey-list-publish-form:focus-within .survey-list-publish-help {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.survey-visibility-dot {
|
|
aspect-ratio: 1;
|
|
height: 42px;
|
|
border-radius: 999px;
|
|
background: #a6adb7;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: background 0.18s ease;
|
|
}
|
|
|
|
.survey-visibility-dot.is-on {
|
|
background: #0a832e;
|
|
}
|
|
|
|
.survey-button-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.survey-button-row--form-actions {
|
|
align-items: stretch;
|
|
}
|
|
|
|
.survey-button-row--editor-actions {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
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;
|
|
}
|
|
|
|
/* Reader: Zurück/Weiter füllen die volle Breite und sind so groß wie die Ja/Nein-Karten */
|
|
.survey-shell--reader .survey-button-row--navigation {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.survey-shell--reader .survey-button-row--navigation.has-back {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.survey-shell--reader .survey-navigation-form--back {
|
|
width: 100%;
|
|
}
|
|
|
|
.survey-shell--reader .survey-button-row--navigation .survey-button {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 1.25rem;
|
|
border-radius: 1.5rem;
|
|
}
|
|
|
|
.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;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.72rem 0.95rem;
|
|
border-radius: 999px;
|
|
border: 1px solid transparent;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
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); }
|
|
.survey-button.is-disabled,
|
|
.survey-button[disabled] {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.survey-button-compact {
|
|
padding: 0.65rem 0.9rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.survey-form-grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.survey-label {
|
|
display: grid;
|
|
gap: 0.4rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.survey-label input,
|
|
.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;
|
|
background: rgba(255,255,255,0.98);
|
|
color: var(--survey-black);
|
|
}
|
|
|
|
.survey-inline-check {
|
|
display: inline-flex;
|
|
gap: 0.6rem;
|
|
align-items: center;
|
|
border: 1px solid rgba(162,168,180,0.35);
|
|
border-radius: 1rem;
|
|
padding: 0.8rem 1rem;
|
|
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;
|
|
margin-bottom: 1rem;
|
|
background: rgba(255,255,255,0.78);
|
|
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); }
|
|
|
|
.survey-kpis {
|
|
display: grid;
|
|
gap: 1rem;
|
|
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-header-row {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.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;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
background: rgba(162,168,180,0.22);
|
|
}
|
|
|
|
.survey-progress > span {
|
|
display: block;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--survey-blue) 0%, var(--survey-orange) 100%);
|
|
}
|
|
|
|
.survey-progress-bar {
|
|
display: block;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--survey-blue) 0%, var(--survey-orange) 100%);
|
|
}
|
|
|
|
.survey-range-output {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
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;
|
|
}
|
|
|
|
.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__head-actions {
|
|
margin-left: 0;
|
|
justify-content: flex-end;
|
|
width: 100%;
|
|
}
|
|
|
|
.survey-list-card__footer {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.survey-button-row--navigation.has-back {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.survey-list-publish-help {
|
|
left: 0;
|
|
right: auto;
|
|
width: min(92vw, 19rem);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
}
|
|
</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;
|
|
|
|
if (!output) {
|
|
return;
|
|
}
|
|
|
|
var update = function () {
|
|
output.textContent = input.value;
|
|
};
|
|
|
|
input.addEventListener('input', update);
|
|
update();
|
|
});
|
|
|
|
document.querySelectorAll('[data-survey-question-type]').forEach(function (select) {
|
|
var wrapper = select.closest('[data-survey-question-editor]');
|
|
if (!wrapper) {
|
|
return;
|
|
}
|
|
|
|
var toggle = function () {
|
|
var showRange = select.value === 'range';
|
|
var showYesNoMaybe = select.value === 'yes_no_maybe';
|
|
var showChoice = select.value === 'choice';
|
|
|
|
wrapper.querySelectorAll('.range-config-field').forEach(function (element) {
|
|
element.style.display = showRange ? '' : 'none';
|
|
});
|
|
|
|
wrapper.querySelectorAll('.yes-no-config-field').forEach(function (element) {
|
|
element.style.display = showYesNoMaybe ? '' : 'none';
|
|
});
|
|
|
|
wrapper.querySelectorAll('.choice-config-field').forEach(function (element) {
|
|
element.style.display = showChoice ? '' : 'none';
|
|
});
|
|
};
|
|
|
|
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> |