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