[610] fix: update breadcrumbs styles and logic#115
Conversation
- Adjust breadcrumbs margin and responsive spacing in SCSS - Remove .breadcrumb-home style and related HTML logic - Simplify breadcrumbs fragment logic for home page
📝 Walkthrough""" WalkthroughThe changes update the breadcrumb navigation's appearance and rendering logic. The breadcrumb's bottom margin is increased and made responsive via SCSS. In the HTML fragment, the breadcrumb is now only rendered when the current page is not the home page, simplifying the internal conditional logic and markup output. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Page
participant BreadcrumbFragment
User->>Page: Request page
Page->>BreadcrumbFragment: Render breadcrumbs
alt Current page is NOT home
BreadcrumbFragment-->>Page: Render breadcrumb navigation
else Current page is home
BreadcrumbFragment-->>Page: Output nothing
end
Page-->>User: Serve page with/without breadcrumb
Possibly related PRs
Suggested reviewers
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (4)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
website/views/fragments/fragments.html (1)
56-56: Markup Formatting: Separate Jinja tags for clarity.On line 56,
{% endif %} {% endfragment %}appear on the same line. For readability and to avoid potential parsing ambiguities, consider splitting them:{% endif %} {% endfragment %}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
website/modules/asset/ui/src/scss/_base.scss(1 hunks)website/views/fragments/fragments.html(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: unit-tests
- GitHub Check: e2e-tests
- GitHub Check: security-scan
- GitHub Check: lint
🔇 Additional comments (4)
website/modules/asset/ui/src/scss/_base.scss (1)
138-144: Styles Update: Breadcrumb margin adjustment looks correct.The shorthand
margin: 0 auto 52px;correctly sets top margin to 0, horizontal margins to auto, and bottom margin to 52px. Within the medium breakpoint, overriding onlymargin-bottomto 80px preserves horizontal centering. This aligns with the updated design specifications.website/views/fragments/fragments.html (3)
29-31: Conditional Rendering: Skip breadcrumb on home page.Wrapping the entire breadcrumb fragment with
{% if data.page._url != data.home._url %}simplifies the logic and prevents unnecessary markup on the home page. Please verify that the URL comparison handles edge cases (e.g., trailing slashes or URL normalization) to avoid hiding breadcrumbs on valid subpages.
33-33: Home Link Rendering Remains Correct.Iterating over
data.page._ancestorsstill includes the root ancestor, and the inline{% if page._url == data.home._url %}correctly displays "Home" for that link. This preserves user expectations for the breadcrumb trail.
53-53: Verify Conditional Pairing After Refactor.The
{% endif %}here closes the{% if data.piece %}block. After introducing the outer page‐URL check, ensure all Jinja tags remain properly nested to prevent mismatches or rendering errors.
02fecf1
|



fix: update breadcrumbs styles and logic
These changes improve the visual consistency and maintainability of the breadcrumbs component.