mirror of
https://github.com/voltbonn/diversity.volt.link.git
synced 2024-06-28 17:00:55 +00:00
commit
14aa7a8829
|
@ -136,6 +136,11 @@ const _DATA_ = {
|
||||||
en: 'To the questions',
|
en: 'To the questions',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
questions_heading: {
|
||||||
|
de: 'Fragen',
|
||||||
|
en: 'Questions',
|
||||||
|
},
|
||||||
|
|
||||||
button_send_to_volt: {
|
button_send_to_volt: {
|
||||||
de: 'An Volt senden',
|
de: 'An Volt senden',
|
||||||
en: 'Send to Volt',
|
en: 'Send to Volt',
|
||||||
|
@ -161,6 +166,7 @@ const _DATA_ = {
|
||||||
},
|
},
|
||||||
sections: [
|
sections: [
|
||||||
{
|
{
|
||||||
|
color: '#502379',
|
||||||
heading: {
|
heading: {
|
||||||
de: 'Bildung',
|
de: 'Bildung',
|
||||||
en: 'Education',
|
en: 'Education',
|
||||||
|
@ -210,6 +216,7 @@ const _DATA_ = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
color: '#FDC220',
|
||||||
heading: { de: 'Kultur' },
|
heading: { de: 'Kultur' },
|
||||||
questions: {
|
questions: {
|
||||||
amount_of_kown_languages: {
|
amount_of_kown_languages: {
|
||||||
|
@ -243,6 +250,7 @@ const _DATA_ = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
color: '#E63E12',
|
||||||
heading: { de: 'Diskriminierung' },
|
heading: { de: 'Diskriminierung' },
|
||||||
questions: {
|
questions: {
|
||||||
discriminatory_experiences: {
|
discriminatory_experiences: {
|
||||||
|
@ -307,6 +315,7 @@ const _DATA_ = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
color: '#1BBE6F',
|
||||||
heading: { de: 'LGBTQ*' },
|
heading: { de: 'LGBTQ*' },
|
||||||
questions: {
|
questions: {
|
||||||
gender: {
|
gender: {
|
||||||
|
@ -351,6 +360,7 @@ const _DATA_ = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
color: '#82D0F4',
|
||||||
heading: { de: 'Psyche' },
|
heading: { de: 'Psyche' },
|
||||||
questions: {
|
questions: {
|
||||||
psychological_difficulties: {
|
psychological_difficulties: {
|
||||||
|
@ -405,6 +415,7 @@ const _DATA_ = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
color: '#502379',
|
||||||
heading: { de: 'Hilfsmittel' },
|
heading: { de: 'Hilfsmittel' },
|
||||||
questions: {
|
questions: {
|
||||||
everyday_aids: {
|
everyday_aids: {
|
||||||
|
@ -442,6 +453,7 @@ const _DATA_ = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
color: '#502379',
|
||||||
heading: { de: 'Verbesserung der Umfrage' },
|
heading: { de: 'Verbesserung der Umfrage' },
|
||||||
intro: { de: 'Die ist unsere erste Umfrage dieser Art. Hier kannst du uns helfen diese weiter zu entwickeln …' },
|
intro: { de: 'Die ist unsere erste Umfrage dieser Art. Hier kannst du uns helfen diese weiter zu entwickeln …' },
|
||||||
questions: {
|
questions: {
|
||||||
|
|
|
@ -93,7 +93,7 @@ a:hover {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page.violet_bg {
|
.page.purple_bg {
|
||||||
color: white;
|
color: white;
|
||||||
background: var(--volt-purple);
|
background: var(--volt-purple);
|
||||||
}
|
}
|
||||||
|
@ -108,107 +108,41 @@ a:hover {
|
||||||
background: var(--volt-blue);
|
background: var(--volt-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page.white_bg {
|
||||||
|
color: var(--volt-purple);
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
.page .pageContent {
|
.page .pageContent {
|
||||||
width: var(--page-width);
|
width: var(--page-width);
|
||||||
max-width: calc(100% - 64px);
|
max-width: calc(100% - 64px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 64px 0;
|
padding: 64px 0;
|
||||||
}
|
}
|
||||||
|
.page .pageContent.question_page {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 64px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin: 128px 0 32px 0;
|
background: var(--section-color);
|
||||||
|
color: var(--on-section-color);
|
||||||
|
margin: 0 -32px;
|
||||||
|
padding: 128px 32px 32px 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
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);*/
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
.question {
|
|
||||||
margin: 32px 0 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.voltLogo {
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
color: var(--volt-purple) !important;
|
|
||||||
margin-top: 32px;
|
|
||||||
|
|
||||||
transition: top 0.2s ease, margin-bottom 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.website_heading {
|
|
||||||
margin-top: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.website_description {
|
|
||||||
/* margin-top: 16px; */
|
|
||||||
|
|
||||||
transition: margin-top 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
.website_heading {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 4rem;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
color: var(--on-light-color);
|
|
||||||
|
|
||||||
transition: font-size 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page.violet_bg h1,
|
|
||||||
.page.red_bg h1,
|
|
||||||
.page.blue_bg h1 {
|
|
||||||
color: var(--on-dark-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
font-size: 2rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
|
|
||||||
padding: 16px 32px;
|
|
||||||
margin: 0 -32px -16px -32px;
|
|
||||||
|
|
||||||
-webkit-box-decoration-break: clone;
|
|
||||||
box-decoration-break: clone;
|
|
||||||
}
|
|
||||||
|
|
||||||
section h2 {
|
section h2 {
|
||||||
background: var(--volt-purple);
|
/* background: white; */
|
||||||
|
/* color: var(--volt-purple); */
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
section h2:after {
|
section h2:after {
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
content: '';
|
content: '';
|
||||||
|
@ -249,9 +183,108 @@ section h2:after {
|
||||||
calc(var(--block-width) * 8) 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);*/
|
calc(var(--block-width) * 9) 0 0 var(--volt-purple);*/
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
section .intro {
|
||||||
|
width: 500px;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 64px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.question {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 32px;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
color: var(--volt-purple);
|
||||||
|
}
|
||||||
|
.question h3 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voltLogo {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
color: var(--volt-purple) !important;
|
||||||
|
margin-top: 32px;
|
||||||
|
|
||||||
|
transition: top 0.2s ease, margin-bottom 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.website_heading {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.website_description {
|
||||||
|
/* margin-top: 16px; */
|
||||||
|
|
||||||
|
transition: margin-top 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.website_heading {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 4rem;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
color: var(--on-light-color);
|
||||||
|
|
||||||
|
transition: font-size 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page.purple_bg h1,
|
||||||
|
.page.red_bg h1,
|
||||||
|
.page.blue_bg h1 {
|
||||||
|
color: var(--on-dark-color);
|
||||||
|
}
|
||||||
|
.page.white_bg h1 {
|
||||||
|
color: var(--volt-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
|
||||||
|
padding: 16px 32px;
|
||||||
|
margin: 0 -32px -16px -32px;
|
||||||
|
|
||||||
|
-webkit-box-decoration-break: clone;
|
||||||
|
box-decoration-break: clone;
|
||||||
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1rem;
|
font-size: 1.25rem;
|
||||||
cursor: text;
|
cursor: text;
|
||||||
margin: 0 0 16px 0;
|
margin: 0 0 16px 0;
|
||||||
}
|
}
|
||||||
|
@ -439,12 +472,17 @@ label.languageChooserWrapper select {
|
||||||
|
|
||||||
.radio_or_checkbox_label {
|
.radio_or_checkbox_label {
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
padding: 2px 0;
|
padding: 4px;
|
||||||
|
margin: 0 -4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
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="checkbox"],
|
||||||
.radio_or_checkbox_label input[type="radio"] {
|
.radio_or_checkbox_label input[type="radio"] {
|
||||||
|
@ -535,7 +573,7 @@ button {
|
||||||
transition: opacity 0.2s ease;
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page.violet_bg button {
|
.page.purple_bg button {
|
||||||
background: var(--light-color);
|
background: var(--light-color);
|
||||||
color: var(--volt-purple);
|
color: var(--volt-purple);
|
||||||
}
|
}
|
||||||
|
@ -546,7 +584,10 @@ button {
|
||||||
color: var(--on-light-color);
|
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);
|
background: var(--volt-green);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
|
@ -53,7 +53,7 @@
|
||||||
|
|
||||||
<body show="intro">
|
<body show="intro">
|
||||||
|
|
||||||
<div class="page violet_bg" page="intro">
|
<div class="page purple_bg" page="intro">
|
||||||
<div class="pageContent" style="padding-top:0;">
|
<div class="pageContent" style="padding-top:0;">
|
||||||
<h1 class="voltLogo">
|
<h1 class="voltLogo">
|
||||||
<svg style="width:120px;" version="1.1" viewBox="0 0 10433 4346.4" xml:space="preserve"
|
<svg style="width:120px;" version="1.1" viewBox="0 0 10433 4346.4" xml:space="preserve"
|
||||||
|
@ -203,8 +203,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="page white_bg" page="questions">
|
<div class="page purple_bg" page="questions">
|
||||||
<div class="pageContent" style="padding-top:0;">
|
<div class="pageContent question_page">
|
||||||
|
<h1 class="website_heading" data-translation-key="questions_heading"></h1>
|
||||||
|
|
||||||
<div id="inputs"></div>
|
<div id="inputs"></div>
|
||||||
|
|
||||||
|
|
|
@ -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
|
// GENERATE QUESTION FORM
|
||||||
|
|
||||||
function resetBodyClasses() {
|
function resetBodyClasses() {
|
||||||
|
@ -452,10 +489,17 @@ function resetBodyClasses() {
|
||||||
function generateForm(data) {
|
function generateForm(data) {
|
||||||
// websiteTitle.innerHTML = 'Volt — '+getByLanguage(_DATA_.translation_texts.website_title).replace(/\n+/g, ' ')
|
// websiteTitle.innerHTML = 'Volt — '+getByLanguage(_DATA_.translation_texts.website_title).replace(/\n+/g, ' ')
|
||||||
|
|
||||||
|
inputs.innerHTML = ''
|
||||||
|
|
||||||
for (const section of _DATA_.sections) {
|
for (const section of _DATA_.sections) {
|
||||||
|
|
||||||
var sectionEle = document.createElement('section')
|
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) {
|
if (!!section.heading) {
|
||||||
var sectionHeading = document.createElement('h2')
|
var sectionHeading = document.createElement('h2')
|
||||||
sectionHeading.innerHTML = getByLanguage(section.heading)
|
sectionHeading.innerHTML = getByLanguage(section.heading)
|
||||||
|
@ -470,6 +514,9 @@ function generateForm(data) {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var questionsWrapperEle = document.createElement('div')
|
||||||
|
questionsWrapperEle.classList.add('questions')
|
||||||
|
|
||||||
// display questions
|
// display questions
|
||||||
for (const questionKey of Object.keys(section.questions)) {
|
for (const questionKey of Object.keys(section.questions)) {
|
||||||
const question = section.questions[questionKey]
|
const question = section.questions[questionKey]
|
||||||
|
@ -653,9 +700,10 @@ function generateForm(data) {
|
||||||
questionEle.appendChild(newInput)
|
questionEle.appendChild(newInput)
|
||||||
}
|
}
|
||||||
|
|
||||||
sectionEle.appendChild(questionEle)
|
questionsWrapperEle.appendChild(questionEle)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
sectionEle.appendChild(questionsWrapperEle)
|
||||||
inputs.appendChild(sectionEle)
|
inputs.appendChild(sectionEle)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue