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

View file

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

View file

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