Skip to content
Snippets Groups Projects
Commit 7009d0ab authored by Robert Goldmann's avatar Robert Goldmann
Browse files

#401 - ban amount text wrap; improved width usage (shorter date, hide description in small, etc.)

parent 7d879080
Branches
Tags
No related merge requests found
Pipeline #897 passed
...@@ -110,6 +110,11 @@ public class HelpersService ...@@ -110,6 +110,11 @@ public class HelpersService
return date.toString(DateTimeFormat.forPattern("dd.MM.yy").withLocale(settingsRepository.findOne(0).getLanguage().getLocale())); 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) public String getLongDateString(DateTime date)
{ {
return date.toString(DateTimeFormat.forPattern("dd.MM.yyyy").withLocale(settingsRepository.findOne(0).getLanguage().getLocale())); return date.toString(DateTimeFormat.forPattern("dd.MM.yyyy").withLocale(settingsRepository.findOne(0).getLanguage().getLocale()));
......
...@@ -567,6 +567,14 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) + ...@@ -567,6 +567,14 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
width: 17vmin; width: 17vmin;
} }
.ellipsis {
text-overflow: ellipsis;
}
.no-wrap {
white-space: nowrap;
}
.hidden { .hidden {
display: none; display: none;
} }
...@@ -614,6 +622,10 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) + ...@@ -614,6 +622,10 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
.budget { .budget {
font-size: 3.8vmin; font-size: 3.8vmin;
} }
.container, .transaction-container {
width: 100% !important;
}
} }
.debug { .debug {
......
...@@ -18,3 +18,7 @@ ...@@ -18,3 +18,7 @@
.input-min-width { .input-min-width {
min-width: 100px; min-width: 100px;
} }
.transaction-container {
width: 90%;
}
\ No newline at end of file
...@@ -480,6 +480,14 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa ...@@ -480,6 +480,14 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
border-bottom: 1px solid #212121; border-bottom: 1px solid #212121;
} }
.ellipsis {
text-overflow: ellipsis;
}
.no-wrap {
white-space: nowrap;
}
.hidden { .hidden {
display: none; display: none;
} }
...@@ -527,6 +535,10 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa ...@@ -527,6 +535,10 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
.budget { .budget {
font-size: 3.8vmin; font-size: 3.8vmin;
} }
.container, .transaction-container {
width: 100% !important;
}
} }
.debug { .debug {
......
...@@ -18,3 +18,7 @@ ...@@ -18,3 +18,7 @@
.input-min-width { .input-min-width {
min-width: 100px; min-width: 100px;
} }
.transaction-container {
width: 90%;
}
\ No newline at end of file
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<#import "../helpers/header.ftl" as header> <#import "../helpers/header.ftl" as header>
<@header.header "BudgetMaster"/> <@header.header "BudgetMaster"/>
<@header.style "categories"/> <@header.style "categories"/>
<@header.style "transactions"/>
<@header.style "globalDatepicker"/> <@header.style "globalDatepicker"/>
<@header.style "filter"/> <@header.style "filter"/>
<#import "/spring.ftl" as s> <#import "/spring.ftl" as s>
...@@ -18,7 +19,7 @@ ...@@ -18,7 +19,7 @@
<div class="card main-card background-color"> <div class="card main-card background-color">
<#import "../helpers/globalDatePicker.ftl" as datePicker> <#import "../helpers/globalDatePicker.ftl" as datePicker>
<@datePicker.datePicker currentDate springMacroRequestContext.getRequestUri()/> <@datePicker.datePicker currentDate springMacroRequestContext.getRequestUri()/>
<div class="container"> <div class="container transaction-container">
<div class="row"> <div class="row">
<div class="col s4"> <div class="col s4">
<div class="icon-block"> <div class="icon-block">
...@@ -53,7 +54,7 @@ ...@@ -53,7 +54,7 @@
<table class="bordered"> <table class="bordered">
<#list transactions as transaction> <#list transactions as transaction>
<tr> <tr>
<td>${helpers.getDateString(transaction.date)}</td> <td>${helpers.getDateStringWithoutYear(transaction.date)}</td>
<@transactionsMacros.transactionRepeating transaction/> <@transactionsMacros.transactionRepeating transaction/>
<@transactionsMacros.transactionCategory transaction/> <@transactionsMacros.transactionCategory transaction/>
<@transactionsMacros.transactionNameAndDescription transaction/> <@transactionsMacros.transactionNameAndDescription transaction/>
......
...@@ -8,28 +8,39 @@ ...@@ -8,28 +8,39 @@
<#macro transactionCategory transaction> <#macro transactionCategory transaction>
<td> <td>
<div class="hide-on-med-and-down">
<div class="category-circle" style="background-color: ${transaction.category.color}"> <div class="category-circle" style="background-color: ${transaction.category.color}">
<span style="color: ${transaction.category.getAppropriateTextColor()}"> <span style="color: ${transaction.category.getAppropriateTextColor()}">
${transaction.category.name?capitalize[0]} ${transaction.category.name?capitalize[0]}
</span> </span>
</div> </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> </td>
</#macro> </#macro>
<#macro transactionNameAndDescription transaction> <#macro transactionNameAndDescription transaction>
<td class="transaction-name"> <td class="transaction-name">
<div>${transaction.name}</div> <div class="ellipsis">${transaction.name}</div>
<div class="hide-on-small-only">
<#if transaction.description??> <#if transaction.description??>
<div class="italic">${transaction.description}</div> <div class="italic">${transaction.description}</div>
</#if> </#if>
</div>
</td> </td>
</#macro> </#macro>
<#macro transactionAmount amount> <#macro transactionAmount amount>
<#if amount <= 0> <#if amount <= 0>
<td class="bold ${redTextColor}">${helpers.getCurrencyString(amount)}</td> <td class="bold ${redTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td>
<#else> <#else>
<td class="bold ${greenTextColor}">${helpers.getCurrencyString(amount)}</td> <td class="bold ${greenTextColor} no-wrap">${helpers.getCurrencyString(amount)}</td>
</#if> </#if>
</#macro> </#macro>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment