Add HA like version label to sidebar #4503
Conversation
✅ Deploy Preview for esphome ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
WalkthroughThis pull request introduces several updates across multiple files, primarily focusing on enhancing the styling and layout through CSS modifications. A new class Changes
Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
_static/custom.css (1)
289-296: Consider optimizing the CSS for better maintainability.
- The border-radius is inconsistent between themes (5px vs 4px)
- Common properties are duplicated between themes
Consider this optimization:
.release-date { font-size: 12px; padding: 0 5px 0 5px; background: #e8edf0; height: fit-content; color: #007fa8; border-radius: 4px; } @media (prefers-color-scheme: dark) { .release-date { - font-size: 12px; - padding: 0 5px 0 5px; - height: fit-content; background: #393939; color: #3fc3ff; - border-radius: 4px; } }Also applies to: 477-484
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
_static/custom.css(2 hunks)_templates/contact.html(1 hunks)_templates/version.html(1 hunks)conf.py(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- _templates/contact.html
- _templates/version.html
🧰 Additional context used
📓 Path-based instructions (2)
conf.py (1)
Pattern **: - Do not generate or add any sequence diagrams
_static/custom.css (1)
Pattern **: - Do not generate or add any sequence diagrams
🔇 Additional comments (2)
conf.py (1)
167-167: LGTM! Addition of version template to sidebar configuration.
The placement of version.html in the sidebar configuration is appropriate, positioned before the search box and navigation elements.
_static/custom.css (1)
289-296: LGTM! Well-implemented version label styles with proper theme support.
The implementation provides good contrast ratios and consistent styling across both light and dark themes.
Also applies to: 477-484
shvmm
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
_static/custom.css (1)
289-296: LGTM! Consider adding hover state for better UX.The styling for the version label is well-implemented with appropriate colors, spacing, and visual treatment. The color contrast ratio is sufficient for accessibility.
Consider adding a hover state for better user experience:
.release-date { font-size: 12px; padding: 0 5px 0 5px; background: #e8edf0; height: fit-content; color: #007fa8; border-radius: 5px; + transition: background-color 0.2s ease; } +.release-date:hover { + background: #d8e0e4; +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
_static/custom.css(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
_static/custom.css (1)
Pattern **: - Do not generate or add any sequence diagrams
🔇 Additional comments (2)
_static/custom.css (2)
477-480: LGTM! Dark theme implementation is well-considered.
The dark theme colors maintain good contrast while staying consistent with the site's dark theme palette. The implementation correctly uses the prefers-color-scheme media query.
289-296: Verify consistency with Home Assistant's version label.
Let's ensure our implementation aligns with Home Assistant's version label styling.
Also applies to: 477-480
✅ Verification successful
Version label styling looks appropriate and includes dark mode support
The implementation includes all essential styling properties for the version label:
- Light mode with subtle background (#e8edf0), blue accent color (#007fa8)
- Dark mode adaptation with darker background (#393939) and lighter blue (#3fc3ff)
- Proper spacing with padding and border-radius for a pill-like appearance
- Appropriate font size and height settings
The styling achieves a clean, modern look that's consistent with modern documentation practices and includes proper dark mode support.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Compare our version label implementation with Home Assistant's
# Expected: Similar styling properties for version labels
# Check Home Assistant's CSS for version label styling
curl -s https://www.home-assistant.io/css/custom.css | rg -A 5 'version|release.*date'
# Check if we're missing any styling properties used by Home Assistant
curl -s https://www.home-assistant.io/css/custom.css | rg '@media.*dark' -A 10 | rg 'version|release.*date'
Length of output: 443
Script:
#!/bin/bash
# Let's try a different approach to find Home Assistant's styling
# First, let's check their repository directly for CSS files
fd -e css | xargs rg -l 'release-date|version'
# Then let's examine our implementation
cat _static/custom.css | rg -A 10 'release-date'
# Let's also check if there are any other similar styling classes in our codebase
fd -e css | xargs rg 'release-date|version' -A 5
Length of output: 1053
|
Converting to draft pending design review/decision |
Join our community is nondescript of containing a discord link. fixed it to reflect that.
include release-date formatting for version text
switched from p to div
added dark mode css for release-date class
removed common properties from dark mode css
added !important to sort priority with div.sphinxsidebar
Description:
Added HA like version label to esphome doc sidebar
Related issue (if applicable): fixes NONE
Pull request in esphome with YAML changes (if applicable): esphome/esphome# NONE
Checklist:
I am merging into
nextbecause this is new documentation that has a matching pull-request in esphome as linked above.or
I am merging into
currentbecause this is a fix, change and/or adjustment in the current documentation and is not for a new component or feature.Link added in
/index.rstwhen creating new documents for new components or cookbook.