-
Notifications
You must be signed in to change notification settings - Fork 14.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[WIP] Adapt nav bar to support RTL locales #46042
base: dev-1.29-ar.1
Are you sure you want to change the base?
[WIP] Adapt nav bar to support RTL locales #46042
Conversation
Hi @mboukhalfa. I noticed this PR contains some changes I believe you intended for #46043. Will you please rebase and post some screenshot previews? |
I was expecting to get preview with netlify but not sure why I am not getting this ! I added the other changes so the build succeed I will rebased once merged |
9324d21
to
89d3e7f
Compare
Thanks @mboukhalfa! I am not an HTML expert, but I noticed the language switcher could render better: Quite an important effort, just wanted to point out this too. Otherwise the navbar itself looks good! |
/area web-development |
I'd prefer to pass the This will need a change within |
The problem is supposing that we have the correct |
Let's build on that. Can we make the customisations only apply using the cascade when |
@@ -130,7 +130,7 @@ body.td-404 main .error-details { | |||
transition: 0.3s; | |||
|
|||
.navbar-brand { | |||
position: absolute; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's only override this for RTL locales.
layouts/partials/navbar.html
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Where possible, I'd prefer to make the customisations here conditional on the locale's text direction.
I appreciate the offer to collaborate. It would be beneficial to team up with someone skilled in Kubernetes custom CSS. My intention is to implement a generic solution that seamlessly accommodates any text direction. Introducing customizations exclusively for right-to-left (RTL) scenarios could complicate our styling process unnecessarily. It's worth noting that we're concurrently progressing with the migration to newer Docsy google/docsy#1442. Currently, our setup involves custom styling and local old Bootstrap alongside the legacy Docsy, creating complexity. Moreover, our current navbar styling lacks automatic RTL support, adding another layer of intricacy. Let's ensure our efforts align with the overarching roadmap and streamline our approach for long-term sustainability. |
I'm thinking about this as a technical lead for SIG Docs, and I'm keen to either:
One reason why: when people see that the changes are conditional on direction, any reviewer looking a future change in the same area is likely to take that into account. The reviewer might check for the impact on RTL language layouts, or ask a localization team (for a language written right to left) to confirm all looks well. |
Previously navbar used ml-md-auto class which does not support RTL and also absolute position for the logo which does not automatically support switching to RTL. This commit adapt the navbar styling to automatically support RTL direction Signed-off-by: Mohammed Boukhalfa <mohammed.boukhalfa@est.tech>
3930e90
to
df3fcd2
Compare
✅ Deploy Preview for kubernetes-io-ar-staging ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
I created here a simplified example blue navbar is the current implementation and the green my suggestion. Both are shown in their default state and when using RTL.: |
As drafted, this change makes the top nav not look right in narrow viewports for LTR locales. I'd really like to see something that doesn't regress (partially break) our existing localizations, which are all LTR. |
I understand your concerns! Please note that this draft serves as a minimal PoC to highlight the primary issue [ Menu and Logo should switch sides when using website/assets/scss/_custom.scss Line 149 in 99a1995
Rest assured that the final solution (targeting main) will treat all those side issues however for now I am looking for guidance and experts here willing to review the work |
/retitle [WIP] Adapt nav bar to support RTL locales If this is a work in progress, we should mark it as such (in case someone approves it without realizing). |
Thanks I was not worried about this since it is targeting a dev branch |
It's best not to merge work-in-progress PRs to a localization branch; remember that we intend one day to merge all of that work into main. |
The Kubernetes project currently lacks enough contributors to adequately respond to all PRs. This bot triages PRs according to the following rules:
You can:
Please send feedback to sig-contributor-experience at kubernetes/community. /lifecycle stale |
This PR use bootstrap class only that support RTL to style the navbar. Previously navbar used
ml-md-auto
class which does not support RTL and also absolute position for the logo which does not automatically support switching to RTL. This PR adapt the navbar styling to automatically support RTL directionFix: #45077
Inspired from example 3 in https://www.codeply.com/go/qhaBrcWp3v
Simplified example here : https://www.codeply.com/p/bNdMgLE0A5