From 2618986b621e2bfc73a819460e1505a80046656f Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sat, 16 Mar 2019 12:39:32 +0100
Subject: [PATCH] #401 - correctly center text

---
 src/main/resources/static/css/dark/style.css  | 20 +++++++++++++++----
 .../static/css/dark/transactions.css          |  8 ++++++--
 src/main/resources/static/css/style.css       | 20 +++++++++++++++----
 .../resources/static/css/transactions.css     |  8 ++++++--
 .../templates/transactions/transactions.ftl   |  2 +-
 .../transactions/transactionsMacros.ftl       | 10 +++++-----
 6 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css
index bb27ce782..b684064ff 100644
--- a/src/main/resources/static/css/dark/style.css
+++ b/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 {
diff --git a/src/main/resources/static/css/dark/transactions.css b/src/main/resources/static/css/dark/transactions.css
index 4e71f6f44..322bd080a 100644
--- a/src/main/resources/static/css/dark/transactions.css
+++ b/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 {
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index dc8a45c89..e0c829d23 100644
--- a/src/main/resources/static/css/style.css
+++ b/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 {
diff --git a/src/main/resources/static/css/transactions.css b/src/main/resources/static/css/transactions.css
index 4e71f6f44..322bd080a 100644
--- a/src/main/resources/static/css/transactions.css
+++ b/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 {
diff --git a/src/main/resources/templates/transactions/transactions.ftl b/src/main/resources/templates/transactions/transactions.ftl
index ace6e2dc1..a93ccc2ec 100644
--- a/src/main/resources/templates/transactions/transactions.ftl
+++ b/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/>
diff --git a/src/main/resources/templates/transactions/transactionsMacros.ftl b/src/main/resources/templates/transactions/transactionsMacros.ftl
index a3b9ba1f3..c57e65768 100644
--- a/src/main/resources/templates/transactions/transactionsMacros.ftl
+++ b/src/main/resources/templates/transactions/transactionsMacros.ftl
@@ -1,7 +1,7 @@
 <#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>
-- 
GitLab