chore: Fix sidebar behavior and cleanup CSS rules#781
Conversation
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com> Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com> Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com> Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
✅ Deploy Preview for open-component-model ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThis pull request refactors the theme architecture by centralizing CSS custom properties, updates sidebar interaction logic with a new click handler and Hugo partial template, and simplifies component styling across multiple SCSS files to reference the new centralized variables instead of hard-coded colors. Changes
Sequence DiagramsequenceDiagram
actor User
participant Browser
participant ClickHandler as JS Click Handler
participant DOMState as DOM/Details Element
participant Navigator as window.location
User->>Browser: Click sidebar section link
activate ClickHandler
Browser->>ClickHandler: Capture phase event
ClickHandler->>ClickHandler: Check if modified/middle click
ClickHandler->>ClickHandler: Check link target & download attr
alt Same page link (aria-current="page")
ClickHandler->>ClickHandler: Prevent default
ClickHandler->>DOMState: Toggle closest details.open
DOMState->>Browser: Update DOM
else Different page link
ClickHandler->>ClickHandler: Prevent default & summary toggle
ClickHandler->>Navigator: Set window.location.href
Navigator->>Browser: Navigate to new page
end
deactivate ClickHandler
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com> Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com> Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com> Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com> Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
assets/scss/common/_header-custom.scss (1)
198-204:⚠️ Potential issue | 🟡 MinorStylelint failure at Line 203 (
declaration-empty-line-before).Add the required blank line after the mixin include to keep lint/pipeline green.
✅ Minimal lint fix
.mode-toggle { `@include` navbar-control-reset; + height: 32px !important; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@assets/scss/common/_header-custom.scss` around lines 198 - 204, The rule block for selectors .btn-link, .nav-link, .header-github-pill, .mode-toggle uses the mixin `@include` navbar-control-reset; but violates stylelint declaration-empty-line-before — add a single blank line after the mixin include inside that rule so there is an empty line between the include and the following height declaration (i.e., ensure `@include` navbar-control-reset; is followed by one blank line, then height: 32px !important;).
🧹 Nitpick comments (1)
config/_default/module.toml (1)
129-129: Update the nearby versioning note to match the pinned import.Line 129 pins the module to
v0.2.0, but the comment block above still says “dev: uses latest”, which is now misleading.✏️ Suggested doc-note update
-### dev: uses latest +### latest: uses the pinned ref docs module version configured below🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@config/_default/module.toml` at line 129, The comment above the module pin is out of date: the toml now contains version = "v0.2.0" but the doc note still says “dev: uses latest”; update that nearby comment block to state that the module is pinned to v0.2.0 (or otherwise reflect the pinned import) so the documentation matches the actual version string (search for version = "v0.2.0" and edit the surrounding comment text).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@assets/js/custom.js`:
- Around line 10-39: Add a guard to only hijack plain left-clicks: inside the
document.addEventListener('click', (e) => { handler, after you compute const
link = ... and confirm link exists, early-return if the click is not a simple
left-click by checking e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey ||
e.altKey (also consider returning if link.target === '_blank'), so modified
clicks or clicks meant to open in new tab/window are left to the browser; leave
the rest of the logic (using details, preventDefault, stopImmediatePropagation,
and programmatic navigation via window.location.href) unchanged.
In `@assets/scss/common/_components.scss`:
- Around line 42-58: Remove the empty lines inside the .section-desc-box rule
that are triggering stylelint's declaration-empty-line-before (specifically
remove the blank line before the font-size declaration and the blank line before
the width declaration), keeping all declarations consecutively grouped; edit the
.section-desc-box block in assets/scss/common/_components.scss (the selector
.section-desc-box) to eliminate those extra blank lines so the rule has no empty
lines between declarations.
- Around line 62-65: Define a new CSS custom property --desc-box-border-dark in
_variables-custom.scss alongside the other desc-box tokens (matching the dark
visual spec), then update the dark-mode override for the .section-desc-box
selector to include border: var(--desc-box-border-dark); (you can reference the
existing .toc-box dark-mode behavior for the exact placement and pattern).
In `@assets/scss/common/_pages.scss`:
- Around line 31-35: Replace selectors that rely on :first-child (e.g.,
.docs-content h1:first-child and the similar selectors around lines 51-54) with
type-based pseudo-class matching so the first heading is targeted even when
breadcrumbs or banners precede it; specifically, change the selector usage to
use :first-of-type for h1 (and the corresponding heading levels in the other
selectors) so .docs-content h1:first-of-type (and the analogous selectors) will
match the first heading of that type regardless of preceding elements like
main/breadcrumb or version-banner.
- Around line 42-46: The rule always shifts .ocm-section-page even when no
sidebar exists; restrict the desktop padding to only pages that sit next to the
sidebar by scoping the media query rule to when .docs-sidebar is present (e.g.
replace the selector inside the `@media` (min-width:1200px) block with a
sibling/ancestor selector such as .docs-sidebar + .ocm-section-page or
.docs-sidebar ~ .ocm-section-page so padding-left: 3.8rem only applies when
.docs-sidebar is rendered).
In `@layouts/_partials/sidebar/render-section-menu.html`:
- Around line 35-38: The current logic initializes $linkContent with
$node.Page.LinkTitle then overwrites it with $node.Name, which causes Name to
take precedence and prevents LinkTitle customizations from showing; update the
fallback order so LinkTitle wins: initialize $linkContent from $node.Name (or
use a conditional) and then, if $node.Page.LinkTitle is set, assign $linkContent
= $node.Page.LinkTitle (or implement if/else that uses $node.Page.LinkTitle when
present, otherwise $node.Name) — look for the variables $linkContent,
$node.Page.LinkTitle and $node.Name in render-section-menu.html and swap the
assignment logic accordingly.
---
Outside diff comments:
In `@assets/scss/common/_header-custom.scss`:
- Around line 198-204: The rule block for selectors .btn-link, .nav-link,
.header-github-pill, .mode-toggle uses the mixin `@include` navbar-control-reset;
but violates stylelint declaration-empty-line-before — add a single blank line
after the mixin include inside that rule so there is an empty line between the
include and the following height declaration (i.e., ensure `@include`
navbar-control-reset; is followed by one blank line, then height: 32px
!important;).
---
Nitpick comments:
In `@config/_default/module.toml`:
- Line 129: The comment above the module pin is out of date: the toml now
contains version = "v0.2.0" but the doc note still says “dev: uses latest”;
update that nearby comment block to state that the module is pinned to v0.2.0
(or otherwise reflect the pinned import) so the documentation matches the actual
version string (search for version = "v0.2.0" and edit the surrounding comment
text).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7a0a8b3d-beec-46aa-9e96-08bae521738d
📒 Files selected for processing (13)
assets/js/custom.jsassets/scss/common/_base.scssassets/scss/common/_branding.scssassets/scss/common/_cards.scssassets/scss/common/_components.scssassets/scss/common/_header-custom.scssassets/scss/common/_pages.scssassets/scss/common/_sidebar.scssassets/scss/common/_variables-custom.scssassets/scss/common/_version-warning.scssconfig/_default/module.tomlcontent/docs/getting-started/_index.mdlayouts/_partials/sidebar/render-section-menu.html
On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com> Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
…ebar On-behalf-of: Gerald Morrison (SAP) <gerald.morrison@sap.com> Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com>
<!-- markdownlint-disable MD041 --> #### What this PR does / why we need it Improve design of website and clean up CSS rules - Fix sidebar scrollbar - Fix left margin of sidebar - Fix color of section headers in sidebar - Enable click on section header navigates to overview section - Clean up CSS rules: remove duplicates, remove !important where possible, remove hard-coded values and replace by variables. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Enhanced sidebar navigation with improved link handling and active state detection * Getting Started section now collapses by default for streamlined navigation * **Style** * Standardized theme colors across the site using CSS custom properties * Refined spacing, typography, and layout alignment for better visual consistency * **Chores** * Updated core CLI module to v0.2.0 <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Signed-off-by: Gerald Morrison (SAP) <gerald.morrison@sap.com> Co-authored-by: Gerald Morrison (SAP) <gerald.morrison@sap.com> 8bb92e6
What this PR does / why we need it
Improve design of website and and clean up CSS rules
Summary by CodeRabbit
New Features
Style
Chores