edpibu/nummi
1
Fork 0
Code Issues 4 Releases Activity

Update invoice list layout

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
nummi/main/static/main/css/main.css
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);
}

2
nummi/main/static/main/css/table.css
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)}

51
nummi/main/templates/main/transaction.html
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,24 +21,38 @@
</form> </form>
{% endspaceless %} {% endspaceless %}
<h2>{% translate "Invoices" %}</h2> <div class="split">
<div id="invoices"> {% if transaction.has_invoice %}
{% for inv in transaction.invoices %} <div>
<div class="invoice"> <h2>{% translate "Invoices" %}</h2>
<a href="{{ inv.file.url }}">{{ inv.name }}</a> <div id="invoices" class="table col1-1-1">
<a href="{% url 'del_invoice' transaction.id inv.id %}" <div class="header">
onclick="return confirm('{% translate "Delete" %} <{{ inv.name }}> ?')"> <strong class="attach center"><i class="fa fa-file"></i></strong>
<i class="fa-regular fa-trash-can"></i> <strong class="name">{% translate "Name" %}</strong>
</a> <strong class="attach center"><i class="fa fa-trash-can"></i></strong>
</div>
{% for inv in transaction.invoices %}
<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="{% url 'del_invoice' transaction.id inv.id %}"
onclick="return confirm('{% translate "Delete" %} <{{ inv.name }}> ?')">
<i class="fa-regular fa-trash-can"></i>
</a>
</div>
{% endfor %}
</div> </div>
{% endfor %} </div>
</div> {% endif %}
<h3>{% translate "Add invoice" %}</h3> <div>
<form action="{% url 'transaction' transaction.id %}" method="post" enctype="multipart/form-data"> <h3>{% translate "Add invoice" %}</h3>
{% csrf_token %} <form action="{% url 'transaction' transaction.id %}" method="post" enctype="multipart/form-data">
<input type="hidden" name="form" value="invoice" /> {% csrf_token %}
{{ invoice_form }} <input type="hidden" name="form" value="invoice" />
<div class="buttons"><input class="btn" type="submit" value="{% translate "Add" %}" /></div> {{ invoice_form }}
</form> <div class="buttons"><input class="btn" type="submit" value="{% translate "Add" %}" /></div>
</form>
</div>
</div>
{% endblock %} {% endblock %}