Update form style

nummi/main/locale/fr/LC_MESSAGES/django.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: 0.0.1\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-04-18 11:13+0200\n"
+"POT-Creation-Date: 2023-04-18 12:10+0200\n"
 "PO-Revision-Date: 2022-12-21 17:30+0100\n"
 "Last-Translator: edpibu <git@edgarpierre.fr>\n"
 "Language-Team: edpibu <git@edgarpierre.fr>\n"
@@ -188,18 +188,22 @@ msgstr "Annuler"
 msgid "Confirm"
 msgstr "Confirmer"
 
-#: .\main\templates\main\form\base.html:17
+#: .\main\templates\main\form\base.html:27
+msgid "Reset"
+msgstr "Réinitialiser"
+
+#: .\main\templates\main\form\base.html:28
+#: .\main\templates\main\tag\form_buttons.html:8
+msgid "Save"
+msgstr "Enregistrer"
+
+#: .\main\templates\main\form\base.html:37
 #: .\main\templates\main\table\invoice.html:11
 #: .\main\templates\main\table\invoice.html:24
 #: .\main\templates\main\tag\form_buttons.html:4
 msgid "Delete"
 msgstr "Supprimer"
 
-#: .\main\templates\main\form\base.html:20
-#: .\main\templates\main\tag\form_buttons.html:8
-msgid "Save"
-msgstr "Enregistrer"
-
 #: .\main\templates\main\index.html:31
 msgid "History"
 msgstr "Historique"

nummi/main/static/main/css/form.css

@@ -1,92 +1,43 @@
-form {
-	display: grid;
-	grid-template-columns: auto 1fr;
-	grid-gap: var(--gap);
-	margin: var(--gap) 0;
-	line-height: 2rem;
-}
-
 form ul.errorlist {
-	grid-column: 1 / -1;
 	color: var(--red);
 	font-weight: 550;
 	list-style-type: "! ";
 	margin: 0;
 }
 
-form input,
+form tbody input,
-form select,
+form tbody select,
-form a {
+form tbody textarea {
-	padding: 0 var(--gap);
+	font: inherit;
-}
-form textarea {
-	padding: var(--gap);
-}
-
-form input {
-	color: inherit;
-}
-
-form > label,
-form > div > input[type="text"],
-form > div > input[type="number"],
-form > div > input[type="password"],
-form > div > input[type="file"],
-form > div > select,
-form > div > textarea,
-form > div > select {
-	font-size: inherit;
-	line-height: inherit;
-	font-family: inherit;
-	/*height: 100%;*/
-	width: 100%;
-}
-form > div > select {
-	height: 100%;
-}
-form > div > textarea {
-	line-height: initial;
-}
-form > div > input[type="text"],
-form > div > input[type="number"],
-form > div > input[type="password"],
-form > div > input[type="file"],
-form > div > textarea,
-form > div > select {
 	border: none;
-	border-radius: var(--radius);
+	background: var(--bg);
-	background: var(--bg-01);
+	width: 100%;
+	height: 100%;
+	line-height: 1.5;
 }
 
-form > .buttons {
+form tfoot {
-	grid-column: 1 / -1;
 	text-align: right;
 }
-form > .buttons > * {
+form tfoot input {
-	font-size: inherit;
+	font: inherit;
-	line-height: inherit;
+	line-height: 1.5;
-	font-family: inherit;
-	border: 0;
-	background: var(--bg-01);
-	cursor: pointer;
-	border-radius: var(--radius);
-	display: inline-block;
-}
-form > .buttons > * {
 	margin-left: var(--gap);
+	border-radius: var(--radius);
+	padding: 0 var(--gap);
+	cursor: pointer;
 }
-form > .buttons > *:hover {
+form tfoot input:hover {
 	text-decoration: underline;
 }
-form > .buttons input[type="submit"] {
+form tfoot input[type="submit"] {
+	border: .1rem solid var(--green);
 	background: var(--green-1);
 }
-form > .buttons a.del,
+form tfoot input[type="reset"] {
-form > .buttons input.del {
+	border: .1rem solid var(--red);
-	background: var(--red);
+	background: var(--red-1);
-	color: var(--text-inv);
 }
-
+form tfoot a.del {
-form input[hidden] {
+	color: var(--red);
-	display: none;
 }

nummi/main/templates/main/form/base.html

@@ -5,18 +5,34 @@
             {% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
         </ul>
     {% endif %}
-    {% for field in form %}
+    <table>
-        {{ field.errors }}
+        <tbody>
-        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+            {% for field in form %}
-        <div>{{ field }}</div>
+                {% if field.errors %}
-    {% endfor %}
+                    <tr>
-{% endblock %}
+                        <td colspan="2">{{ field.errors }}</td>
-{% block buttons %}
+                    </tr>
-    <div class="buttons">
+                {% endif %}
-        {% if not form.instance.adding %}
+                <tr>
-            <a class="btn del" href="{{ form.instance.get_delete_url }}">{% translate "Delete" %}</a>
+                    <th class="l">
-        {% endif %}
+                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
-        <input type="reset" />
+                    </th>
-        <input type="submit" value="{% translate 'Save' %}" />
+                    <td>{{ field }}</td>
-    </div>
+                </tr>
+            {% endfor %}
+        </tbody>
+        <tfoot>
+            <tr>
+                <td colspan="2">
+                    {% block buttons %}
+                        {% if not form.instance.adding %}
+                            <a class="del" href="{{ form.instance.get_delete_url }}">{% translate "Delete" %}</a>
+                        {% endif %}
+                        <input type="reset" value="{% translate "Reset" %}" />
+                        <input type="submit" value="{% translate "Save" %}" />
+                    {% endblock %}
+                </td>
+            </tr>
+        </tfoot>
+    </table>
 {% endblock %}

nummi/main/templates/main/search.html

@@ -10,6 +10,9 @@
     <link rel="stylesheet"
           href="{% static 'main/css/form.css' %}"
           type="text/css"/>
+    <link rel="stylesheet"
+          href="{% static 'main/css/table.css' %}"
+          type="text/css"/>
 {% endblock %}
 {% block body %}
     <h1>{% translate "Search" %}</h1>