Update download page

[vogella]

The current download page looks IMHO dated. I suggest to modernize it, and will make suggestions for that.

Current L&F

Overview (Landing page):

Details for a build:

[vogella]

Here is a description of the suggested changes:

  - Theme: CSS-variable palette with Eclipse-blue accent, automatic dark mode.
  - Typography: Inter body, JetBrains Mono code.
  - Tables: card style, larger bolder headers, accent hover.
  - Details & dialogs: card shape, chevron summary, gradient-stripe popup with round close button.
  - Info icon: now the system "ℹ️ " emoji.
  - Polish: consistent radii, smooth hover transitions, visible focus rings.

So if the browser is set to dark we get:

If the browser is in default mode it looks like:

@HannesWell @BeckerWdf WDYT?

[vogella]

Test page old:

Test page new:

The details test page is using an xls transformation and would require a separate change (not only CSS update).

Details test page today:

Example how it could look like:

[HannesWell]

The current download page looks IMHO dated. I suggest to modernize it, and will make suggestions for that.

I hope not as outdated as before last autumn, like in the 4.38 release or before.
But yes, when I reworked the page end of last year, my main focus was the underlaying techniques, especially getting rid of PHP. The styling was only secondary and I considered the current state acceptable.
However I expected subsequent follow-up improvements and since improving the maintainability was an other primary goal, I'm glad that I'm not the only one understanding the sites.

@HannesWell WDYT?

Overall I like it. I suggest you create a PR with your proposed changes so that everyone interested can try it out locally as described in
https://github.com/eclipse-platform/eclipse.platform.releng.aggregator/blob/e754f412a025a636a9740d14adb8fdf9e0bfa735/sites/eclipse/README.md

Generally I tried to keep the new sites as simple as possible. Of course there is some complexity in it, but e.g. for styling I'd avoid adding significantly more. Also I tried to make the site as responsiveness and and quick loading as possible and therefore avoided (large) dependencies as far as possible.

• Info icon: now the system "ℹ️ " emoji.

I'm not very happy with the current info icon because it looks differently on each OS (and IMO some look good and some not). When using emojis the exact look is again system dependent and the emojis often look comic-like (at least on Windows) and that doesn't seem very professional to me.
On the other hand using pre-defined icons like the ones from fontawesome has the drawback that they need a short time longer to load and the page therefore 'flickers' and the icon I'd like to use the most isn't free:

• https://fontawesome.com/icons/classic/regular/circle-info
• https://fontawesome.com/icons/classic/solid/info would be a free alternative
• https://fontawesome.com/icons/classic/solid/circle-info would be a free alternative

to have a consistent look we could provide an svg with the icon we like, but that could again increase the load time of the page if it's not sufficiently small.

If the browser is in default mode it looks like:

In the latest browser section of that image, it looks like the latest I-build is specifically high-lighted. Is that intentional or is it just a mouse hover? If it's the former, I'd think it should be reversed and the latest release should be highlighted over latest milestone and latest I-build.

The details test page is using an xls transformation and would require a separate change (not only CSS update).

For the test details, please see

• Inline detailed I/Y-build test results into test overview at build reports page #3747

I have the intention to implement that in the not too distant future, which makes the XLST obsolete and the details just inherit the style of reports page. Therefore I'd leave that part as it is for now, to avoid unnecessary work/reviews etc.

[merks]

A suggestion on the tone used to present constructive suggestions...

When I read this:

The current download page looks IMHO dated. I suggest to modernize it, and will make suggestions for that.

I summarize that mentally as "your design is old, crappy, and not modern so I am here with modern design to fix that".

One might instead say something like this:

It's great to see that the download pages have been structured purely using html, css, and javascript which is so much more flexible and maintainable going forward. I have some ideas how we might make it even nicer, and even to support dark theme.

That might be mentally summarized as "I like what you've done and I have some ideas to leverage the improved design with some styling ideas." I.e., it's a statement purely focused on a constructive suggestion, avoiding to hack down something first.

Yes, it's a small thing, but humans are driven by small niceties.

[vogella]

@HannesWell thanks for the feedback.

The row-highlight is just a hover state in the screenshot, no code change needed there.

I also disliked the info icon and with your suggestion (using fa-solid fa-circle-info) it looks much nicer IMHO.

PR coming so that interested parties can try it out.