#401 - correctly center text

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

@@ -551,10 +551,6 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
     width: 30%;
 }
 
-.transaction-name {
-    width: 50%;
-}
-
 .no-border-table tr {
     border: none;
 }
@@ -611,6 +607,14 @@ 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) {
@@ -630,6 +634,14 @@ 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

@@ -23,8 +23,12 @@
     width: 90%;
 }
 
-.transaction-container .responsive-table td {
-    text-align: center;
+.transaction-name {
+    width: 50%;
+}
+
+.transaction-table-cell {
+    text-align: left;
 }
 
 .transaction-container .category-circle-small {

src/main/resources/static/css/style.css

@@ -468,10 +468,6 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
     width: 30%;
 }
 
-.transaction-name {
-    width: 50%;
-}
-
 .no-border-table tr {
     border: none;
 }
@@ -524,6 +520,14 @@ 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) {
@@ -543,6 +547,14 @@ 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

@@ -23,8 +23,12 @@
     width: 90%;
 }
 
-.transaction-container .responsive-table td {
-    text-align: center;
+.transaction-name {
+    width: 50%;
+}
+
+.transaction-table-cell {
+    text-align: left;
 }
 
 .transaction-container .category-circle-small {

src/main/resources/templates/transactions/transactions.ftl

@@ -54,7 +54,7 @@
                             <table class="bordered responsive-table">
                                 <#list transactions as transaction>
                                     <tr>
-                                        <td>${helpers.getDateStringWithoutYear(transaction.date)}</td>
+                                        <td class="transaction-table-cell">${helpers.getDateStringWithoutYear(transaction.date)}</td>
                                         <@transactionsMacros.transactionRepeating transaction/>
                                         <@transactionsMacros.transactionCategory transaction/>
                                         <@transactionsMacros.transactionNameAndDescription transaction/>

src/main/resources/templates/transactions/transactionsMacros.ftl

 <#import "/spring.ftl" as s>
 
 <#macro transactionRepeating transaction>
-    <td>
+    <td class="transaction-table-cell">
         <i class="material-icons <#if !transaction.isRepeating()>invisible</#if>">repeat</i>
     </td>
 </#macro>
@@ -26,7 +26,7 @@
 </#macro>
 
 <#macro transactionNameAndDescription transaction>
-    <td class="transaction-name">
+    <td class="transaction-name transaction-table-cell">
         <div class="ellipsis">${transaction.name}</div>
         <div class="hide-on-med-and-down">
             <#if transaction.description??>
@@ -38,14 +38,14 @@
 
 <#macro transactionAmount amount>
     <#if amount <= 0>
-        <td class="bold ${redTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td>
+        <td class="transaction-table-cell bold ${redTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td>
     <#else>
-        <td class="bold ${greenTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td>
+        <td class="transaction-table-cell bold ${greenTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td>
     </#if>
 </#macro>
 
 <#macro transactionButtons transaction>
-    <td>
+    <td class="transaction-table-cell">
         <#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>