From 7009d0ab54266a0693b0fdbfa28d6fc8755f3d06 Mon Sep 17 00:00:00 2001 From: Robert Goldmann <deadlocker@gmx.de> Date: Sat, 16 Mar 2019 11:43:36 +0100 Subject: [PATCH] #401 - ban amount text wrap; improved width usage (shorter date, hide description in small, etc.) --- .../budgetmaster/services/HelpersService.java | 5 +++ src/main/resources/static/css/dark/style.css | 12 +++++++ .../static/css/dark/transactions.css | 4 +++ src/main/resources/static/css/style.css | 12 +++++++ .../resources/static/css/transactions.css | 4 +++ .../templates/transactions/transactions.ftl | 5 +-- .../transactions/transactionsMacros.ftl | 31 +++++++++++++------ 7 files changed, 61 insertions(+), 12 deletions(-) diff --git a/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java b/src/main/java/de/deadlocker8/budgetmaster/services/HelpersService.java index 616d08ca5..f02ba7ec1 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 ce973ef39..1656c663b 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 ad26abf52..94283e856 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 370e57e59..fe9549e22 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 ad26abf52..94283e856 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 ec9e72a84..2badbf83b 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 284c3c83c..54cd7260a 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> -- GitLab