Mercurial > kallithea
changeset 7961:34c8cb3198d8
diff: fix 2-way diff panel height
Since a jQuery upgrade in commit c225c37c069d, 2-way diff was broken: the
height was not correct, and sometimes the source code was shown in gray
boxes.
Analysis showed that in the invocation of mergely
(templates/files/diff_2way.html), '$("#footer").height()' is undefined, in
turn caused by the absence of an HTML element with id 'footer'.
In jQuery 3.0, the height function returns 'undefined' on empty sets, while
it was 'null' in older versions. This is important because in a mathematical
expression, 'null' behaves as the number 0, but 'undefined' causes a NaN
(not-a-number) result.
See: https://jquery.com/upgrade-guide/3.0/#breaking-change-return-values-on-empty-sets-are-undefined
The 'id' property on the footer was removed in commit 61c99cdbbfff,
retaining only the 'class="footer"'.
Fix the problem by using the class-based selector to get the footer height.
As the footer height will now be an actual value instead of '0' originally,
we can update the calculation without 'magic' values like '36' which was
actually a reference to the footer size.
When we initialize mergely, the page only contains the header and footer.
All window space below the footer can be assigned to the compare panes. The
height specified to mergely is thus the total window height minus the header
height (the top position of the footer) and the footer height.
Note: another change in this context is that jQuery 3.0 can now return
non-integer values for .height(), e.g. 138.0345. In the case of 2-way diff,
this is not an actual problem.
See: https://jquery.com/upgrade-guide/3.0/#breaking-change-width-height-css-quot-width-quot-and-css-quot-height-quot-can-return-non-integer-values
author | Thomas De Schampheleire <thomas.de_schampheleire@nokia.com> |
---|---|
date | Wed, 20 Nov 2019 15:12:23 +0100 |
parents | fb0417c65c64 |
children | d426fe131196 |
files | kallithea/templates/files/diff_2way.html |
diffstat | 1 files changed, 5 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/kallithea/templates/files/diff_2way.html Sat Nov 16 20:23:31 2019 +0100 +++ b/kallithea/templates/files/diff_2way.html Wed Nov 20 15:12:23 2019 +0100 @@ -67,7 +67,11 @@ $(document).ready(function () { $('#compare').mergely({ width: 'auto', - height: $(window).height() - $('#compare').offset().top - $('#footer').height() - 35, + /* let the 2 compare panes use all the window space currently available + below footer (i.e. on an empty page with just header and footer): */ + height: $(window).height() + - $('.footer').offset().top + - $('.footer').height(), fgcolor: {a:'#ddffdd',c:'#cccccc',d:'#ffdddd'}, bgcolor: '#fff', viewport: true,