From 6de4732dcc52dc47610b457f3018a4cf578fe74b Mon Sep 17 00:00:00 2001
From: codevictory <main@codevictory.net>
Date: Tue, 4 May 2021 22:38:34 +0300
Subject: [PATCH] Form styling improved.

---
 assets/css/pages/form.scss                    | 25 +++++++++++++
 .../templates/visitor/form.html.eex           | 35 +++++++++----------
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/assets/css/pages/form.scss b/assets/css/pages/form.scss
index 14e8b33..02632e1 100644
--- a/assets/css/pages/form.scss
+++ b/assets/css/pages/form.scss
@@ -7,6 +7,26 @@ form {
   display: flex;
 }
 
+.text-input {
+  display: flex;
+  align-items: center;
+
+  label {
+    width: 29%;
+    text-align: left;
+  }
+
+  input {
+    width: 71%;
+  }
+
+  @media screen and (max-width: 600px) {
+    label {
+      width: 47%;
+    }
+  }
+}
+
 input {
   margin-bottom: 10px;
 }
@@ -16,3 +36,8 @@ input {
   justify-content: center;
   padding-bottom: 50px;
 }
+
+.submit-button {
+  padding-top: 31px;
+  padding-bottom: 31px;
+}
diff --git a/lib/runosaari_web/templates/visitor/form.html.eex b/lib/runosaari_web/templates/visitor/form.html.eex
index 9a15edb..16b700c 100644
--- a/lib/runosaari_web/templates/visitor/form.html.eex
+++ b/lib/runosaari_web/templates/visitor/form.html.eex
@@ -5,51 +5,50 @@
     </div>
   <% end %>
 
-  <%= label form, :fname, "Etunimi" %>
-  <%= text_input form, :fname %>
-  <%= error_tag form, :fname %>
+  <div class="text-input">
+    <%= label form, :fname, "Etunimi:" %>
+    <%= text_input form, :fname %>
+  </div>
 
-  <%= label form, :lname, "Sukunimi" %>
-  <%= text_input form, :lname %>
-  <%= error_tag form, :lname %>
+  <div class="text-input">
+    <%= label form, :lname, "Sukunimi:" %>
+    <%= text_input form, :lname %>
+  </div>
 
-  <%= label form, :email, "Sähköposti" %>
-  <%= email_input form, :email %>
-  <%= error_tag form, :email %>
+  <div class="text-input">
+    <%= label form, :email, "Sähköposti:" %>
+    <%= email_input form, :email %>
+  </div>
 
-  <%= label form, :tel, "Puhelinumero" %>
-  <%= text_input form, :tel %>
-  <%= error_tag form, :tel %>
+  <div class="text-input">
+    <%= label form, :tel, "Puhelinumero:" %>
+    <%= text_input form, :tel %>
+  </div>
 
   <h2>Ilmoita alustava kiinnostuksesi tässä</h2>
 
   <div class="checkbox-container">
     <%= checkbox form, :date1 %>
     <%= label form, :date1, "Torstai 22.7" %>
-    <%= error_tag form, :date1 %>
   </div>
   <div class="checkbox-container">
     <%= checkbox form, :date2 %>
     <%= label form, :date2, "Perjantai 23.7." %>
-    <%= error_tag form, :date2 %>
   </div>
   <div class="checkbox-container">
     <%= checkbox form, :date3 %>
     <%= label form, :date3, "Lauantai 24.7." %>
-    <%= error_tag form, :date3 %>
   </div>
   <div class="checkbox-container">
     <%= checkbox form, :bus %>
     <%= label form, :bus, "Olen kiinnostunut bussikuljetuksesta" %>
-    <%= error_tag form, :bus %>
   </div>
   <div class="checkbox-container">
     <%= checkbox form, :accom %>
     <%= label form, :accom, "Olen kiinnostunut majoituksesta" %>
-    <%= error_tag form, :accom %>
   </div>
 
-  <div>
+  <div class="submit-button">
     <%= submit "Lähetä" %>
   </div>
 <% end %>