Update invoice list layout

This commit is contained in:
Edgar P. Burkhart 2022-12-25 16:10:39 +01:00
parent 93d827dea3
commit 3a31eec326
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
3 changed files with 41 additions and 18 deletions

View file

@ -62,3 +62,9 @@ a:hover {
.red {color: var(--red)} .red {color: var(--red)}
.green {color: var(--text-green)} .green {color: var(--text-green)}
.split {
display: grid;
grid-template-columns: repeat(2, auto);
grid-gap: var(--gap);
}

View file

@ -11,6 +11,8 @@
.table.col4 {grid-template-columns: repeat(4, auto)} .table.col4 {grid-template-columns: repeat(4, auto)}
.table.col5 {grid-template-columns: repeat(5, auto)} .table.col5 {grid-template-columns: repeat(5, auto)}
.table.col6 {grid-template-columns: repeat(6, auto)} .table.col6 {grid-template-columns: repeat(6, auto)}
.table.col1-1 {grid-template-columns: min-content auto}
.table.col1-1-1 {grid-template-columns: min-content auto min-content}
.table.col1-5 {grid-template-columns: min-content repeat(5, auto)} .table.col1-5 {grid-template-columns: min-content repeat(5, auto)}
.table.col1-6 {grid-template-columns: min-content repeat(6, auto)} .table.col1-6 {grid-template-columns: min-content repeat(6, auto)}

View file

@ -6,6 +6,7 @@
{% block link %} {% block link %}
{{ block.super }} {{ block.super }}
<link rel="stylesheet" href="{% static 'main/css/form.css' %}" type="text/css" /> <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 %} {% endblock %}
{% block body %} {% block body %}
@ -20,10 +21,19 @@
</form> </form>
{% endspaceless %} {% endspaceless %}
<div class="split">
{% if transaction.has_invoice %}
<div>
<h2>{% translate "Invoices" %}</h2> <h2>{% translate "Invoices" %}</h2>
<div id="invoices"> <div id="invoices" class="table col1-1-1">
<div class="header">
<strong class="attach center"><i class="fa fa-file"></i></strong>
<strong class="name">{% translate "Name" %}</strong>
<strong class="attach center"><i class="fa fa-trash-can"></i></strong>
</div>
{% for inv in transaction.invoices %} {% for inv in transaction.invoices %}
<div class="invoice"> <div class="invoice">
<a href="{{ inv.file.url }}"><i class="fa-regular fa-file"></i></a>
<a href="{{ inv.file.url }}">{{ inv.name }}</a> <a href="{{ inv.file.url }}">{{ inv.name }}</a>
<a href="{% url 'del_invoice' transaction.id inv.id %}" <a href="{% url 'del_invoice' transaction.id inv.id %}"
onclick="return confirm('{% translate "Delete" %} <{{ inv.name }}> ?')"> onclick="return confirm('{% translate "Delete" %} <{{ inv.name }}> ?')">
@ -32,7 +42,10 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div>
{% endif %}
<div>
<h3>{% translate "Add invoice" %}</h3> <h3>{% translate "Add invoice" %}</h3>
<form action="{% url 'transaction' transaction.id %}" method="post" enctype="multipart/form-data"> <form action="{% url 'transaction' transaction.id %}" method="post" enctype="multipart/form-data">
{% csrf_token %} {% csrf_token %}
@ -40,4 +53,6 @@
{{ invoice_form }} {{ invoice_form }}
<div class="buttons"><input class="btn" type="submit" value="{% translate "Add" %}" /></div> <div class="buttons"><input class="btn" type="submit" value="{% translate "Add" %}" /></div>
</form> </form>
</div>
</div>
{% endblock %} {% endblock %}