diff --git a/src/main/resources/static/js/transactions.js b/src/main/resources/static/js/transactions.js index 21a2a64135c5d88784ce1391b72df49ab7f3f5d7..090a50dd16c5907caee80ee0b955949ecdee9ec6 100644 --- a/src/main/resources/static/js/transactions.js +++ b/src/main/resources/static/js/transactions.js @@ -181,8 +181,29 @@ $( document ).ready(function() { direction: 'bottom', hoverEnabled: false }); + + // scroll to highlighted transaction + var highlightedSmall = document.getElementById("highlighted-small"); + var highlightedLarge = document.getElementById("highlighted-large"); + if(highlightedSmall !== undefined && !isHidden(highlightedSmall)) + { + $('html, body').animate({ + scrollTop: $(highlightedSmall).offset().top + }, 500); + } + else if(highlightedLarge !== undefined && !isHidden(highlightedLarge)) + { + $('html, body').animate({ + scrollTop: $(highlightedLarge).offset().top + }, 500); + } }); +function isHidden(el) { + var style = window.getComputedStyle(el); + return (style.display === 'none' || style.display === 'none !important') +} + var transactionRepeatingModifierID = "#transaction-repeating-modifier"; var transactionRepeatingEndAfterXTimesInputID = "#transaction-repeating-end-after-x-times-input"; diff --git a/src/main/resources/templates/transactions/transactions.ftl b/src/main/resources/templates/transactions/transactions.ftl index 85eb1e6ec39ffb7c6968feb9dd187eb05ed82bee..5b0a67760a64d57aa76dfca3901d96b6cc27eb48 100644 --- a/src/main/resources/templates/transactions/transactions.ftl +++ b/src/main/resources/templates/transactions/transactions.ftl @@ -52,7 +52,7 @@ <#list transactions as transaction> <#assign shouldHighlight = highlightID?? && transaction.getID()?? && transaction.getID()==highlightID/> - <div class="hide-on-large-only transaction-row-top <#if shouldHighlight>budgetmaster-blue-light</#if>"> + <div class="hide-on-large-only transaction-row-top <#if shouldHighlight>budgetmaster-blue-light" id="highlighted-small"<#else>"</#if>> <div class="row valign-wrapper transaction-row-bottom"> <div class="col s3 center-align bold transaction-text"> ${dateService.getDateStringWithoutYear(transaction.date)} @@ -66,7 +66,7 @@ <@transactionsMacros.transactionAmount transaction account "s4"/> </div> </div> - <div class="hide-on-med-and-down transaction-row-top transaction-row-bottom <#if shouldHighlight>budgetmaster-blue-light</#if>"> + <div class="hide-on-med-and-down transaction-row-top transaction-row-bottom <#if shouldHighlight>budgetmaster-blue-light" id="highlighted-large"<#else>"</#if>> <div class="row valign-wrapper no-margin-bottom"> <div class="col l1 xl1 bold transaction-text transaction-line-height"> ${dateService.getDateStringWithoutYear(transaction.date)}