Polish UI and accessibility: search icon, result count, brand nav, a11y fixes - #733
Open
ParasxAgarwal wants to merge 4 commits into
Open
Polish UI and accessibility: search icon, result count, brand nav, a11y fixes#733ParasxAgarwal wants to merge 4 commits into
ParasxAgarwal wants to merge 4 commits into
Conversation
- Fix duplicate CSS display property on Card-Real-Link (both block and flex)
- Replace generic alt text on project logos with meaningful '{name} logo'
- Fix broken aria-labelledby on filter select (pointed to non-label div)
- Add search icon inside the search input for better UX affordance
- Add live result count showing 'X of Y projects' or total count
- Add 'no results' message when search/filter returns empty
- Add site wordmark and logo to navbar for brand identity
- Point ImgTouch card imageSrc at the new transparent app icon now hosted in the imgtouch repo (public/logo.png), replacing the GitHub avatar URL. - Replace the CSS multi-column masonry (columns: 3) with CSS Grid (grid-template-columns: repeat(3, 1fr)). The columns layout mis-computed the container height so the SocialShare footer slid up under the last cards, and clipped tall cards via overflow:hidden which hid their 'Go to Project' button text. Grid sizes each card to its content and the container to its rows, fixing both. This also matches the existing code comment that already claimed grid was in use. - Add a 2-column tablet breakpoint (<=980px); keep 1-column on mobile. - Drop the now-redundant margin-bottom on .Card-Container (grid gap handles vertical spacing).
Revert .astro/* cache, the auto-generated pnpm-workspace.yaml (allowBuilds: false, which would break CI builds), and the package.json pnpm block that were only needed to coax a local pnpm install. The PR now contains only the UI/source changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR makes several small, focused improvements to the web app UI:
🐛 Bug fixes
displayproperty on.Card-Real-Link(had bothblockandflex— the latter overrides the former, but the duplicate is dead code)aria-labelledbyon the filter<select>— it referenced#tag-selector-containerwhich is a<div>with no label text, so the label was effectively empty. Replaced witharia-label.♿ Accessibility
"{name} logo"so screen readers announce the actual project name✨ UX improvements
Files changed
src/components/Navbar.astrosrc/components/ProjectCard.astrosrc/components/ProjectList.astroAll changes are backward-compatible and maintain the existing dark theme aesthetic.