diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css index b684064ff0c580f1c5b4e0cb50cf737e4a9e0fb3..df656ce1b9ed7685c2d1ce4163413aa793cd5161 100644 --- a/src/main/resources/static/css/dark/style.css +++ b/src/main/resources/static/css/dark/style.css @@ -493,7 +493,7 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) + margin: auto } -.btn-flat { +.btn-flat, .btn { text-overflow: ellipsis; white-space: nowrap; } @@ -563,10 +563,6 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) + width: 17vmin; } -.ellipsis { - text-overflow: ellipsis; -} - .no-wrap { white-space: nowrap; } @@ -607,14 +603,6 @@ 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) { @@ -634,14 +622,6 @@ 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 322bd080a0012914f7b6cced7ff8bb3afe8e0f54..6a8f76d0ba26d9c74f5d06082c094d0764939584 100644 --- a/src/main/resources/static/css/dark/transactions.css +++ b/src/main/resources/static/css/dark/transactions.css @@ -23,14 +23,21 @@ width: 90%; } -.transaction-name { - width: 50%; +.transaction-container .category-circle, +.transaction-container .category-circle-small{ + margin: auto; } -.transaction-table-cell { - text-align: left; +.transaction-row { + margin-bottom: 5px; + margin-top: 20px; } -.transaction-container .category-circle-small { - margin: auto; +.transaction-text { + font-size: 1.2rem; +} + +.transaction-buttons .btn-flat { + height: auto; + line-height: inherit; } \ 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 e0c829d231ceeec77ede344582f30786503f13a8..f3a920e75a2a93d199cfd080b964332c1ec9b0ac 100644 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -420,7 +420,7 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa margin: auto } -.btn-flat { +.btn-flat, .btn { text-overflow: ellipsis; white-space: nowrap; } @@ -476,10 +476,6 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa border-bottom: 1px solid #212121; } -.ellipsis { - text-overflow: ellipsis; -} - .no-wrap { white-space: nowrap; } @@ -520,14 +516,6 @@ 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) { @@ -547,14 +535,6 @@ 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 322bd080a0012914f7b6cced7ff8bb3afe8e0f54..6a8f76d0ba26d9c74f5d06082c094d0764939584 100644 --- a/src/main/resources/static/css/transactions.css +++ b/src/main/resources/static/css/transactions.css @@ -23,14 +23,21 @@ width: 90%; } -.transaction-name { - width: 50%; +.transaction-container .category-circle, +.transaction-container .category-circle-small{ + margin: auto; } -.transaction-table-cell { - text-align: left; +.transaction-row { + margin-bottom: 5px; + margin-top: 20px; } -.transaction-container .category-circle-small { - margin: auto; +.transaction-text { + font-size: 1.2rem; +} + +.transaction-buttons .btn-flat { + height: auto; + line-height: inherit; } \ 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 a93ccc2ec78be41fc2519fd3afa4abfc2fce584a..50fc52389d962ee03587a1059d42ecfae653d191 100644 --- a/src/main/resources/templates/transactions/transactions.ftl +++ b/src/main/resources/templates/transactions/transactions.ftl @@ -49,22 +49,21 @@ <#-- transactions list --> <br> - <div class="row"> - <div class="col s12"> - <table class="bordered responsive-table"> - <#list transactions as transaction> - <tr> - <td class="transaction-table-cell">${helpers.getDateStringWithoutYear(transaction.date)}</td> - <@transactionsMacros.transactionRepeating transaction/> - <@transactionsMacros.transactionCategory transaction/> - <@transactionsMacros.transactionNameAndDescription transaction/> - <@transactionsMacros.transactionAmount transaction.getAmount()/> - <@transactionsMacros.transactionButtons transaction/> - </tr> - </#list> - </table> + <#list transactions as transaction> + <div class="row valign-wrapper transaction-row"> + <div class="col s3 l1 center-align bold transaction-text"> + ${helpers.getDateStringWithoutYear(transaction.date)} + </div> + <@transactionsMacros.transactionRepeating transaction/> + <@transactionsMacros.transactionButtons transaction/> </div> - </div> + <div class="row valign-wrapper"> + <@transactionsMacros.transactionCategory transaction/> + <@transactionsMacros.transactionNameAndDescription transaction/> + <@transactionsMacros.transactionAmount transaction.getAmount()/> + </div> + <hr> + </#list> <#-- show placeholde text if no transactions are present in the current month or REST ist the only transaction --> <@transactionsMacros.placeholder transactions/> diff --git a/src/main/resources/templates/transactions/transactionsMacros.ftl b/src/main/resources/templates/transactions/transactionsMacros.ftl index c57e6576886b07e204e2f1c6c0328e5e2f6f951e..515e75598b240a02c8f980d4fc2d2c09830aa772 100644 --- a/src/main/resources/templates/transactions/transactionsMacros.ftl +++ b/src/main/resources/templates/transactions/transactionsMacros.ftl @@ -1,13 +1,13 @@ <#import "/spring.ftl" as s> <#macro transactionRepeating transaction> - <td class="transaction-table-cell"> + <div class="col s1 l1"> <i class="material-icons <#if !transaction.isRepeating()>invisible</#if>">repeat</i> - </td> + </div> </#macro> <#macro transactionCategory transaction> - <td> + <div class="col s3 l1 center-align"> <div class="hide-on-med-and-down"> <div class="category-circle" style="background-color: ${transaction.category.color}"> <span style="color: ${transaction.category.getAppropriateTextColor()}"> @@ -22,35 +22,35 @@ </span> </div> </div> - </td> + </div> </#macro> <#macro transactionNameAndDescription transaction> - <td class="transaction-name transaction-table-cell"> - <div class="ellipsis">${transaction.name}</div> + <div class="col s5 l7"> + <div class="truncate transaction-text">${transaction.name}</div> <div class="hide-on-med-and-down"> <#if transaction.description??> <div class="italic">${transaction.description}</div> </#if> </div> - </td> + </div> </#macro> <#macro transactionAmount amount> <#if amount <= 0> - <td class="transaction-table-cell bold ${redTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td> + <div class="col s4 bold ${redTextColor} no-wrap right-align transaction-text">${helpers.getCurrencyString(amount)}</div> <#else> - <td class="transaction-table-cell bold ${greenTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td> + <div class="col s4 bold ${greenTextColor} no-wrap right-align transaction-text">${helpers.getCurrencyString(amount)}</div> </#if> </#macro> <#macro transactionButtons transaction> - <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> - </#if> - </td> + <div class="col s8 l10 right-align transaction-buttons"> + <#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 no-margin">delete</i></a> + </#if> + </div> </#macro> <#macro placeholder transactions>