From 7a3e8a26318a6f4d3f57767ac2803623a6769685 Mon Sep 17 00:00:00 2001 From: thomasrosen Date: Tue, 22 Nov 2022 13:49:56 +0100 Subject: [PATCH 1/3] questions heading --- frontend/_DATA_.js | 5 +++++ frontend/index.html | 1 + 2 files changed, 6 insertions(+) diff --git a/frontend/_DATA_.js b/frontend/_DATA_.js index 88b8ed6..3097529 100644 --- a/frontend/_DATA_.js +++ b/frontend/_DATA_.js @@ -136,6 +136,11 @@ const _DATA_ = { en: 'To the questions', }, + questions_heading: { + de: 'Fragen', + en: 'Questions', + }, + button_send_to_volt: { de: 'An Volt senden', en: 'Send to Volt', diff --git a/frontend/index.html b/frontend/index.html index 7c711b4..1b06dfb 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -205,6 +205,7 @@
+

From 77dfe635517f7ba196f8dec786c91bbb499c072d Mon Sep 17 00:00:00 2001 From: thomasrosen Date: Tue, 22 Nov 2022 13:50:26 +0100 Subject: [PATCH 2/3] replace .violet_bg with .purple_bg --- frontend/index.css | 6 +++--- frontend/index.html | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/index.css b/frontend/index.css index e4562c8..8879887 100644 --- a/frontend/index.css +++ b/frontend/index.css @@ -93,7 +93,7 @@ a:hover { display: block; } -.page.violet_bg { +.page.purple_bg { color: white; background: var(--volt-purple); } @@ -177,7 +177,7 @@ h1 { transition: font-size 0.2s ease; } -.page.violet_bg h1, +.page.purple_bg h1, .page.red_bg h1, .page.blue_bg h1 { color: var(--on-dark-color); @@ -535,7 +535,7 @@ button { transition: opacity 0.2s ease; } -.page.violet_bg button { +.page.purple_bg button { background: var(--light-color); color: var(--volt-purple); } diff --git a/frontend/index.html b/frontend/index.html index 1b06dfb..c6bc186 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -53,7 +53,7 @@ -
+

-
+

From d463eabc22181534e2b8d70476df82cf6e339cd3 Mon Sep 17 00:00:00 2001 From: thomasrosen Date: Tue, 22 Nov 2022 13:51:04 +0100 Subject: [PATCH 3/3] other layout and a different color for each section --- frontend/_DATA_.js | 7 ++ frontend/index.css | 161 +++++++++++++++++++++++++++----------------- frontend/index.html | 2 +- frontend/index.js | 50 +++++++++++++- 4 files changed, 158 insertions(+), 62 deletions(-) diff --git a/frontend/_DATA_.js b/frontend/_DATA_.js index 3097529..afaf101 100644 --- a/frontend/_DATA_.js +++ b/frontend/_DATA_.js @@ -166,6 +166,7 @@ const _DATA_ = { }, sections: [ { + color: '#502379', heading: { de: 'Bildung', en: 'Education', @@ -215,6 +216,7 @@ const _DATA_ = { } }, { + color: '#FDC220', heading: { de: 'Kultur' }, questions: { amount_of_kown_languages: { @@ -248,6 +250,7 @@ const _DATA_ = { } }, { + color: '#E63E12', heading: { de: 'Diskriminierung' }, questions: { discriminatory_experiences: { @@ -312,6 +315,7 @@ const _DATA_ = { }, }, { + color: '#1BBE6F', heading: { de: 'LGBTQ*' }, questions: { gender: { @@ -356,6 +360,7 @@ const _DATA_ = { }, }, { + color: '#82D0F4', heading: { de: 'Psyche' }, questions: { psychological_difficulties: { @@ -410,6 +415,7 @@ const _DATA_ = { }, }, { + color: '#502379', heading: { de: 'Hilfsmittel' }, questions: { everyday_aids: { @@ -447,6 +453,7 @@ const _DATA_ = { } }, { + color: '#502379', heading: { de: 'Verbesserung der Umfrage' }, intro: { de: 'Die ist unsere erste Umfrage dieser Art. Hier kannst du uns helfen diese weiter zu entwickeln …' }, questions: { diff --git a/frontend/index.css b/frontend/index.css index 8879887..95a5ce1 100644 --- a/frontend/index.css +++ b/frontend/index.css @@ -108,36 +108,111 @@ a:hover { background: var(--volt-blue); } +.page.white_bg { + color: var(--volt-purple); + background: white; +} + .page .pageContent { width: var(--page-width); max-width: calc(100% - 64px); margin: 0 auto; padding: 64px 0; } +.page .pageContent.question_page { + width: 100%; + max-width: 100%; + padding: 64px 32px; +} section { - margin: 128px 0 32px 0; + background: var(--section-color); + color: var(--on-section-color); + margin: 0 -32px; + padding: 128px 32px 32px 32px; } + +section h2 { + /* background: white; */ + /* color: var(--volt-purple); */ + padding: 0; + margin: 0; + width: 100%; + color: currentColor; +} + +/* +section h2:after { + z-index: -1; + content: ''; + position: absolute; + top: 0; + right: -1000px; + bottom: 0; + width: 1000px; + + box-shadow: + calc(var(--block-width) * -9) 0 0 var(--volt-purple), + calc(var(--block-width) * -8) 0 0 var(--volt-purple), + calc(var(--block-width) * -7) 0 0 var(--volt-purple), + calc(var(--block-width) * -6) 0 0 var(--volt-purple), + calc(var(--block-width) * -5) 0 0 var(--volt-purple), + calc(var(--block-width) * -4) 0 0 var(--volt-purple), + calc(var(--block-width) * -3) 0 0 var(--volt-purple), + calc(var(--block-width) * -2) 0 0 var(--volt-purple), + calc(var(--block-width) * -1) 0 0 var(--volt-purple); + + /*box-shadow: + calc(var(--block-width) * -9) 0 0 var(--volt-purple), + calc(var(--block-width) * -8) 0 0 var(--volt-purple), + calc(var(--block-width) * -7) 0 0 var(--volt-purple), + calc(var(--block-width) * -6) 0 0 var(--volt-purple), + calc(var(--block-width) * -5) 0 0 var(--volt-purple), + calc(var(--block-width) * -4) 0 0 var(--volt-purple), + calc(var(--block-width) * -3) 0 0 var(--volt-purple), + calc(var(--block-width) * -2) 0 0 var(--volt-purple), + calc(var(--block-width) * -1) 0 0 var(--volt-purple), + calc(var(--block-width) * 1) 0 0 var(--volt-purple), + calc(var(--block-width) * 2) 0 0 var(--volt-purple), + calc(var(--block-width) * 3) 0 0 var(--volt-purple), + calc(var(--block-width) * 4) 0 0 var(--volt-purple), + calc(var(--block-width) * 5) 0 0 var(--volt-purple), + calc(var(--block-width) * 6) 0 0 var(--volt-purple), + calc(var(--block-width) * 7) 0 0 var(--volt-purple), + calc(var(--block-width) * 8) 0 0 var(--volt-purple), + calc(var(--block-width) * 9) 0 0 var(--volt-purple);*/ +} +*/ + section .intro { width: 500px; max-width: 100%; margin: 64px 0 0 0; } -.question { - display: block; - width: 500px; - max-width: 100%; - /*padding: 32px;*/ - margin: 64px 0 0 0; - /*box-shadow: 0 16px 32px rgba(0,0,0,0.2);*/ +.page .pageContent.question_page .questions { + margin-top: 32px; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); + gap: 32px; +} +@media (max-width: 500px) { + .page .pageContent.question_page .questions { + grid-template-columns: 100%; + } } -@media (max-width: 800px) { - .question { -margin: 32px 0 0 0; - } +.question { + display: block; + width: 100%; + padding: 32px; + + background: white; + color: var(--volt-purple); +} +.question h3 { + margin-bottom: 16px; } .voltLogo { @@ -182,6 +257,9 @@ h1 { .page.blue_bg h1 { color: var(--on-dark-color); } +.page.white_bg h1 { + color: var(--volt-purple); +} @media (max-width: 800px) { h1 { @@ -205,53 +283,8 @@ h2 { box-decoration-break: clone; } -section h2 { - background: var(--volt-purple); -} - -section h2:after { - z-index: -1; - content: ''; - position: absolute; - top: 0; - right: -1000px; - bottom: 0; - width: 1000px; - - box-shadow: - calc(var(--block-width) * -9) 0 0 var(--volt-purple), - calc(var(--block-width) * -8) 0 0 var(--volt-purple), - calc(var(--block-width) * -7) 0 0 var(--volt-purple), - calc(var(--block-width) * -6) 0 0 var(--volt-purple), - calc(var(--block-width) * -5) 0 0 var(--volt-purple), - calc(var(--block-width) * -4) 0 0 var(--volt-purple), - calc(var(--block-width) * -3) 0 0 var(--volt-purple), - calc(var(--block-width) * -2) 0 0 var(--volt-purple), - calc(var(--block-width) * -1) 0 0 var(--volt-purple); - - /*box-shadow: - calc(var(--block-width) * -9) 0 0 var(--volt-purple), - calc(var(--block-width) * -8) 0 0 var(--volt-purple), - calc(var(--block-width) * -7) 0 0 var(--volt-purple), - calc(var(--block-width) * -6) 0 0 var(--volt-purple), - calc(var(--block-width) * -5) 0 0 var(--volt-purple), - calc(var(--block-width) * -4) 0 0 var(--volt-purple), - calc(var(--block-width) * -3) 0 0 var(--volt-purple), - calc(var(--block-width) * -2) 0 0 var(--volt-purple), - calc(var(--block-width) * -1) 0 0 var(--volt-purple), - calc(var(--block-width) * 1) 0 0 var(--volt-purple), - calc(var(--block-width) * 2) 0 0 var(--volt-purple), - calc(var(--block-width) * 3) 0 0 var(--volt-purple), - calc(var(--block-width) * 4) 0 0 var(--volt-purple), - calc(var(--block-width) * 5) 0 0 var(--volt-purple), - calc(var(--block-width) * 6) 0 0 var(--volt-purple), - calc(var(--block-width) * 7) 0 0 var(--volt-purple), - calc(var(--block-width) * 8) 0 0 var(--volt-purple), - calc(var(--block-width) * 9) 0 0 var(--volt-purple);*/ -} - h3 { - font-size: 1rem; + font-size: 1.25rem; cursor: text; margin: 0 0 16px 0; } @@ -439,12 +472,17 @@ label.languageChooserWrapper select { .radio_or_checkbox_label { line-height: 32px; - padding: 2px 0; + padding: 4px; + margin: 0 -4px; cursor: pointer; display: flex; flex-direction: row; } +.radio_or_checkbox_label:hover { + background-color: var(--volt-purple); + color: white; +} .radio_or_checkbox_label input[type="checkbox"], .radio_or_checkbox_label input[type="radio"] { @@ -546,7 +584,10 @@ button { color: var(--on-light-color); } -button.green { +button.green, +.page.purple_bg button, +.page.red_bg button, +.page.blue_bg button { background: var(--volt-green); color: white; } diff --git a/frontend/index.html b/frontend/index.html index c6bc186..888eb5e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -203,8 +203,8 @@
-
+

diff --git a/frontend/index.js b/frontend/index.js index 894f86d..11a07b7 100644 --- a/frontend/index.js +++ b/frontend/index.js @@ -441,6 +441,43 @@ function submitForm() { +// CONTRASTING COLORS (for the question form) + +function hexToRGBArray(color) { + if (color.startsWith('#')) { + color = color.substring(1) + } + + if (color.length === 3) { + color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2); + } else if (color.length !== 6) { + throw (new Error('Invalid hex color: ' + color)); + } + + let rgb = []; + for (var i = 0; i <= 2; i++) { + rgb[i] = parseInt(color.substr(i * 2, 2), 16); + } + + return rgb; +} + +function luma(color) { + // color can be a hex string or an array of RGB values 0-255 + const rgb = (typeof color === 'string') ? hexToRGBArray(color) : color; + return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]); // SMPTE C, Rec. 709 weightings +} + +function getContrastingColor(color) { + // source: https://stackoverflow.com/questions/635022/calculating-contrasting-colours-in-javascript + // exact answer: https://stackoverflow.com/a/6511606/2387277 + // example: https://jsfiddle.net/thomasrosen/9njo6t7s/20/ + + return (luma(color) >= 165) ? '000' : 'fff'; +} + + + // GENERATE QUESTION FORM function resetBodyClasses() { @@ -452,10 +489,17 @@ function resetBodyClasses() { function generateForm(data) { // websiteTitle.innerHTML = 'Volt — '+getByLanguage(_DATA_.translation_texts.website_title).replace(/\n+/g, ' ') + inputs.innerHTML = '' + for (const section of _DATA_.sections) { var sectionEle = document.createElement('section') + if (!!section.color) { + sectionEle.style.setProperty('--section-color', section.color) + sectionEle.style.setProperty('--on-section-color', '#'+getContrastingColor(section.color)) + } + if (!!section.heading) { var sectionHeading = document.createElement('h2') sectionHeading.innerHTML = getByLanguage(section.heading) @@ -470,6 +514,9 @@ function generateForm(data) { } + var questionsWrapperEle = document.createElement('div') + questionsWrapperEle.classList.add('questions') + // display questions for (const questionKey of Object.keys(section.questions)) { const question = section.questions[questionKey] @@ -653,9 +700,10 @@ function generateForm(data) { questionEle.appendChild(newInput) } - sectionEle.appendChild(questionEle) + questionsWrapperEle.appendChild(questionEle) } + sectionEle.appendChild(questionsWrapperEle) inputs.appendChild(sectionEle) } }