From 26ece2a3e6564db83a5159aa0049c9fd8aa3138f Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sat, 16 Mar 2019 12:14:38 +0100
Subject: [PATCH] Fixed #401 - improved transaction table
---
src/main/resources/static/css/dark/style.css | 4 ++++
src/main/resources/static/css/dark/transactions.css | 8 ++++++++
src/main/resources/static/css/style.css | 4 ++++
src/main/resources/static/css/transactions.css | 8 ++++++++
.../resources/templates/transactions/transactions.ftl | 2 +-
.../templates/transactions/transactionsMacros.ftl | 6 +++---
6 files changed, 28 insertions(+), 4 deletions(-)
diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css
index 1656c663b..bb27ce782 100644
--- a/src/main/resources/static/css/dark/style.css
+++ b/src/main/resources/static/css/dark/style.css
@@ -575,6 +575,10 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
white-space: nowrap;
}
+.invisible {
+ opacity: 0;
+}
+
.hidden {
display: none;
}
diff --git a/src/main/resources/static/css/dark/transactions.css b/src/main/resources/static/css/dark/transactions.css
index 94283e856..4e71f6f44 100644
--- a/src/main/resources/static/css/dark/transactions.css
+++ b/src/main/resources/static/css/dark/transactions.css
@@ -21,4 +21,12 @@
.transaction-container {
width: 90%;
+}
+
+.transaction-container .responsive-table td {
+ text-align: center;
+}
+
+.transaction-container .category-circle-small {
+ margin: auto;
}
\ No newline at end of file
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index fe9549e22..dc8a45c89 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -488,6 +488,10 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
white-space: nowrap;
}
+.invisible {
+ opacity: 0;
+}
+
.hidden {
display: none;
}
diff --git a/src/main/resources/static/css/transactions.css b/src/main/resources/static/css/transactions.css
index 94283e856..4e71f6f44 100644
--- a/src/main/resources/static/css/transactions.css
+++ b/src/main/resources/static/css/transactions.css
@@ -21,4 +21,12 @@
.transaction-container {
width: 90%;
+}
+
+.transaction-container .responsive-table td {
+ text-align: center;
+}
+
+.transaction-container .category-circle-small {
+ margin: auto;
}
\ No newline at end of file
diff --git a/src/main/resources/templates/transactions/transactions.ftl b/src/main/resources/templates/transactions/transactions.ftl
index 2badbf83b..ace6e2dc1 100644
--- a/src/main/resources/templates/transactions/transactions.ftl
+++ b/src/main/resources/templates/transactions/transactions.ftl
@@ -51,7 +51,7 @@
<br>
<div class="row">
<div class="col s12">
- <table class="bordered">
+ <table class="bordered responsive-table">
<#list transactions as transaction>
<tr>
<td>${helpers.getDateStringWithoutYear(transaction.date)}</td>
diff --git a/src/main/resources/templates/transactions/transactionsMacros.ftl b/src/main/resources/templates/transactions/transactionsMacros.ftl
index 54cd7260a..a3b9ba1f3 100644
--- a/src/main/resources/templates/transactions/transactionsMacros.ftl
+++ b/src/main/resources/templates/transactions/transactionsMacros.ftl
@@ -2,7 +2,7 @@
<#macro transactionRepeating transaction>
<td>
- <#if transaction.isRepeating()><i class="material-icons">repeat</i></#if>
+ <i class="material-icons <#if !transaction.isRepeating()>invisible</#if>">repeat</i>
</td>
</#macro>
@@ -16,7 +16,7 @@
</div>
</div>
<div class="hide-on-large-only">
- <div class="category-circle-small no-margin" style="background-color: ${transaction.category.color}">
+ <div class="category-circle-small" style="background-color: ${transaction.category.color}">
<span style="color: ${transaction.category.getAppropriateTextColor()}">
${transaction.category.name?capitalize[0]}
</span>
@@ -28,7 +28,7 @@
<#macro transactionNameAndDescription transaction>
<td class="transaction-name">
<div class="ellipsis">${transaction.name}</div>
- <div class="hide-on-small-only">
+ <div class="hide-on-med-and-down">
<#if transaction.description??>
<div class="italic">${transaction.description}</div>
</#if>
--
GitLab