Forms look better on small screens
This commit is contained in:
parent
c77b79e3ec
commit
b8491f96c7
3 changed files with 24 additions and 19 deletions
|
@ -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"] {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 %}
|
</div>
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
Loading…
Reference in a new issue