New style for the homepage #4

[Swackles]

@PatafixPLTX I implemented the home page from your design, before I merge would be happy to hear your opinion on it.

[gaspard-lebaube]

I don't know why but nothing works on my end. I don't mean on the site of course ^^ but really locally... Nothing displays even in "mocked data". So I can't see the design but I trust you, the design I made is just an idea. You don't have to follow it to the letter, to do exactly the same thing. I just have a bento ui design in mind. It's just a matter of making well arranged boxes (even for buttons: filter for example).

I've got a question: I know you're using very stable versions that you must know well, but why not Preact or React/Compat ? Also, I'm not too familiar with Craco, is it a React overlay? In any case, it doesn't make things too optimized, does it ?

Edit : So all that to say: Why not Fesh (since we're under Deno) or Bun instead of Deno ?

[Swackles]

I think you're using out of date version, there should be no more option for mocked data

[gaspard-lebaube]

Ok I see the home page, but otherwise an error when uploading. You can add the DharmaGothic font! If it's royalty-free of course (or with no purchase condition).

[Swackles]

Yeah, need to add some sort of JSON validator to catch those errors. I recommend you update and re-generate one with the extractor.

For the font, I added their official font from their webkit. Dharma Gothic belongs to Adobe and don't want to deal with them.

[gaspard-lebaube]

All right, then! I'll see you in a few hours and get back to you.

[gaspard-lebaube]

Good for you! It's the right spirit in terms of design, but after that you can change a few things. The sorting buttons can be put in a "bento" container. As for the "bento" boxes, you can put them in a less arranged way (not all the same format side by side) but in a more alternating way. The last thing that bothers me more than anything else is that the side bar isn't fixed and the html/body isn't in 100vh. As a result, the side bar scrolls unpleasantly and the body content scrolls when there aren't enough elements. I think we can keep the site in overflow-x: hidden and overflow-y: hidden except in phone format of course.

Otherwise it's great and thanks for working on it even if I'll take care of it when I have time ^^. And do you have an answer for the framework used ?

[Swackles]

Fixed the sidebar scrolling

Good for you! It's the right spirit in terms of design, but after that you can change a few things. The sorting buttons can be put in a "bento" container. As for the "bento" boxes, you can put them in a less arranged way (not all the same format side by side) but in a more alternating way.

Dashboard is not in scope for this PR, but could you elaborate? And what's bento, do you mean card?

And do you have an answer for the framework used ?

Can you remind me, what the question was?

[gaspard-lebaube]

Sorry for the downtime. I am of course referring to cards by the term "bento" element. They should be arranged to alternate between large and small cards.

And I was saying:"I know you're using very stable versions that you must know well, but why not Preact or React/Compat ? Also, I'm not too familiar with Craco, is it a React overlay? In any case, it doesn't make things too optimized, does it ?"

[Swackles]

It's not worth it to choose the small bundle sizes over the stability and maturity. The current size of the built JS file is 722kB, if we take Cuba, the country with the lowest median download speed of 2.11Mbit/s[ookla], it would take 2.7s for the webpage to load. This in the grand scheme of things is nothing and at those speeds, you have a lot more problems than the webpage download time.

CRACO is a wrapper for Create React App, an old, unmaintained React build tool. The reason why I use it is that it came with the old project I ripped the project base from. The current plan is to replace it with Vite at some point.