Update form buttons for accessibility & nojs behavior

This commit is contained in:
Edgar P. Burkhart 2022-05-30 15:04:30 +02:00
parent f21e2a1b2e
commit 984dadf7e6
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
2 changed files with 13 additions and 9 deletions

View file

@ -16,7 +16,8 @@ form ul.errorlist {
form input, form input,
form select, form select,
form textarea { form textarea,
form a {
padding: 0 var(--gap); padding: 0 var(--gap);
} }
@ -44,7 +45,7 @@ form > .buttons {
grid-column: 1 / -1; grid-column: 1 / -1;
text-align: right; text-align: right;
} }
form > .buttons input, form > .buttons > *,
form select, form select,
form input[type="file"] { form input[type="file"] {
font-size: inherit; font-size: inherit;
@ -54,11 +55,12 @@ form input[type="file"] {
background: var(--bg-01); background: var(--bg-01);
cursor: pointer; cursor: pointer;
border-radius: var(--radius); border-radius: var(--radius);
display: inline-block;
} }
form > .buttons input { form > .buttons > * {
margin-left: var(--gap); margin-left: var(--gap);
} }
form > .buttons input:hover { form > .buttons > *:hover {
text-decoration: underline; text-decoration: underline;
} }
form > .buttons input[type="submit"] { form > .buttons input[type="submit"] {
@ -68,7 +70,7 @@ form > .buttons input[type="submit"] {
form > .buttons input[type="reset"] { form > .buttons input[type="reset"] {
color: var(--red); color: var(--red);
} }
form > .buttons input.del { form > .buttons a.del {
background: var(--red); background: var(--red);
color: var(--text-inv); color: var(--text-inv);
} }

View file

@ -1,10 +1,12 @@
<div class="buttons"> <div class="buttons">
{% if not adding %} {% if not adding %}
<input <a
type="button"
value="Delete"
class="btn del" class="btn del"
onclick="if(confirm('Supprimer <{{ instance.name}}> ?')) window.location.href = '{% url del_url instance.id %}'" /> onclick="return confirm('Supprimer <{{ instance.name}}> ?')"
href="{% url del_url instance.id %}">
Delete
</a>
{% endif %} {% endif %}
<input type="reset" /> <input type="reset" />
<input type="submit" value="Save {{ name }}" /> <input type="submit" value="Save {{ name }}" />