Use html tables, update design
This commit is contained in:
parent
fdc9214b10
commit
6ca8ca6493
5 changed files with 101 additions and 147 deletions
|
@ -1,31 +1,4 @@
|
||||||
.plot table {
|
col.bar {width: auto}
|
||||||
border-collapse: collapse;
|
|
||||||
width: 100%;
|
|
||||||
table-layout: auto;
|
|
||||||
}
|
|
||||||
.plot thead {
|
|
||||||
background: var(--bg-01);
|
|
||||||
}
|
|
||||||
.plot col.desc, .plot col.value {width: 8rem}
|
|
||||||
.plot col.icon {width: 1ch}
|
|
||||||
.plot tr {
|
|
||||||
padding-bottom: .5rem;
|
|
||||||
border: .1rem solid var(--gray);
|
|
||||||
}
|
|
||||||
.plot th {text-align: left}
|
|
||||||
.plot th.r {text-align: right}
|
|
||||||
.plot th.l {text-align: left}
|
|
||||||
.plot td.c {text-align: center}
|
|
||||||
|
|
||||||
.plot td, .plot th, .plot td.bar div {
|
|
||||||
position: relative;
|
|
||||||
height: 2rem;
|
|
||||||
line-height: 2rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.plot td, .plot th {
|
|
||||||
padding: .5rem var(--gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
.plot td.bar {
|
.plot td.bar {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -33,17 +6,8 @@
|
||||||
}
|
}
|
||||||
.plot td.bar div {
|
.plot td.bar div {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: .5rem;
|
height: .5rem;
|
||||||
}
|
top: 0;
|
||||||
.plot td.m {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.plot tbody th {
|
|
||||||
font-feature-settings: var(--num);
|
|
||||||
}
|
|
||||||
.plot td.value {
|
|
||||||
font-feature-settings: var(--num);
|
|
||||||
text-align: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.plot td.bar div:not(.tot) {
|
.plot td.bar div:not(.tot) {
|
||||||
|
|
|
@ -1,60 +1,26 @@
|
||||||
.table {
|
table {
|
||||||
display: grid;
|
border-collapse: collapse;
|
||||||
margin: 2em 0;
|
width: 100%;
|
||||||
border-radius: var(--radius);
|
|
||||||
overflow: hidden;
|
|
||||||
border-bottom: var(--border) solid var(--theme);
|
|
||||||
}
|
}
|
||||||
.table.col2 {grid-template-columns: repeat(2, auto)}
|
thead {
|
||||||
.table.col3 {grid-template-columns: repeat(3, auto)}
|
background: var(--bg-01);
|
||||||
.table.col4 {grid-template-columns: repeat(4, auto)}
|
|
||||||
.table.col5 {grid-template-columns: repeat(5, 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.col2-4 {grid-template-columns: repeat(2, min-content) repeat(4, auto)}
|
|
||||||
.table.col1-5 {grid-template-columns: min-content repeat(5, auto)}
|
|
||||||
.table.col2-5 {grid-template-columns: repeat(2, min-content) repeat(5, auto)}
|
|
||||||
.table.col1-6 {grid-template-columns: min-content repeat(6, auto)}
|
|
||||||
.table.col1-7 {grid-template-columns: min-content repeat(7, auto)}
|
|
||||||
|
|
||||||
.table > div {
|
|
||||||
display: contents;
|
|
||||||
}
|
}
|
||||||
|
col {width: 8rem}
|
||||||
.table > div > * {
|
col.icon {width: 1ch}
|
||||||
padding: 1em;
|
tr {
|
||||||
|
border: .1rem solid var(--gray);
|
||||||
|
height: 2rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
|
td, th {
|
||||||
|
padding: 0 var(--gap);
|
||||||
|
position: relative;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
|
||||||
.table > div:nth-child(odd) > * {background: var(--bg-01)}
|
|
||||||
.table > div:nth-child(even) > * {background: var(--bg)}
|
|
||||||
|
|
||||||
.table > div.header > * {
|
|
||||||
background: var(--theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
.table > div > .center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.table > div > .right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.table > div > .num {
|
|
||||||
font-feature-settings: var(--num);
|
|
||||||
}
|
|
||||||
.table > div > span.value {
|
|
||||||
filter: brightness(95%);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table > div > span.text {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.table > div.full-line > * {
|
.date, .value {
|
||||||
grid-column: 1 / -1;
|
font-feature-settings: var(--num);
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.table > .invoice.new > a {
|
|
||||||
grid-column: 2 / -1;
|
|
||||||
}
|
}
|
||||||
|
.l {text-align: left}
|
||||||
|
.r, .value {text-align: right}
|
||||||
|
.c, .date {text-align: center}
|
||||||
|
|
|
@ -12,8 +12,8 @@
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" colspan="2">{% translate "Category" %}</th>
|
<th scope="col" colspan="2">{% translate "Category" %}</th>
|
||||||
<th class="l" scope="col" colspan="2">{% translate "Expenses" %}</th>
|
<th scope="col" colspan="2">{% translate "Expenses" %}</th>
|
||||||
<th class="r" scope="col" colspan="2">{% translate "Income" %}</th>
|
<th scope="col" colspan="2">{% translate "Income" %}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
|
@ -11,15 +11,15 @@
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">{% translate "Month" %}</th>
|
<th scope="col">{% translate "Month" %}</th>
|
||||||
<th class="l" scope="col" colspan="2">{% translate "Expenses" %}</th>
|
<th scope="col" colspan="2">{% translate "Expenses" %}</th>
|
||||||
<th class="r" scope="col" colspan="2">{% translate "Income" %}</th>
|
<th scope="col" colspan="2">{% translate "Income" %}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% spaceless %}
|
{% spaceless %}
|
||||||
{% for date in history.data %}
|
{% for date in history.data %}
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">{{ date.month|date:"Y-m" }}</th>
|
<th class="date" scope="row">{{ date.month|date:"Y-m" }}</th>
|
||||||
<td class="value">{{ date.sum_m|pmrvalue }}</td>
|
<td class="value">{{ date.sum_m|pmrvalue }}</td>
|
||||||
<td class="bar m">
|
<td class="bar m">
|
||||||
<div style="width: {% widthratio date.sum_m history.max -100 %}%"></div>
|
<div style="width: {% widthratio date.sum_m history.max -100 %}%"></div>
|
||||||
|
|
|
@ -1,21 +1,77 @@
|
||||||
{% load main_extras %}
|
{% load main_extras %}
|
||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
<div id="transactions"
|
<div id="transactions">
|
||||||
class="table col1-{% if account or category %}6{% else %}7{% endif %}">
|
<table>
|
||||||
<div class="header">
|
<colgroup>
|
||||||
<strong class="attach center"><i class="fa fa-paperclip"></i></strong>
|
<col class="icon c">
|
||||||
<strong class="date center">{% translate "Date" %}</strong>
|
<col class="date">
|
||||||
<strong class="name">{% translate "Name" %}</strong>
|
<col class="desc">
|
||||||
<strong class="value center">{% translate "Value" %}</strong>
|
<col class="value">
|
||||||
<strong class="trader center">{% translate "Trader" %}</strong>
|
<col class="desc">
|
||||||
|
<col class="icon">
|
||||||
|
<col class="desc">
|
||||||
|
<col class="icon">
|
||||||
|
<col class="desc">
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<th>
|
||||||
|
<i class="fa fa-paperclip"></i>
|
||||||
|
</th>
|
||||||
|
<th>{% translate "Date" %}</th>
|
||||||
|
<th>{% translate "Name" %}</th>
|
||||||
|
<th>{% translate "Value" %}</th>
|
||||||
|
<th>{% translate "Trader" %}</th>
|
||||||
{% if not category %}
|
{% if not category %}
|
||||||
<strong class="category center">{% translate "Category" %}</strong>
|
<th colspan="2">{% translate "Category" %}</th>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if not account %}
|
{% if not account %}
|
||||||
<strong class="account center">{% translate "Account" %}</strong>
|
<th colspan="2">{% translate "Account" %}</th>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<strong class="description">{% translate "Description" %}</strong>
|
</thead>
|
||||||
</div>
|
<tbody>
|
||||||
|
{% for trans in transactions %}
|
||||||
|
<tr>
|
||||||
|
<td class="c">
|
||||||
|
{% for invoice in trans.invoices %}
|
||||||
|
<a href="{{ invoice.file.url }}">
|
||||||
|
<i class="fa fa-paperclip"></i>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</td>
|
||||||
|
<td class="date">{{ trans.date|date:"Y-m-d" }}</td>
|
||||||
|
<th scope="row" class="l">
|
||||||
|
<a href="{% url "transaction" pk=trans.id %}">{{ trans.name }}</a>
|
||||||
|
</th>
|
||||||
|
<td class="value">{{ trans.value|pmvalue }}</td>
|
||||||
|
<td>{{ trans.trader|default_if_none:"–" }}</td>
|
||||||
|
{% if not category %}
|
||||||
|
{% if trans.category %}
|
||||||
|
<td class="r">
|
||||||
|
<i class="fa fa-{{ trans.category.icon }}"></i>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="{% url 'category' pk=trans.category.id %}">{{ trans.category }}</a>
|
||||||
|
</td>
|
||||||
|
{% else %}
|
||||||
|
<td class="c" colspan="2">–</td>
|
||||||
|
{% endif %}
|
||||||
|
</td>
|
||||||
|
{% endif %}
|
||||||
|
{% if not account %}
|
||||||
|
<td class="r">
|
||||||
|
<i class="fa fa-{{ trans.account.icon }}"></i>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="{% url 'account' pk=trans.account.id %}">{{ trans.account }}</a>
|
||||||
|
</td>
|
||||||
|
{% endif %}
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{% comment %}
|
||||||
|
<div id="transactions" class="table col1-{% if account or category %}6{% else %}7{% endif %}">
|
||||||
{% if new_transaction_url %}
|
{% if new_transaction_url %}
|
||||||
<div class="full-line">
|
<div class="full-line">
|
||||||
<a href="{{ new_transaction_url }}">{% translate "New transaction" %}</a>
|
<a href="{{ new_transaction_url }}">{% translate "New transaction" %}</a>
|
||||||
|
@ -23,39 +79,6 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% for trans in transactions %}
|
{% for trans in transactions %}
|
||||||
<div class="transaction">
|
<div class="transaction">
|
||||||
<span class="attach center">
|
|
||||||
{% for invoice in trans.invoices %}
|
|
||||||
{% spaceless %}
|
|
||||||
<a href="{{ invoice.file.url }}">
|
|
||||||
<i class="fa fa-paperclip"></i>
|
|
||||||
</a>
|
|
||||||
{% endspaceless %}
|
|
||||||
{% endfor %}
|
|
||||||
</span>
|
|
||||||
<span class="date num center">{{ trans.date|date:"Y-m-d" }}</span>
|
|
||||||
<span class="name text"><a href="{% url 'transaction' pk=trans.id %}">{{ trans.name }}</a></span>
|
|
||||||
<span class="value num right">{{ trans.value|pmvalue }}</span>
|
|
||||||
<span class="trader text center">{{ trans.trader|default_if_none:"–" }}</span>
|
|
||||||
{% if not category %}
|
|
||||||
<span class="category text center">
|
|
||||||
{% if trans.category %}
|
|
||||||
<i class="fa fa-{{ trans.category.icon }}"></i>
|
|
||||||
<a href="{% url 'category' pk=trans.category.id %}">{{ trans.category }}</a>
|
|
||||||
{% else %}
|
|
||||||
–
|
|
||||||
{% endif %}
|
|
||||||
</span>
|
|
||||||
{% endif %}
|
|
||||||
{% if not account %}
|
|
||||||
<span class="account text center">
|
|
||||||
{% if trans.account %}
|
|
||||||
<i class="fa fa-{{ trans.account.icon }}"></i>
|
|
||||||
<a href="{% url 'account' pk=trans.account.id %}">{{ trans.account }}</a>
|
|
||||||
{% else %}
|
|
||||||
–
|
|
||||||
{% endif %}
|
|
||||||
</span>
|
|
||||||
{% endif %}
|
|
||||||
<span class="description text">{{ trans.description }}</span>
|
<span class="description text">{{ trans.description }}</span>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
@ -65,3 +88,4 @@
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
{% endcomment %}
|
||||||
|
|
Loading…
Reference in a new issue