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