style: improve HTML styling for issue #107#111
Conversation
Add dark mode via CSS custom properties, responsive layout with centered container and flex toolbar, sticky table header, zebra rows, focus rings, accessibility fixes (aria-label, type=button, meta viewport), and smooth hover transitions.
|
hey @Tattaisreeram ! Thanks for your interest in contributing. I've noticed the "Something like:..." at the beginning of What does this PR do?. In the checklist, it is stated explicitly "This PR description is written by me, not by AI". Please, rewrite it with your own words so I can review the PR. Also, and more importantly, in #107, the issue associated to this PR, a contributor asked for the dark mode implementation and I gave them a go ahead before this PR was open. If they don't open a PR in a reasonable amount of time, I'll come back to this PR and let you know. This is important for the project, thanks for understanding. |
drkrillo
left a comment
drkrillo
left a comment
There was a problem hiding this comment.
Nice code! Approved.
Some comments:
#sortComments is included in the shared selector with #searchBox and #languageFilter, but then most of those properties are overridden in its own block .
It would be cleaner to remove #sortComments from the shared selector and give it its own styles from the start. That way you avoid setting properties just to override them right after. Not a blocker, but to have in consideration for future iterations.
| --row-alt: #f5f7fa; | ||
| --row-hover: #e8f0fe; | ||
| --link: #1a73e8; | ||
| --btn-bg: #1a73e8; |
There was a problem hiding this comment.
--focus-ring, --link, --btn-bg, are all using the same value.
We could consider for further iterations generalizing here.
| color: var(--text); | ||
| margin: 0; | ||
| padding: 32px 16px; | ||
| transition: background-color 0.2s, color 0.2s; |
|
The code looks nice and the table with the zebra lines and responsive is looking great. Would be nice to see you around in other issues. There will be added new colujmns to the CSV and we will need to add them to the frontend and add sorting to them : #106 . Would you like to take it once added to the backend? Once we make some more steps forward the page will be hosted on GitHub Pages, so your code will be live. Thanks for your contribution. |
2 participants
Add dark mode via CSS custom properties, responsive layout with centered
container and flex toolbar, sticky table header, zebra rows, focus rings,
accessibility fixes (aria-label, type=button, meta viewport), and
smooth hover transitions.
What does this PR do?
This PR adds a couple of frontend improvements.It introduces a dark mode that adapts to the user’s OS theme, enhances the layout for mobile devices, nd refines the table UI with sticky headers and hover effects to ease navigation.
Related Issue
Fixes #107
Checklist