Skip to content
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

Improved PRO label drawing, and fixed a display bug #447

Conversation

adiron
Copy link
Contributor

@adiron adiron commented Jan 31, 2025

The PRO label is now applied to the ::after pseudo-selector of the actual .pro element. This is to prevent a collision with Docusaurus' own ::after, which draws the submenus generally.

This affects the way that the PRO label is positioned (added comments for future generations).

Additionally, I have implemented some changes for a more consistent look for the PRO tags across different sections (though, some small and mysterious quirks of style do remain)

Content Description

Preview Link

Internal Reference

Closes DOC-397

Screenshots

Support for collapsible pro items (none currently exist, this is a test):
Screenshot 2025-01-31 at 12 39 09

Other pro tags:
image
image

The PRO label is now applied to the `::after` pseudo-selector of the
actual `.pro` element. This is to prevent a collision with Docusaurus'
own `::after`, which draws the submenus generally.

This affects the way that the PRO label is positioned (added comments
for future generations).

Additionally, I have implemented some changes for a more consistent look
for the PRO tags across different sections (though, some small and
mysterious quirks of style do remain)
Copy link

netlify bot commented Jan 31, 2025

Deploy Preview for vcluster-docs-site ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 8243c14
🔍 Latest deploy log https://app.netlify.com/sites/vcluster-docs-site/deploys/679ce199fe4082000804c636
😎 Deploy Preview https://deploy-preview-447--vcluster-docs-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Piotr1215
Copy link
Contributor

Thank you @adiron. I'm still not seeing the pro label on Kubevirt and other standalone elements:

image

https://deploy-preview-447--vcluster-docs-site.netlify.app/docs/vcluster/next/integrations/kubevirt/

@adiron
Copy link
Contributor Author

adiron commented Jan 31, 2025

I was very focused on the style issue and missed that bit. Interestingly, here it looks like the sidebar_class_name does not get applied, which is why there's no tag. I'm investigating

The folders were somehow interfering and not allowing the CSS to be
applied correctly, which meant that the PRO label was not showing for
these PRO features.
@adiron
Copy link
Contributor Author

adiron commented Jan 31, 2025

Pulled Kubevirt and Cert Manager out of their folders which fixed the classes not being applied.

Copy link
Contributor

@Piotr1215 Piotr1215 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @adiron , the CSS changes look great.

@Piotr1215 Piotr1215 merged commit 05bedc8 into loft-sh:main Feb 3, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants