Geist UI redesign

[lukbukkit]

Hello,

I happy to present the redesign of the React frontend using the Geist UI framework. This enables us to use various prebuilt components and create a more clean and concise UI and UX.

You can test the new design on https://tldr-i18n-progress-lukbukkit.vercel.app https://tldr-i18n-progress-geist-ui.netlify.app. Beware that the data may be out of date. I'm happy about any feedback especially about details.

This pull request closes #9 by implementing the filter action.

The highlighting of columns (see #8) is still on the to do list for this pull request. Yet I'm not certain if I can implement this feature with good performance, because we have to watch the mouse hover event for all cells of the table.

[navarroaxel]

I test this PR but Show outdated in the filters modal is not working. Spanish says is up to date.

[lukbukkit]

I test this PR but Show outdated in the filters modal is not working. Spanish says is up to date.

If you scroll through the table, you'll see no yellow square icon in the es column, so it works as intended.
If we want to catch more outdated pages, we have to improve the data generation logic (see #10). The front end just displays the data it receives through the data.json file from the Go application.

[navarroaxel]

@lukbukkit But I'm seeing that nano is outdated for the es translation 🤔

[lukbukkit]

@lukbukkit But I'm seeing that nano is outdated for the es translation 🤔

Ahh thanks, now I've got it ^^ (I was a little blind before). There was a flaw in the pagination logic. The filtered elements were calculated correctly, but the first page of elements was skipped.

[marchersimon]

Looks good. Something which annoyed me a bit was that you cannot exit pop-up dialogs with esc. Also, it would be nice to see in which section (platform) you are. This would be especially useful if you search for a page and don't know in which section you are. Maybe replacing page at the top left by the platform would work.

[lukbukkit]

Looks good. Something which annoyed me a bit was that you cannot exit pop-up dialogs with esc

Yeah that would be useful. I've experimented a bit, but wasn't able to find a solution until now. I'll come back to this problem in the next few days.

Also, it would be nice to see in which section (platform) you are. This would be especially useful if you search for a page and don't know in which section you are. Maybe replacing page at the top left by the platform would work.

Good idea, now the category is shown in the sticky header instead of the generic page column name.
I've updated the live example with the latest build: https://tldr-i18n-progress-lukbukkit.vercel.app/

And @navarroaxel thanks for detailed review, this is very helpful :D

[marchersimon]

Another thing I noticed: The link when loading the page isn't clickable. (I assume it should be a link because of the symbol)

[lukbukkit]

I've implemented a feature to highlight columns.

The colors of those columns are more saturated. Is this difference in saturation enough?

How should we present the checkboxes to select languages to highlight? I've got three different layouts in mind.

1. One option per line (currently live)

2. Multiple options per line (ordered)

3. Unordered

[marchersimon]

Really nice, the saturation is perfect. For selecting the language I prefer the second layout.

[lukbukkit]

I agree with you, the second layout is also my favorite. I've added a little bit more space between the checkboxes.

[bl-ue]

Oh you picked the 2nd layout? Too bad, I love the 3rd 😢

[navarroaxel]

I've moved the preview page to Netlify, because they support automatic builds for GitHub organizations. As soon as a commit is up, you can view it on tldr-i18n-progress-geist-ui.netlify.app.

@lukbukkit 🤔 Vercel supports that too. I saw that. Maybe the steps are here https://vercel.com/docs/git/vercel-for-github

[lukbukkit]

🤔 Vercel supports that too. I saw that. Maybe the steps are here https://vercel.com/docs/git/vercel-for-github

That's correct, Vercel also supports automatic builds from Git repositories. But as this repository belongs to a GitHub organization and not a personal GitHub account, I would have to pay in order to use this feature: https://vercel.com/pricing. I get the same feature set for free at Netlify. There's a limit of 300 build minutes per month but until now we used only 11.

[bl-ue]

Oh you picked the 2nd layout? Too bad, I love the 3rd 😢

Just kidding 😆🤣

[lukbukkit]

Thanks for all your help guys. 👍 I hope everyone is happy with the final version. I'm going to merge the changes in a few days.

[patricedenis]

I've implemented a feature to highlight columns.

The colors of those columns are more saturated. Is this difference in saturation enough?

How should we present the checkboxes to select languages to highlight? I've got three different layouts in mind.

Hi, I agree as well, I prefer also the second layout.

[patricedenis]

But when I went the the above linked page, I couldn't see the changes. Is this because I need to build the project locally at home ?

[lukbukkit]

But when I went the the above linked page, I couldn't see the changes. Is this because I need to build the project locally at home ?

The version on Vercel is outdated, please visit the page on Netlify: https://tldr-i18n-progress-geist-ui.netlify.app/

[patricedenis]

Thanks.
So when I went looking into this Netlify page, it looked really great !!
Again, good job !!
It feels really nicer than the original page.

[lukbukkit]

I've found some minor inconsistencies in variable naming and in the color scheme while doing the final code review. Those were fixed by the last three commits.

[lukbukkit]

The latest update is now published, if any errors arise please let me know by opening a new issue or dropping a comment here. ^^

[navarroaxel]

@lukbukkit why I can't see the new version in https://lukwebsforge.github.io/tldri18n/ yet?

[lukbukkit]

The website is updated along with the data.json file. This update happens every day at midnight (UTC).