Add a mobile-friendly view of the public scoreboard

[meisterT]

The public scoreboard is probably mostly viewed on mobile devices, so a mobile-friendly view with reduced information would make sense.

I did some prototyping to check feasibility in https://github.com/DOMjudge/domjudge/commit/fbe6199364a55b413ab0eb1b84692affeea28c82

It would roughly look like this:

As the code is obviously in no shape to being merged, I am interested in feedback whether this is the right direction, whether we need to add more info, remove some more info or present it differently.

[iMylene]

Is it possible to remove the logos of institutions? Does that make the scoreboard compacter? I do miss the favorite button in this setup, maybe the button can go on the logo spot?

[nickygerritsen]

I heard from people that logo's add a touch of niceness, so not sure if that is the best move?

[meisterT]

Is it possible to remove the logos of institutions? Does that make the scoreboard compacter? I do miss the favorite button in this setup, maybe the button can go on the logo spot?

I think we could bring back the :heart: in some form

[nickygerritsen]

I did some changes locally, but can't push to your branch since there is no PR (and thus it's not allowed).

Basically I did:

• Make team names not fall of the screen by calculating their max width.
• Make non mobile scoreboard not left-aligned.
• Add a bit of margin to the header.
• Make the problem boxes right aligned.
• Change the card at the top to show 2 lines (name + contestt time) on mobile.

Screenshots:

iPhone 15 Pro Max:

iPhone 15 Pro:

Note that if you have a screen with less width than the iPhone 15, the problem boxes might not fit. Not sure if we want to handle that case.