Fixed #401 - improved transaction table

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;
 }

src/main/resources/static/css/dark/transactions.css

@@ -22,3 +22,11 @@
 .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

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;
 }

src/main/resources/static/css/transactions.css

@@ -22,3 +22,11 @@
 .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

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>

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>