Skip to content
Snippets Groups Projects
Commit 89957757 authored by Robert Goldmann's avatar Robert Goldmann
Browse files

#400 - group transactions by date

parent 791f7c43
No related branches found
No related tags found
No related merge requests found
......@@ -114,6 +114,10 @@
background-color: var(--color-black) !important;
}
.background-light {
background-color: var(--color-background-light) !important;
}
/* text colors*/
.text-blue {
......
......@@ -39,12 +39,12 @@
}
.transaction-row-top {
padding-top: 14px;
padding: 14px 0.5rem 0 0.5rem;
min-height: 3.4rem;
}
.transaction-row-bottom {
padding-bottom: 5px;
margin-bottom: 0;
padding-bottom: 14px;
}
.transaction-row-transparent {
......@@ -55,6 +55,10 @@
opacity: 1.0 !important;
}
.transaction-card {
margin: 0.4rem 0 0.8rem 0;
}
.transaction-text {
font-size: 1.2rem;
}
......@@ -71,6 +75,8 @@
.transaction-date {
min-width: 5.5rem;
margin-top: 1.6rem;
margin-bottom: 0.5rem;
}
.new-transaction-button {
......
......@@ -50,39 +50,42 @@
<@transactionsMacros.buttons filterConfiguration.isActive()/>
<#-- transactions list -->
<br>
<#assign lastDate=''/>
<#list transactions as transaction>
<#assign shouldHighlight = highlightID?? && transaction.getID()?? && transaction.getID()==highlightID/>
<div class="hide-on-large-only transaction-row-top <#if transaction.isFuture()>transaction-row-transparent</#if> <#if shouldHighlight>background-blue-light transaction-row-transparent-override" id="highlighted-small"<#else>"</#if>>
<div class="row valign-wrapper transaction-row-bottom">
<div class="col s3 center-align bold transaction-text">
${dateService.getDateStringWithoutYear(transaction.date)}
<#assign transactionDate=dateService.getDateStringWithoutYear(transaction.date)/>
<#if transactionDate != lastDate>
<div class="col s12 left-align bold transaction-text transaction-date">
${transactionDate}
</div>
<@transactionsMacros.transactionType transaction/>
<@transactionsMacros.transactionButtons transaction/>
<#assign lastDate=transactionDate/>
</#if>
<div class="hide-on-large-only transaction-row-top card transaction-card background-light <#if transaction.isFuture()>transaction-row-transparent</#if> <#if shouldHighlight>background-blue-light transaction-row-transparent-override" id="highlighted-small"<#else>"</#if>>
<div class="row valign-wrapper transaction-row-bottom no-margin-bottom">
<@transactionsMacros.transactionNameAndDescription transaction "s6"/>
<@transactionsMacros.transactionAmount transaction account "s6"/>
</div>
<div class="row valign-wrapper transaction-row-bottom">
<@transactionsMacros.transactionCategory transaction "left-align no-margin-left"/>
<@transactionsMacros.transactionAccountIcon transaction/>
<@transactionsMacros.transactionNameAndDescription transaction "s5"/>
<@transactionsMacros.transactionAmount transaction account "s4"/>
<@transactionsMacros.transactionType transaction "s2"/>
<@transactionsMacros.transactionButtons transaction "s6 right-align"/>
</div>
</div>
<div class="hide-on-med-and-down transaction-row-top transaction-row-bottom <#if transaction.isFuture()>transaction-row-transparent</#if> <#if shouldHighlight>background-blue-light transaction-row-transparent-override" id="highlighted-large"<#else>"</#if>>
<div class="hide-on-med-and-down transaction-row-top card transaction-card transaction-row-bottom background-light <#if transaction.isFuture()>transaction-row-transparent</#if> <#if shouldHighlight>background-blue-light transaction-row-transparent-override" id="highlighted-large"<#else>"</#if>>
<div class="row valign-wrapper no-margin-bottom">
<div class="col l1 xl1 bold transaction-text transaction-line-height">
${dateService.getDateStringWithoutYear(transaction.date)}
</div>
<@transactionsMacros.transactionCategory transaction "left-align"/>
<@transactionsMacros.transactionAccountIcon transaction/>
<@transactionsMacros.transactionType transaction/>
<@transactionsMacros.transactionType transaction "l1 xl1"/>
<@transactionsMacros.transactionNameAndDescription transaction "l4 xl5"/>
<@transactionsMacros.transactionAmount transaction account "l3 xl3"/>
<@transactionsMacros.transactionButtons transaction/>
<@transactionsMacros.transactionAmount transaction account "l3 xl3 center-align"/>
<@transactionsMacros.transactionButtons transaction "l2 xl1"/>
</div>
</div>
<hr>
</#list>
<#-- show placeholde text if no transactions are present in the current month or REST ist the only transaction -->
......
<#import "/spring.ftl" as s>
<#import "../helpers/header.ftl" as header>
<#macro transactionType transaction>
<div class="col s3 l1 xl1 left-align">
<#macro transactionType transaction size>
<div class="col ${size} left-align">
<#if transaction.isRepeating()>
<i class="material-icons">repeat</i>
</#if>
......@@ -48,8 +48,8 @@
</#if>
</#macro>
<#macro transactionButtons transaction>
<div class="col s6 l2 xl1 right-align transaction-buttons no-wrap">
<#macro transactionButtons transaction classes>
<div class="col ${classes} transaction-buttons no-wrap">
<#if transaction.isEditable()>
<@header.buttonFlat url='/transactions/' + transaction.ID?c + '/edit' icon='edit' localizationKey='' classes="no-padding text-default"/>
<@header.buttonFlat url='/transactions/' + transaction.ID?c + '/requestDelete' icon='delete' localizationKey='' classes="no-padding text-default button-request-delete-transaction" isDataUrl=true/>
......@@ -87,11 +87,9 @@
<#macro placeholder transactions>
<#assign isOnlyRest = transactions?size == 1 && transactions[0].category.type.name() == "REST"/>
<#if isOnlyRest>
<br>
</#if>
<#assign isOnlyRest = transactions?size == 1 && transactions[0].category.type.name() == "REST"/>
<#if transactions?size == 0 || isOnlyRest>
<div class="row">
<div class="col s12">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment