From f5098ce05cad65a56dffcaff8ad421968b7e5529 Mon Sep 17 00:00:00 2001 From: thomasrosen Date: Sun, 20 Nov 2022 15:27:44 +0100 Subject: [PATCH] started metadata page --- frontend/_DATA_.js | 50 +++++++++++++---------------- frontend/index.css | 78 ++++++++++++++++++++++++++++++++++++++++----- frontend/index.html | 58 ++++++++++++++++++++++++++------- frontend/index.js | 11 +++++-- 4 files changed, 147 insertions(+), 50 deletions(-) diff --git a/frontend/_DATA_.js b/frontend/_DATA_.js index e1e19e0..90c2002 100644 --- a/frontend/_DATA_.js +++ b/frontend/_DATA_.js @@ -27,7 +27,7 @@ const _DATA_ = { `, }, //website_privacy: {de:` - // Da uns Privatsphäre wichtig ist, werden die Antworten jeweils zur Frage gruppiert gespeichert, sodass die hier eingegebenen Daten nicht auf dich zurückführbar sind. + // Da uns Privatsphäre wichtig ist, werden die Antworten jeweils zur Frage gruppiert gespeichert, sodass die hier eingegebenen Daten nicht auf dich zurückführbar sind. // // Zu den einzelnen Datensätzen werden nur die im folgenden Kasten genannten Metadaten gespeichert. // @@ -90,15 +90,32 @@ const _DATA_ = { If you have any questions about this survey, please contact thomas.rosen@volteuropa.org. `, }, + button_to_metadata: { + de: 'Teams und Metadaten auswählen', + en: 'Select teams and metadata', + }, + + metadata_heading: { + de: 'Metadaten', + en: 'Metadata', + }, + metadata_description: { + de: `Hier kannst du auswählen zu welchen Teams deine Antworten zählen sollen. Du kannst mehrere Local-Teams auswählen. + + Die Daten werden zu jedem Team einzeln gespeichert. So können die Daten weniger auf dich zurückgeführt werden. + + Die Daten werden automatisch auch zu den übergeordnten Teams gespeichert. Zum Beispiel werden die Daten zu den Local-Teams auch zu den Regional- und Nationalen-Teams und zu Volt Europa gespeichert.`, + en: `Here you can select which teams your answers should count for. You can select multiple local teams. + + The data will be saved separately for each team. This way the data can be less attributed to you. + + The data will automatically also be saved for the higher-level teams. For example, the data for the local teams will also be saved for the regional- and national-teams and Volt Europe.`, + }, button_to_questions: { de: 'Zu den Fragen', en: 'To the questions', }, - metadata_is_this_the_first_completion: { - de: 'Nimmst du das erste Mal an der Umfrage teil?', - en: 'Is this your first time participating in the survey?', - }, button_send_to_volt: { de: 'An Volt senden', en: 'Send to Volt', @@ -123,29 +140,6 @@ const _DATA_ = { }, }, sections: [ - { - heading: { - de: 'Metadaten', - en: 'Metadata', - }, - questions: { - metadata_country: { - question: { - de: 'Dein Land', - en: 'Your country', - }, - type: 'chooser', - options: {}, - }, - metadata_city: { - question: { - de: 'Dein Städteteam', - en: 'Your cityteam', - }, - type: 'one_line_text', - }, - } - }, { heading: { de: 'Bildung', diff --git a/frontend/index.css b/frontend/index.css index d23e159..f4106eb 100644 --- a/frontend/index.css +++ b/frontend/index.css @@ -8,7 +8,7 @@ --volt-purple: #502379; --volt-yellow: #FDC220; --volt-red: #E63E12; - --volt-blur: #82D0F4; + --volt-blue: #82D0F4; --volt-green: #1BBE6F; --page-width: 800px; @@ -78,9 +78,9 @@ a:hover { .block_wrapper, .block_left, .block_right { -display: block; -width: 100%; -margin: 0; + display: block; + width: 100%; + margin: 0; } } @@ -112,11 +112,16 @@ margin: 0; background: var(--volt-purple); } -.page.orange_bg { +.page.red_bg { color: black; background: var(--volt-red); } +.page.blue_bg { + color: black; + background: var(--volt-blue); +} + .page .pageContent { width: var(--page-width); max-width: calc(100% - 64px); @@ -188,7 +193,8 @@ h1 { } .page.violet_bg h1, -.page.orange_bg h1 { +.page.red_bg h1, +.page.blue_bg h1 { color: var(--on-dark-color); } @@ -300,7 +306,7 @@ p { color: var(--on-light-color); } -.markedText.black_on_orange { +.markedText.black_on_red { background-color: var(--volt-red); color: var(--on-light-color); } @@ -546,7 +552,8 @@ button { color: var(--volt-purple); } -.page.orange_bg button { +.page.red_bg button, +.page.blue_bg button { background: var(--light-color); color: var(--on-light-color); } @@ -673,9 +680,64 @@ body.success .submitWrapper { } }*/ +.chip { + position: relative; + background: white; + padding: 10px 20px; + border-radius: 100px; + display: inline-block; + margin: 5px 0 0 0; +} +.chip.add, +.chip.remove { + padding-right: 40px; + cursor: pointer; +} +.chip.add::after, +.chip.remove::after { + content: '+'; + color: var(--volt-green); + font-size: 2rem; + font-weight: 100; + display: block; + position: absolute; + top: -5px; + right: 10px; +} +.chip.add::before, +.chip.remove::before { + content: ''; + background: var(--volt-green); + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: 100px; + opacity: 0; +} +.chip.remove:hover::before { + background: var(--volt-red); +} +.chip.add:hover::before, +.chip.remove:hover::before { + opacity: 0.1; +} +.chip.remove::after { + content: '+'; + transform: rotateZ(45deg); + color: var(--volt-red); +} +.chip.automatic { + opacity: 0.6; + cursor: not-allowed; +} + body[show=""] .page[page="intro"], body[show="intro"] .page[page="intro"], body[show="privacy"] .page[page="privacy"], +body[show="metadata"] .page[page="metadata"], body[show="questions"] .page[page="questions"] { display: block; } diff --git a/frontend/index.html b/frontend/index.html index 93d5770..71eef10 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -35,7 +35,6 @@ - @@ -105,7 +104,7 @@ -
+

@@ -121,11 +120,52 @@

-

+ +
+ + +
+
+

+ +
+
+

+
+
+ + +
+
Bonn
+
Berlin
+
+ +
+ +
+
Bonn
+
Berlin
+
+
+
Bonn
+
Berlin
+
+ +
+
+
@@ -139,14 +179,7 @@
- - - +

@@ -155,6 +188,7 @@
- + + diff --git a/frontend/index.js b/frontend/index.js index b251b65..51833ed 100644 --- a/frontend/index.js +++ b/frontend/index.js @@ -15,7 +15,14 @@ console.info('%c \n Be yourself! \n\n', ` 7px 7px #3e0099, 8px 8px #8f008f; `) - + +const teams = [] +const teams_selected = [] +const teams_selected_automatically = [] + + + + const CloudFunctionsPrefix = 'https://us-central1-volt-4eca0.cloudfunctions.net/save_formdata' @@ -569,7 +576,7 @@ const buttons_to_page = document.querySelectorAll('button[to-page]') for (const button of buttons_to_page) { button.addEventListener('click', () => { const toPage = button.getAttribute('to-page') - if (!['', 'intro', 'privacy', 'questions'].includes(toPage)) { + if (!['', 'intro', 'privacy', 'metadata', 'questions'].includes(toPage)) { toPage = '' } body.setAttribute('show', toPage)