Make the scoreboard summary sticky

[vmcj]

Before I fully fix the PR I would like to know if we want this.
The reason I like it is that the summary per sortorder is now properly used and when scrolling the scoreboard you get all the relevant information directly.

Current problems still:

• Rewrite the commit messages to make sense
• Move everything out of inline style into dynamic internal <style>
• due to the display: relative the background jumps over the border (probably together with the border collapse) so we should use shadows as border & shadow misalign on 1px (a shadow can not fall with at 12 o'clock )

[meisterT]

In general I like it on my large screen. If I shrink it to mobile view with Chrome developer tools it is appearing some time in the middle of scrolling down the scoreboard though - not sure if this is also happening on real devices.

Also I wonder whether we can somehow visually indicate in a nice way that there is more stuff behind the sticky part?

[vmcj]

In general I like it on my large screen. If I shrink it to mobile view with Chrome developer tools it is appearing some time in the middle of scrolling down the scoreboard though - not sure if this is also happening on real devices.

That could be desired behaviour, we have a summary per sortorder so it should stick keep with its part of the table. Another sticky part should than come up for the next sortorder though.

Also I wonder whether we can somehow visually indicate in a nice way that there is more stuff behind the sticky part?

I think technically I can with CSS indicate that, the only question is how.

[meisterT]

I only had one sortorder and had to scroll down ~1 screen to make the sticky part appear.

[vmcj]

I only had one sortorder and had to scroll down ~1 screen to make the sticky part appear.

Than I'll investigate, the PR was only as a quick demo if we would want this.

[vmcj]

Also I wonder whether we can somehow visually indicate in a nice way that there is more stuff behind the sticky part?

I think technically I can with CSS indicate that, the only question is how.

https://codepen.io/TomAnthony/pen/qBqgErK is the best thing, https://stackoverflow.com/a/25312347 explains why this is very hard to achieve.

[vmcj]

I only had one sortorder and had to scroll down ~1 screen to make the sticky part appear.

Checking on my android the header row is also not sticky, I assume you're on android also? The easiest fix would be to not apply this specific styling on phones.

[meisterT]

I didn't try it on an actual phone but with the device toolbar of the chrome dev extensions.

[vmcj]

Verified on phone (FF+Android) and it seems to work, works on an older iPhone.

If approved I'll squash this.

[meisterT]

In Chrome / Desktop it does work. In Chrome / Desktop with developer tools set to mobile devices it doesn't work (regardless of the device). In Firefox / Desktop it doesn't work either for me. In Firefox / Desktop with developer tools it also doesn't work.

[vmcj]

In Chrome / Desktop it does work. In Chrome / Desktop with developer tools set to mobile devices it doesn't work (regardless of the device). In Firefox / Desktop it doesn't work either for me. In Firefox / Desktop with developer tools it also doesn't work.

I can't reproduce this.

My PR doesn't add anything for phones/small screens as there the sticky header also doesn't work (and is left for a future PR). For me it works in chromium & firefox (both on desktop).