diff --git a/backend/static/css/styles.css b/backend/static/css/styles.css index 6b7450fd..8dfc9b6b 100644 --- a/backend/static/css/styles.css +++ b/backend/static/css/styles.css @@ -214,3 +214,26 @@ body:after, body:before { color: #fff; } +#diff-col { + padding-left:40px; +} +#diff-jump { + position: fixed; + left: 0px; + top: 80px; + background: #fff; + padding: 10px; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + box-shadow: 5px 0 5px -2px #888; +} + +#diff-jump a { + color: #1b98f8; + cursor: grabbing; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select:none; + user-select:none; + -o-user-select:none; +} diff --git a/backend/templates/diff.html b/backend/templates/diff.html index 5bd25148..a5527811 100644 --- a/backend/templates/diff.html +++ b/backend/templates/diff.html @@ -32,6 +32,9 @@ Inserted Text +
+ | @@ -72,9 +75,12 @@ function changed() { var node; if (diff[i].removed) { node = document.createElement('del'); + node.classList.add("change"); node.appendChild(document.createTextNode(diff[i].value)); + } else if (diff[i].added) { node = document.createElement('ins'); + node.classList.add("change"); node.appendChild(document.createTextNode(diff[i].value)); } else { node = document.createTextNode(diff[i].value); @@ -131,7 +137,26 @@ for (var i = 0; i < radio.length; i++) { } +var inputs = document.getElementsByClassName('change'); +inputs.current=0; + +function next_diff() { + + var element = inputs[inputs.current]; + var headerOffset = 80; + var elementPosition = element.getBoundingClientRect().top; + var offsetPosition = elementPosition - headerOffset + window.scrollY; + window.scrollTo({ + top: offsetPosition, + behavior: "smooth" + }); + + inputs.current++; + if(inputs.current >= inputs.length) { + inputs.current=0; + } +} |