From 6011e56a0cf03e8b5449808ce6e3bde89c476f62 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 13 Oct 2024 21:04:09 +0200
Subject: [PATCH] #770 - fix misaligned styling of datatable in csv import
---
.../static/css/transactionImport.css | 28 +++++++++++--------
.../resources/static/js/transactionImport.js | 20 ++++++++++---
.../transactions/transactionImportMacros.ftl | 16 ++++++-----
3 files changed, 41 insertions(+), 23 deletions(-)
diff --git a/BudgetMasterServer/src/main/resources/static/css/transactionImport.css b/BudgetMasterServer/src/main/resources/static/css/transactionImport.css
index 5a298f838..d7e7b0d4c 100644
--- a/BudgetMasterServer/src/main/resources/static/css/transactionImport.css
+++ b/BudgetMasterServer/src/main/resources/static/css/transactionImport.css
@@ -24,6 +24,10 @@
opacity: 0.5;
}
+#table-transaction-rows tr {
+ border-bottom: none !important;
+}
+
#table-transaction-rows td {
padding: 5px;
}
@@ -33,10 +37,10 @@
margin: auto;
}
-#table-transaction-rows_filter input {
- height: 1rem;
- border: none;
- border-radius: 0;
+.dt-search input[type=search] {
+ height: 1rem !important;
+ border: none !important;
+ border-radius: 0 !important;
}
/* override custom select styling*/
@@ -57,30 +61,30 @@
}
/* label focus color */
-#table-transaction-rows_filter input[type=search]:focus + label {
+.dt-search input[type=search]:focus + label {
color: var(--color-blue) !important;
}
/* label underline focus color */
-#table-transaction-rows_filter input[type=search]:focus:not(.invalid) {
+.dt-search input[type=search]:focus:not(.invalid) {
border-bottom: 1px solid var(--color-blue) !important;
box-shadow: 0 1px 0 0 #CCCCCC !important;
}
/* input text color */
-[data-theme="dark"] #table-transaction-rows_filter input[type=search] {
- color: var(--color-white);
- border-bottom: 1px solid var(--color-white);
- box-shadow: 0 1px 0 0 #CCCCCC;
+[data-theme="dark"] .dt-search input[type=search] {
+ color: var(--color-white) !important;
+ border-bottom: 1px solid var(--color-white) !important;
+ box-shadow: 0 1px 0 0 #CCCCCC !important;
}
/* input label color */
-[data-theme="dark"] #table-transaction-rows_filter input[type=search] + label {
+[data-theme="dark"] .dt-search input[type=search] + label {
color: var(--color-white) !important;
}
/* label underline focus color */
-[data-theme="dark"] #table-transaction-rows_filter input[type=search]:focus:not(.invalid) {
+[data-theme="dark"] .dt-search input[type=search]:focus:not(.invalid) {
border-bottom: 1px solid var(--color-blue) !important;
box-shadow: 0 1px 0 0 var(--color-blue) !important;
}
\ No newline at end of file
diff --git a/BudgetMasterServer/src/main/resources/static/js/transactionImport.js b/BudgetMasterServer/src/main/resources/static/js/transactionImport.js
index 17d879e29..251e89c1a 100644
--- a/BudgetMasterServer/src/main/resources/static/js/transactionImport.js
+++ b/BudgetMasterServer/src/main/resources/static/js/transactionImport.js
@@ -7,16 +7,25 @@ $(document).ready(function()
$('.collapsible').collapsible();
+ DataTable.type('date', 'className', 'dt-center');
$('#table-transaction-rows').DataTable({
paging: false,
- order: [[2, 'desc']],
+ order: [[1, 'desc']],
info: false,
scrollX: true,
scrollY: false,
columnDefs: [
- { orderable: false, targets: 6}
+ {
+ className: "dt-head-center",
+ targets: [0, 1, 3, 4, 6]
+ },
+ {
+ // amount column
+ orderable: false,
+ targets: 5
+ }
],
- language: { search: '' , searchPlaceholder: localizedSearch},
+ language: {search: '', searchPlaceholder: localizedSearch},
});
if(transactionNameSuggestions !== undefined)
@@ -24,7 +33,10 @@ $(document).ready(function()
let nameElements = document.querySelectorAll('.autocomplete');
let autoCompleteInstances = M.Autocomplete.init(nameElements, {
data: transactionNameSuggestions,
- sortFunction: function(a,b, inputString) {return false;}
+ sortFunction: function(a, b, inputString)
+ {
+ return false;
+ }
});
// prevent tab traversal for dropdown (otherwise "tab" needs to be hit twice to jump from name input to amount input)
diff --git a/BudgetMasterServer/src/main/resources/templates/transactions/transactionImportMacros.ftl b/BudgetMasterServer/src/main/resources/templates/transactions/transactionImportMacros.ftl
index fa1b64a64..da4773f61 100644
--- a/BudgetMasterServer/src/main/resources/templates/transactions/transactionImportMacros.ftl
+++ b/BudgetMasterServer/src/main/resources/templates/transactions/transactionImportMacros.ftl
@@ -167,10 +167,9 @@
<#macro renderCsvTransactions>
<div id="transaction-import-list">
- <table class="bordered centered" id="table-transaction-rows" style="width:100%">
+ <table class="centered" id="table-transaction-rows" style="width:100%">
<thead>
<tr>
- <td class="hidden"></td>
<td class="bold">${locale.getString("transactions.import.status")}</td>
<td class="bold">${locale.getString("transaction.new.label.date")}</td>
<td class="bold">${locale.getString("transaction.new.label.category")}</td>
@@ -187,6 +186,14 @@
</#list>
</tbody>
</table>
+
+ <div class="hidden">
+ <#list csvTransactions as csvTransaction>
+ <form name="NewTransactionInPlace" id="newTransactionInPlace_${csvTransaction?index}" method="POST" action="<@s.url '/transactionImport/' + csvTransaction?index + '/newTransactionInPlace'/>" data-index="${csvTransaction?index}">
+ <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+ </form>
+ </#list>
+ </div>
</div>
<@newTransactionMacros.insertNameSuggestions/>
@@ -194,11 +201,6 @@
<#macro renderCsvTransaction csvTransaction index>
<tr class="transaction-import-row <#if csvTransaction.getStatus().name() == 'SKIPPED'>transaction-import-row-skipped</#if>" id="transaction-import-row-${index}">
- <td class="hidden">
- <form name="NewTransactionInPlace" id="newTransactionInPlace_${index}" method="POST" action="<@s.url '/transactionImport/' + index + '/newTransactionInPlace'/>" data-index="${index}">
- <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
- </form>
- </td>
<td data-order="${locale.getString(csvTransaction.getStatus().getLocalizationKey())}" data-search="${locale.getString(csvTransaction.getStatus().getLocalizationKey())}"><@statusBanner csvTransaction.getStatus()/></td>
<td data-order="${csvTransaction.getDate()}" data-search="${csvTransaction.getDate()}">${csvTransaction.getDate()}</td>
<td data-order="${csvTransaction.getCategory().getName()}" data-search="${csvTransaction.getCategory().getName()}">
--
GitLab