Fix: Sidebar height calculation

[danmichaelo]

The sidebar is a few pixels too high when the alphabetical list is active, due to the padding of the div containing the letters. This should fix it.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[codecov]

Codecov Report

Merging #1158 (826e069) into master (4a050f4) will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master    #1158   +/-   ##
=========================================
  Coverage     67.97%   67.97%           
  Complexity     1584     1584           
=========================================
  Files            32       32           
  Lines          3888     3888           
=========================================
  Hits           2643     2643           
  Misses         1245     1245           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4a050f4...826e069. Read the comment docs.

[kinow]

That's some sharp eye @danmichaelo 👏

Here's a zoomed-in view of https://dev.finto.fi/ysapaikat/en/page/Y169060?clang=fi (in XFCE/Ubuntu, ALT + Mouse scroll gives you control over monitor zoom).

Then applying your JavaScript changes locally with the following script in the browser console:

var pixels = $('.nav-tabs').outerHeight();
if ($('#sidebar > .pagination').is(':visible')) { pixels += $('.pagination').outerHeight(); }
$('.sidebar-grey').attr('style', pixels)

Worked for me on Firefox + Ubuntu. Might be good to check the other browsers perhaps, but using outerHeight sounds like the right approach, instead of using a 2px buffer 👍 (probably could use 100vh - $var too)

Bruno

[danmichaelo]

Actually I don't have that good eyes 😆 I realize that my description above was a bit brief – I forgot to mention that the problem was that the extra height causes a scrollbar on pages that should not have a scrollbar (only when using the alphabetical tab):

That the patch also removes the extra padding on the hierarchical tab was just a lucky side effect 😄

I tested the following snippet in the browser console in Firefox, Chrome and Safari on Mac now:

$('.sidebar-grey').attr('style', function() {
    var pixels = $('.nav-tabs').outerHeight() ;
    if ($('#sidebar > .pagination').is(':visible')) { pixels += $('.pagination').outerHeight(); } 
    return 'height: calc(100% - ' + pixels + 'px) !important';
});

Seems to give a tight fit on both the alphabetical and hierarchical tab 👍

[kinow]

I cannot reproduce that on Firefox or Chromium on Ubuntu, but could be happening on other platforms/browsers. (screenshot without any changes to Skosmos).

[danmichaelo]

I cannot reproduce that on Firefox or Chromium on Ubuntu, but could be happening on other platforms/browsers. (screenshot without any changes to Skosmos).

You are on the hierarchy tab, could you check if you can reproduce in on the A-Z tab? For me, it's also not a problem on the hierarchy tab.