diff --git a/BudgetMasterServer/src/main/resources/static/css/colors.css b/BudgetMasterServer/src/main/resources/static/css/colors.css
index 1180c620228b1cbc519d06d06cea682b76f319a0..2139910072d39202cb275bdc31e398104939a3c8 100644
--- a/BudgetMasterServer/src/main/resources/static/css/colors.css
+++ b/BudgetMasterServer/src/main/resources/static/css/colors.css
@@ -114,6 +114,10 @@
background-color: var(--color-black) !important;
}
+.background-light {
+ background-color: var(--color-background-light) !important;
+}
+
/* text colors*/
.text-blue {
diff --git a/BudgetMasterServer/src/main/resources/static/css/transactions.css b/BudgetMasterServer/src/main/resources/static/css/transactions.css
index dba193019645faa078f250278f428773261d1641..6798b857a13595c641f2f7f7d6ec27921834fac9 100644
--- a/BudgetMasterServer/src/main/resources/static/css/transactions.css
+++ b/BudgetMasterServer/src/main/resources/static/css/transactions.css
@@ -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 {
diff --git a/BudgetMasterServer/src/main/resources/templates/transactions/transactions.ftl b/BudgetMasterServer/src/main/resources/templates/transactions/transactions.ftl
index 28a841526993ddb3e77934d81f6abccf3425a31f..e9e671faee21d01aeee297cd64ccfb76285fe39f 100644
--- a/BudgetMasterServer/src/main/resources/templates/transactions/transactions.ftl
+++ b/BudgetMasterServer/src/main/resources/templates/transactions/transactions.ftl
@@ -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)}
- </div>
- <@transactionsMacros.transactionType transaction/>
- <@transactionsMacros.transactionButtons transaction/>
+ <#assign transactionDate=dateService.getDateStringWithoutYear(transaction.date)/>
+ <#if transactionDate != lastDate>
+ <div class="col s12 left-align bold transaction-text transaction-date">
+ ${transactionDate}
+ </div>
+ <#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 -->
diff --git a/BudgetMasterServer/src/main/resources/templates/transactions/transactionsMacros.ftl b/BudgetMasterServer/src/main/resources/templates/transactions/transactionsMacros.ftl
index 98519d63fa266aa6da69a57c123e0f02c6d3fddb..5580e2cec158ac355e6cb2fb2e4c601859ed9235 100644
--- a/BudgetMasterServer/src/main/resources/templates/transactions/transactionsMacros.ftl
+++ b/BudgetMasterServer/src/main/resources/templates/transactions/transactionsMacros.ftl
@@ -1,8 +1,8 @@
<#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>
+ <br>
+ <#assign isOnlyRest = transactions?size == 1 && transactions[0].category.type.name() == "REST"/>
<#if transactions?size == 0 || isOnlyRest>
<div class="row">
<div class="col s12">