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

#401 - complete redesign of transaction table

parent 2618986b
No related branches found
No related tags found
No related merge requests found
Pipeline #900 passed
Stage: build
Stage: test
Show whitespace changes
Inline Side-by-side
Showing
with 57 additions and 84 deletions
src/main/resources/static/css/dark/style.css
+ 1
− 21
View file @ 7608f958
......@@ -493,7 +493,7 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
margin: auto
}
.btn-flat {
.btn-flat, .btn {
text-overflow: ellipsis;
white-space: nowrap;
}
......@@ -563,10 +563,6 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
width: 17vmin;
}
.ellipsis {
text-overflow: ellipsis;
}
.no-wrap {
white-space: nowrap;
}
......@@ -607,14 +603,6 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
.budget {
font-size: 3.5vmin;
}
.transaction-table-cell {
text-align: center !important;
}
.transaction-name {
width: 100% !important;
}
}
@media all and (max-width: 599px) and (min-width: 320px) {
......@@ -634,14 +622,6 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
.container, .transaction-container {
width: 100% !important;
}
.transaction-table-cell {
text-align: center !important;
}
.transaction-name {
width: 100% !important;
}
}
.debug {
......
src/main/resources/static/css/dark/transactions.css
+ 13
− 6
View file @ 7608f958
......@@ -23,14 +23,21 @@
width: 90%;
}
.transaction-name {
width: 50%;
.transaction-container .category-circle,
.transaction-container .category-circle-small{
margin: auto;
}
.transaction-table-cell {
text-align: left;
.transaction-row {
margin-bottom: 5px;
margin-top: 20px;
}
.transaction-container .category-circle-small {
margin: auto;
.transaction-text {
font-size: 1.2rem;
}
.transaction-buttons .btn-flat {
height: auto;
line-height: inherit;
}
\ No newline at end of file
src/main/resources/static/css/style.css
+ 1
− 21
View file @ 7608f958
......@@ -420,7 +420,7 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
margin: auto
}
.btn-flat {
.btn-flat, .btn {
text-overflow: ellipsis;
white-space: nowrap;
}
......@@ -476,10 +476,6 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
border-bottom: 1px solid #212121;
}
.ellipsis {
text-overflow: ellipsis;
}
.no-wrap {
white-space: nowrap;
}
......@@ -520,14 +516,6 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
.budget {
font-size: 3.5vmin;
}
.transaction-table-cell {
text-align: center !important;
}
.transaction-name {
width: 100% !important;
}
}
@media all and (max-width: 599px) and (min-width: 320px) {
......@@ -547,14 +535,6 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
.container, .transaction-container {
width: 100% !important;
}
.transaction-table-cell {
text-align: center !important;
}
.transaction-name {
width: 100% !important;
}
}
.debug {
......
src/main/resources/static/css/transactions.css
+ 13
− 6
View file @ 7608f958
......@@ -23,14 +23,21 @@
width: 90%;
}
.transaction-name {
width: 50%;
.transaction-container .category-circle,
.transaction-container .category-circle-small{
margin: auto;
}
.transaction-table-cell {
text-align: left;
.transaction-row {
margin-bottom: 5px;
margin-top: 20px;
}
.transaction-container .category-circle-small {
margin: auto;
.transaction-text {
font-size: 1.2rem;
}
.transaction-buttons .btn-flat {
height: auto;
line-height: inherit;
}
\ No newline at end of file
src/main/resources/templates/transactions/transactions.ftl
+ 14
− 15
View file @ 7608f958
......@@ -49,22 +49,21 @@
<#-- transactions list -->
<br>
<div class="row">
<div class="col s12">
<table class="bordered responsive-table">
<#list transactions as transaction>
<tr>
<td class="transaction-table-cell">${helpers.getDateStringWithoutYear(transaction.date)}</td>
<div class="row valign-wrapper transaction-row">
<div class="col s3 l1 center-align bold transaction-text">
${helpers.getDateStringWithoutYear(transaction.date)}
</div>
<@transactionsMacros.transactionRepeating transaction/>
<@transactionsMacros.transactionButtons transaction/>
</div>
<div class="row valign-wrapper">
<@transactionsMacros.transactionCategory transaction/>
<@transactionsMacros.transactionNameAndDescription transaction/>
<@transactionsMacros.transactionAmount transaction.getAmount()/>
<@transactionsMacros.transactionButtons transaction/>
</tr>
</#list>
</table>
</div>
</div>
<hr>
</#list>
<#-- show placeholde text if no transactions are present in the current month or REST ist the only transaction -->
<@transactionsMacros.placeholder transactions/>
......
src/main/resources/templates/transactions/transactionsMacros.ftl
+ 15
− 15
View file @ 7608f958
<#import "/spring.ftl" as s>
<#macro transactionRepeating transaction>
<td class="transaction-table-cell">
<div class="col s1 l1">
<i class="material-icons <#if !transaction.isRepeating()>invisible</#if>">repeat</i>
</td>
</div>
</#macro>
<#macro transactionCategory transaction>
<td>
<div class="col s3 l1 center-align">
<div class="hide-on-med-and-down">
<div class="category-circle" style="background-color: ${transaction.category.color}">
<span style="color: ${transaction.category.getAppropriateTextColor()}">
......@@ -22,35 +22,35 @@
</span>
</div>
</div>
</td>
</div>
</#macro>
<#macro transactionNameAndDescription transaction>
<td class="transaction-name transaction-table-cell">
<div class="ellipsis">${transaction.name}</div>
<div class="col s5 l7">
<div class="truncate transaction-text">${transaction.name}</div>
<div class="hide-on-med-and-down">
<#if transaction.description??>
<div class="italic">${transaction.description}</div>
</#if>
</div>
</td>
</div>
</#macro>
<#macro transactionAmount amount>
<#if amount <= 0>
<td class="transaction-table-cell bold ${redTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td>
<div class="col s4 bold ${redTextColor} no-wrap right-align transaction-text">${helpers.getCurrencyString(amount)}</div>
<#else>
<td class="transaction-table-cell bold ${greenTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td>
<div class="col s4 bold ${greenTextColor} no-wrap right-align transaction-text">${helpers.getCurrencyString(amount)}</div>
</#if>
</#macro>
<#macro transactionButtons transaction>
<td class="transaction-table-cell">
<div class="col s8 l10 right-align transaction-buttons">
<#if (transaction.category.type.name() != "REST")>
<a href="<@s.url '/transactions/${transaction.ID?c}/edit'/>" class="btn-flat no-padding text-color"><i class="material-icons left">edit</i></a>
<a href="<@s.url '/transactions/${transaction.ID?c}/requestDelete'/>" class="btn-flat no-padding text-color"><i class="material-icons left">delete</i></a>
<a href="<@s.url '/transactions/${transaction.ID?c}/requestDelete'/>" class="btn-flat no-padding text-color"><i class="material-icons left no-margin">delete</i></a>
</#if>
</td>
</div>
</#macro>
<#macro placeholder transactions>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment