From b8491f96c748876d57813ac23af8bf9ebb2208fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20P=C3=A9pin?= <kerl@wkerl.me>
Date: Tue, 8 Sep 2020 21:03:46 +0200
Subject: [PATCH] Forms look better on small screens

---
 authens/static/authens/css/authens.css        | 23 ++++++++++++-------
 .../templates/authens/form_field_snippet.html |  8 +++----
 authens/templates/authens/form_snippet.html   | 12 ++++------
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/authens/static/authens/css/authens.css b/authens/static/authens/css/authens.css
index b2c1d14..5c4fe75 100644
--- a/authens/static/authens/css/authens.css
+++ b/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"] {
diff --git a/authens/templates/authens/form_field_snippet.html b/authens/templates/authens/form_field_snippet.html
index 08a3bb0..f29ea62 100644
--- a/authens/templates/authens/form_field_snippet.html
+++ b/authens/templates/authens/form_field_snippet.html
@@ -1,4 +1,4 @@
-<tr>
-  <th>{{ field.label_tag }}</th>
-  <td>{{ field }} {{ field.errors }}</td>
-</tr>
\ No newline at end of file
+<div>
+  {{ field.label_tag }}
+  <div class="auth_form_field">{{ field }} {{ field.errors }}</div>
+</div>
diff --git a/authens/templates/authens/form_snippet.html b/authens/templates/authens/form_snippet.html
index c5ea640..ef12e5c 100644
--- a/authens/templates/authens/form_snippet.html
+++ b/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>
\ No newline at end of file
+<div class="auth_form_wrapper">
+  {% for field in form %}
+    {% include 'authens/form_field_snippet.html' with field=field %}
+  {% endfor %}
+</div>