diff --git a/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java b/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java index 616d08ca57e019ad2653fbe91e502ba29ef353c7..f02ba7ec12eb1f2f5033927b4b1d6c9ea36382c5 100644 --- a/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java +++ b/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java @@ -110,6 +110,11 @@ public class HelpersService return date.toString(DateTimeFormat.forPattern("dd.MM.yy").withLocale(settingsRepository.findOne(0).getLanguage().getLocale())); } + public String getDateStringWithoutYear(DateTime date) + { + return date.toString(DateTimeFormat.forPattern("dd.MM.").withLocale(settingsRepository.findOne(0).getLanguage().getLocale())); + } + public String getLongDateString(DateTime date) { return date.toString(DateTimeFormat.forPattern("dd.MM.yyyy").withLocale(settingsRepository.findOne(0).getLanguage().getLocale())); diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css index ce973ef396d7788c9eaaca57bf61e91ca8574505..1656c663b5db6c10e438fecefd3881b79a7c5a6a 100644 --- a/src/main/resources/static/css/dark/style.css +++ b/src/main/resources/static/css/dark/style.css @@ -567,6 +567,14 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) + width: 17vmin; } +.ellipsis { + text-overflow: ellipsis; +} + +.no-wrap { + white-space: nowrap; +} + .hidden { display: none; } @@ -614,6 +622,10 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) + .budget { font-size: 3.8vmin; } + + .container, .transaction-container { + 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 ad26abf52baed08cc90d4050c0b5159d928bae6a..94283e85690a33678ff227ecd22f270aadbe534b 100644 --- a/src/main/resources/static/css/dark/transactions.css +++ b/src/main/resources/static/css/dark/transactions.css @@ -17,4 +17,8 @@ .input-min-width { min-width: 100px; +} + +.transaction-container { + width: 90%; } \ 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 370e57e59cd59fed2f9c47d181de9494dfed607f..fe9549e2270d6eea9e31ca68945c3610ab3e3626 100644 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -480,6 +480,14 @@ 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; +} + .hidden { display: none; } @@ -527,6 +535,10 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa .budget { font-size: 3.8vmin; } + + .container, .transaction-container { + width: 100% !important; + } } .debug { diff --git a/src/main/resources/static/css/transactions.css b/src/main/resources/static/css/transactions.css index ad26abf52baed08cc90d4050c0b5159d928bae6a..94283e85690a33678ff227ecd22f270aadbe534b 100644 --- a/src/main/resources/static/css/transactions.css +++ b/src/main/resources/static/css/transactions.css @@ -17,4 +17,8 @@ .input-min-width { min-width: 100px; +} + +.transaction-container { + width: 90%; } \ 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 ec9e72a8403d3bb98be06a0b0564ae661c52a75c..2badbf83b70a1fea15205f272f47ba58b756e8d5 100644 --- a/src/main/resources/templates/transactions/transactions.ftl +++ b/src/main/resources/templates/transactions/transactions.ftl @@ -3,6 +3,7 @@ <#import "../helpers/header.ftl" as header> <@header.header "BudgetMaster"/> <@header.style "categories"/> + <@header.style "transactions"/> <@header.style "globalDatepicker"/> <@header.style "filter"/> <#import "/spring.ftl" as s> @@ -18,7 +19,7 @@ <div class="card main-card background-color"> <#import "../helpers/globalDatePicker.ftl" as datePicker> <@datePicker.datePicker currentDate springMacroRequestContext.getRequestUri()/> - <div class="container"> + <div class="container transaction-container"> <div class="row"> <div class="col s4"> <div class="icon-block"> @@ -53,7 +54,7 @@ <table class="bordered"> <#list transactions as transaction> <tr> - <td>${helpers.getDateString(transaction.date)}</td> + <td>${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 284c3c83ce5d90eafc6b83869b439dca9a124bcf..54cd7260a1de09a1d454c48ab8de32c50de94f9b 100644 --- a/src/main/resources/templates/transactions/transactionsMacros.ftl +++ b/src/main/resources/templates/transactions/transactionsMacros.ftl @@ -8,28 +8,39 @@ <#macro transactionCategory transaction> <td> - <div class="category-circle" style="background-color: ${transaction.category.color}"> - <span style="color: ${transaction.category.getAppropriateTextColor()}"> - ${transaction.category.name?capitalize[0]} - </span> + <div class="hide-on-med-and-down"> + <div class="category-circle" style="background-color: ${transaction.category.color}"> + <span style="color: ${transaction.category.getAppropriateTextColor()}"> + ${transaction.category.name?capitalize[0]} + </span> + </div> + </div> + <div class="hide-on-large-only"> + <div class="category-circle-small no-margin" style="background-color: ${transaction.category.color}"> + <span style="color: ${transaction.category.getAppropriateTextColor()}"> + ${transaction.category.name?capitalize[0]} + </span> + </div> </div> </td> </#macro> <#macro transactionNameAndDescription transaction> <td class="transaction-name"> - <div>${transaction.name}</div> - <#if transaction.description??> - <div class="italic">${transaction.description}</div> - </#if> + <div class="ellipsis">${transaction.name}</div> + <div class="hide-on-small-only"> + <#if transaction.description??> + <div class="italic">${transaction.description}</div> + </#if> + </div> </td> </#macro> <#macro transactionAmount amount> <#if amount <= 0> - <td class="bold ${redTextColor}">${helpers.getCurrencyString(amount)}</td> + <td class="bold ${redTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td> <#else> - <td class="bold ${greenTextColor}">${helpers.getCurrencyString(amount)}</td> + <td class="bold ${greenTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td> </#if> </#macro>