Merge branch 'kerl/more_responsive_form' into 'master'

Le formulaire login/mot de passe rend mieux sur petit écran

See merge request klub-dev-ens/authens!21

authens/static/authens/css/authens.css

@@ -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"] {

authens/templates/authens/form_field_snippet.html

@@ -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>

authens/templates/authens/form_snippet.html

@@ -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>