Update form style

This commit is contained in:
Edgar P. Burkhart 2023-04-18 12:15:48 +02:00
parent 6381263786
commit d0447e0c8e
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
5 changed files with 67 additions and 93 deletions

View file

@ -7,7 +7,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: 0.0.1\n" "Project-Id-Version: 0.0.1\n"
"Report-Msgid-Bugs-To: \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" "PO-Revision-Date: 2022-12-21 17:30+0100\n"
"Last-Translator: edpibu <git@edgarpierre.fr>\n" "Last-Translator: edpibu <git@edgarpierre.fr>\n"
"Language-Team: edpibu <git@edgarpierre.fr>\n" "Language-Team: edpibu <git@edgarpierre.fr>\n"
@ -188,18 +188,22 @@ msgstr "Annuler"
msgid "Confirm" msgid "Confirm"
msgstr "Confirmer" 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:11
#: .\main\templates\main\table\invoice.html:24 #: .\main\templates\main\table\invoice.html:24
#: .\main\templates\main\tag\form_buttons.html:4 #: .\main\templates\main\tag\form_buttons.html:4
msgid "Delete" msgid "Delete"
msgstr "Supprimer" 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 #: .\main\templates\main\index.html:31
msgid "History" msgid "History"
msgstr "Historique" msgstr "Historique"

View file

@ -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 { form ul.errorlist {
grid-column: 1 / -1;
color: var(--red); color: var(--red);
font-weight: 550; font-weight: 550;
list-style-type: "! "; list-style-type: "! ";
margin: 0; 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: 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; 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); margin-left: var(--gap);
border-radius: var(--radius);
padding: 0 var(--gap);
cursor: pointer;
} }
form > .buttons > *:hover { form tfoot input:hover {
text-decoration: underline; text-decoration: underline;
} }
form > .buttons input[type="submit"] { form tfoot input[type="submit"] {
border: .1rem solid var(--green);
background: var(--green-1); 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;
} }

View file

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

View file

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