mirror of
https://github.com/voltbonn/diversity.volt.link.git
synced 2024-06-06 12:05:00 +00:00
other layout and a different color for each section
This commit is contained in:
thomasrosen
parent
77dfe63551
commit
d463eabc22
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -203,8 +203,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pageContent" style="padding-top:0;">
|
||||
<div class="page purple_bg" page="questions">
|
||||
<div class="pageContent question_page">
|
||||
<h1 class="website_heading" data-translation-key="questions_heading"></h1>
|
||||
|
||||
<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
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue