Forms look better on small screens

This commit is contained in:
Martin Pépin 2020-09-08 21:03:46 +02:00
parent c77b79e3ec
commit b8491f96c7
No known key found for this signature in database
GPG key ID: E7520278B1774448
3 changed files with 24 additions and 19 deletions

View file

@ -105,19 +105,26 @@ html, body {
.auth_form {
width: 100%;
padding: 0.5em;
font-size: 1.5em;
}
.auth_form table {
margin: 20px auto;
.auth_form_wrapper {
margin: 1.5em auto;
width: 90%;
border-spacing: 0.3em;
text-align: left;
}
.auth_form th {
label {
width: 100%;
padding: 10px 0;
vertical-align: text-top;
text-align: right;
}
.auth_form_field {
margin-bottom: 0.5em;
margin-top: 0.2em;
width: 100%;
}
ul.errorlist {
@ -131,10 +138,10 @@ input {
}
input[type="text"], input[type="password"], input[type="email"] {
margin: 0;
border: 0;
padding: 5px;
width: 100%;
max-width: 390px;
padding: 1%;
width: 98%;
}
input[type="submit"] {

View file

@ -1,4 +1,4 @@
<tr>
<th>{{ field.label_tag }}</th>
<td>{{ field }} {{ field.errors }}</td>
</tr>
<div>
{{ field.label_tag }}
<div class="auth_form_field">{{ field }} {{ field.errors }}</div>
</div>

View file

@ -1,7 +1,5 @@
<table>
<tbody>
{% for field in form %}
{% include 'authens/form_field_snippet.html' with field=field %}
{% endfor %}
</tbody>
</table>
<div class="auth_form_wrapper">
{% for field in form %}
{% include 'authens/form_field_snippet.html' with field=field %}
{% endfor %}
</div>