New design for Homepage and Search results - #278
Conversation
|
Warning Review limit reached
Next review available in: 47 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
WalkthroughThe search module now requests up to 999 results and uses a standalone results template with updated result, pagination, footer, and navigation markup. New CSS styles the search page, responsive layouts, menu control, navigation panel, results, and footer, while JavaScript manages menu state. The simplified homepage hero and footer copy and links were updated, alongside desktop and mobile typography and spacing changes. Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@website/modules/`@apostrophecms/search/index.js:
- Around line 1-5: Remove the unbounded perPage override from the search module
configuration and restore a bounded page size that enables real pagination.
Update the options in the exported module object, preserving the existing search
behavior while preventing up to 999 documents from loading in one request.
In `@website/modules/`@apostrophecms/search/views/index.html:
- Around line 100-106: Remove the unused class: 'c-pagination' option from the
pager.render call in the search pagination block, leaving the page, total,
shown, and data.url arguments unchanged.
In `@website/public/css/home-simplified/home-simplified.css`:
- Around line 193-200: Update the contrast-sensitive colors in the .ca-hero h1
.grad gradient and the placeholder/search-affordance styles at the referenced
locations, replacing the light endpoint and gray tokens with darker colors that
meet contrast requirements against the actual page background. Preserve the
existing gradient and control styling otherwise.
In `@website/public/css/search-results/search-results.css`:
- Around line 165-191: Update the .sf-nav closed state to remove the off-screen
navigation from keyboard focus and the accessibility tree, using visibility:
hidden or an equivalent established accessibility mechanism, and toggle it to
visible in .sf-nav.open while preserving the existing transform behavior.
In `@website/public/js/search-results-menu.js`:
- Around line 7-26: Update the menu state handling around the menuButton click
listener and both close paths to keep `#nav-icon`’s aria-expanded attribute
synchronized with the menu’s open state: set it to true when opening and false
whenever the menu closes. Reuse the same menuButton state reference across all
toggle and close handlers.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: f5d14ee5-2d2b-43ac-b7db-6e090685bd26
📒 Files selected for processing (6)
website/modules/@apostrophecms/search/index.jswebsite/modules/@apostrophecms/search/views/index.htmlwebsite/modules/home-simplified/views/page.htmlwebsite/public/css/home-simplified/home-simplified.csswebsite/public/css/search-results/search-results.csswebsite/public/js/search-results-menu.js
| .ca-hero h1 .grad { | ||
| font-weight: 800; | ||
| background: linear-gradient(95deg, #0173D7 0%, #00A896 45%, #00897B 80%, #F57600 100%); | ||
| background: linear-gradient(90deg, #0173D7 0%, #009BA6 42%, #10FFE5 100%); | ||
| -webkit-background-clip: text; | ||
| background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| color: transparent; | ||
| padding-right: 0.05em; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Use contrast-safe colors for the new text and search controls.
The #10FFE5 gradient endpoint is approximately 1.3:1 against white, making the end of the H1 difficult to read. The #9DA0A6 placeholder and #9a9a9a search affordance are also very low contrast. Use darker tokens that pass against the actual page background.
Suggested direction
- background: linear-gradient(90deg, `#0173D7` 0%, `#009BA6` 42%, `#10FFE5` 100%);
+ background: linear-gradient(90deg, `#0173D7` 0%, `#009BA6` 42%, `#007F86` 100%);
- color: `#9DA0A6`;
+ color: `#6B6B6B`;
- color: `#9a9a9a`;
+ color: `#6B6B6B`;Also applies to: 255-256, 480-482
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@website/public/css/home-simplified/home-simplified.css` around lines 193 -
200, Update the contrast-sensitive colors in the .ca-hero h1 .grad gradient and
the placeholder/search-affordance styles at the referenced locations, replacing
the light endpoint and gray tokens with darker colors that meet contrast
requirements against the actual page background. Preserve the existing gradient
and control styling otherwise.
3 participants
Redesigned the homepage and search results experience with refreshed hero messaging, typography, gradients, responsive layouts, and navigation. Search now displays up to 999 results, uses a standalone results page with updated status, result rows, pagination, footer, and empty states, plus a responsive animated menu. Homepage and search footers now include functional privacy and home links.