expressjs.com
expressjs.com copied to clipboard
expressjs
feat: Improve language picker UI with icons
Task
- [X] Improved the design of the language picker by adding language icons.
- [X] removed duplicate id attributes
- [X] fix bug: highlighting current language
- [x] refactor css and bug fixes
closes #1804
| desktop | mobile |
|---|---|
How SVG Icons Were Created?
- The SVG flag icons were sourced from Nucleo SVG Flag Icons.
- Each SVG file was copied and added to the repository using the VS Code editor.
- While there are several ways to edit SVGs in VS Code, including using extensions for live preview or advanced editing, I used the default text editor setup to make the required changes.
- The SVGs were customized and optimized to fit the required sizes(20x22) and design specifications for our language picker UI, so that we don't need to write CSS to customize icons.
Deploy Preview for expressjscom-preview ready!
| Name | Link |
|---|---|
| Latest commit | 75031e470c5bb08ea23efee8ed2a5e0ae12f0de7 |
| Latest deploy log | https://app.netlify.com/projects/expressjscom-preview/deploys/687873d6d9529f0008a91091 |
| Deploy Preview | https://deploy-preview-1933--expressjscom-preview.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
Thanks @ctcpip for you time. My initial thoughts were same as yours. Let's wait for others, since it was proposed in issue #1804. Otherwise I am ok with removing icons and move on with just bug fixes as reported in description.
Can we leave just the icon, please?
Actually, I want to 😃. This approach removes a lot of unnecessary files and code. We don't need mobile lang picker file as well as JS and CSS written for this. I already mentioned this in comment https://github.com/expressjs/expressjs.com/issues/1804#issuecomment-2742378877. But didn't got reviews. Then I decide to keep as it is and just fix issues referenced in description. Also I did check history, you guys did a lot of work to bring that mobile lang picker on the website.
Long story short 😃 — on small screens, we only show the i18n icon, and now we're switching desktop to use the same. So it makes sense to use a single UI component across all screen sizes.
I'm going to draft this PR for now. It will be closed later as part of the i18n component simplification, as mentioned in https://github.com/expressjs/expressjs.com/pull/1933#issuecomment-3089396640.