tietokonepaja/runosaari.net
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Form styling improved.

Browse Source
This commit is contained in:
codevictory
2021-05-04 22:38:34 +03:00
parent 9540166bfc
commit 6de4732dcc
2 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/css/pages/form.scss
View File

@@ -7,6 +7,26 @@ form {
display: flex; 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 { input {
margin-bottom: 10px; margin-bottom: 10px;
} }
@@ -16,3 +36,8 @@ input {
justify-content: center; justify-content: center;
padding-bottom: 50px; padding-bottom: 50px;
} }
.submit-button {
padding-top: 31px;
padding-bottom: 31px;
}

35
lib/runosaari_web/templates/visitor/form.html.eex
View File

@@ -5,51 +5,50 @@
</div> </div>
<% end %> <% end %>
<%= label form, :fname, "Etunimi" %> <div class="text-input">
<%= text_input form, :fname %> <%= label form, :fname, "Etunimi:" %>
<%= error_tag form, :fname %> <%= text_input form, :fname %>
</div>
<%= label form, :lname, "Sukunimi" %> <div class="text-input">
<%= text_input form, :lname %> <%= label form, :lname, "Sukunimi:" %>
<%= error_tag form, :lname %> <%= text_input form, :lname %>
</div>
<%= label form, :email, "Sähköposti" %> <div class="text-input">
<%= email_input form, :email %> <%= label form, :email, "Sähköposti:" %>
<%= error_tag form, :email %> <%= email_input form, :email %>
</div>
<%= label form, :tel, "Puhelinumero" %> <div class="text-input">
<%= text_input form, :tel %> <%= label form, :tel, "Puhelinumero:" %>
<%= error_tag form, :tel %> <%= text_input form, :tel %>
</div>
<h2>Ilmoita alustava kiinnostuksesi tässä</h2> <h2>Ilmoita alustava kiinnostuksesi tässä</h2>
<div class="checkbox-container"> <div class="checkbox-container">
<%= checkbox form, :date1 %> <%= checkbox form, :date1 %>
<%= label form, :date1, "Torstai 22.7" %> <%= label form, :date1, "Torstai 22.7" %>
<%= error_tag form, :date1 %>
</div> </div>
<div class="checkbox-container"> <div class="checkbox-container">
<%= checkbox form, :date2 %> <%= checkbox form, :date2 %>
<%= label form, :date2, "Perjantai 23.7." %> <%= label form, :date2, "Perjantai 23.7." %>
<%= error_tag form, :date2 %>
</div> </div>
<div class="checkbox-container"> <div class="checkbox-container">
<%= checkbox form, :date3 %> <%= checkbox form, :date3 %>
<%= label form, :date3, "Lauantai 24.7." %> <%= label form, :date3, "Lauantai 24.7." %>
<%= error_tag form, :date3 %>
</div> </div>
<div class="checkbox-container"> <div class="checkbox-container">
<%= checkbox form, :bus %> <%= checkbox form, :bus %>
<%= label form, :bus, "Olen kiinnostunut bussikuljetuksesta" %> <%= label form, :bus, "Olen kiinnostunut bussikuljetuksesta" %>
<%= error_tag form, :bus %>
</div> </div>
<div class="checkbox-container"> <div class="checkbox-container">
<%= checkbox form, :accom %> <%= checkbox form, :accom %>
<%= label form, :accom, "Olen kiinnostunut majoituksesta" %> <%= label form, :accom, "Olen kiinnostunut majoituksesta" %>
<%= error_tag form, :accom %>
</div> </div>
<div> <div class="submit-button">
<%= submit "Lähetä" %> <%= submit "Lähetä" %>
</div> </div>
<% end %> <% end %>