From 0d7aa796cefdba9f2d3fe7428b7ad5aaa440504b Mon Sep 17 00:00:00 2001
From: codevictory <main@codevictory.net>
Date: Wed, 19 May 2021 00:24:30 +0300
Subject: [PATCH] Privacy statement specific styling and template.

---
 assets/css/pages/form.scss                        | 13 +++++++++++++
 lib/runosaari_web/templates/visitor/form.html.eex | 14 ++++++++++----
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/assets/css/pages/form.scss b/assets/css/pages/form.scss
index 2d64e29..8896eb9 100644
--- a/assets/css/pages/form.scss
+++ b/assets/css/pages/form.scss
@@ -1,12 +1,19 @@
 form {
   display: flex;
   flex-direction: column;
+  max-width: 50%;
 
   .checkbox-container {
     display: flex;
 
     label {
       text-align: left;
+      padding-left: 5px;
+    }
+
+    &.consent-checkbox {
+      font-style: italic;
+      padding-top: 30px;
     }
   }
 
@@ -49,3 +56,9 @@ form {
     margin-top: 30px;
   }
 }
+
+@media screen and (max-width: 600px) {
+  form {
+    max-width: 100%;
+  }
+}
diff --git a/lib/runosaari_web/templates/visitor/form.html.eex b/lib/runosaari_web/templates/visitor/form.html.eex
index 49185f7..038a7be 100644
--- a/lib/runosaari_web/templates/visitor/form.html.eex
+++ b/lib/runosaari_web/templates/visitor/form.html.eex
@@ -48,9 +48,15 @@
     <%= label form, :accom, "Olen kiinnostunut majoituksesta" %>
   </div>
 
-  <i>Käsittelemme lomakkeen henkilötietoja<br /><a class="generic-link" href="/privacy">rekisteri- ja tietosuojaselosteessamme</a><br />määritellyllä tavoin.</i>
-
-  <div class="submit-button">
-    <%= submit "Tallenna lomakkeen tiedot osallistuaksesi tapahtumaan" %>
+  <div class="checkbox-container consent-checkbox">
+    <input type="checkbox" required="true" id="privacy-consent" />
+    <label for="privacy-consent">
+      Olen lukenut ja hyväksyn yhteystietojeni käsittelyn
+      <a class="generic-link" href="/privacy">rekisteri- ja tietosuojaselosteessamme</a>
+      määritellyin tavoin.
+    </label>
+  </div>
+  <div div class="submit-button">
+    <%= submit "Lähetä" %>
   </div>
 <% end %>