Updated index.twig to hide the simple search bar when already on a search results page. #3802
Conversation
Replaces inline styles for required field asterisks in add.twig and ask.twig templates with a reusable .pmf-required-asterisk CSS class. Adds corresponding styles to _global.scss and _theme-switcher.scss for consistent appearance across themes.
Replaced hardcoded color values in the high contrast theme with Bootstrap CSS variables for better maintainability and consistency. Enhanced accessibility and visual appearance of links, logo, headings, and form elements. Removed Atkinson Hyperlegible font files from the assets.
Scaled up the #phpmyfaq-logo for better visibility and applied color inversion to the logo image for high-contrast mode. Simplified logo image styling and removed redundant hover effects.
Moves the required asterisk inside the conditional so it only appears when the category field is required, improving form label accuracy.
Increased font weight in badge elements for better readability, and adjusted badge border color. Updated index.twig to hide the simple search bar when already on a search results page. This prevents redundant search input options and streamlines the user experience, while keeping the advanced search functionality available.
WalkthroughHigh-contrast SCSS adjustments (weights, borders, color/border tweaks) and a template change that detects search pages to skip rendering the search block on those pages. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🧰 Additional context used📓 Path-based instructions (2)**/*.{html,css,scss}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{html,scss,css}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (1)📚 Learning: 2025-11-29T10:03:37.303ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
🔇 Additional comments (6)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
phpmyfaq/assets/scss/layout/_theme-switcher.scss (2)
464-465: Review badge border thickness for potential layout issues.The
border: 4px solid var(--bs-dark)on badges in high-contrast mode adds 8px total width/height to each badge. This could cause layout shifts or text wrapping in tight spaces.Consider using a thinner border or outline:
.badge { - border: 4px solid var(--bs-dark); + border: 2px solid var(--bs-dark); font-weight: 800;Or use outline to avoid affecting layout dimensions:
.badge { - border: 4px solid var(--bs-dark); + outline: 3px solid var(--bs-dark); + outline-offset: -3px; font-weight: 800;
572-577: Performance consideration: Universal transition selector.The universal selector
*applying transitions to all elements can impact rendering performance, especially on pages with many DOM nodes.Consider scoping transitions to specific elements:
-* { +body, +.card, +.btn, +.form-control, +.alert, +a, +.navbar, +.dropdown-menu { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }This reduces the number of elements being transitioned and improves performance without sacrificing the smooth theme-switching experience on key UI elements.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
phpmyfaq/assets/fonts/AtkinsonHyperlegible-Bold.ttfis excluded by!**/*.ttfphpmyfaq/assets/fonts/AtkinsonHyperlegible-BoldItalic.ttfis excluded by!**/*.ttfphpmyfaq/assets/fonts/AtkinsonHyperlegible-Italic.ttfis excluded by!**/*.ttfphpmyfaq/assets/fonts/AtkinsonHyperlegible-Regular.ttfis excluded by!**/*.ttf
📒 Files selected for processing (5)
phpmyfaq/assets/scss/_global.scss(1 hunks)phpmyfaq/assets/scss/layout/_theme-switcher.scss(7 hunks)phpmyfaq/assets/templates/default/add.twig(6 hunks)phpmyfaq/assets/templates/default/ask.twig(4 hunks)phpmyfaq/assets/templates/default/index.twig(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{html,css,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Use HTML5 and CSS3 standards for frontend code
Files:
phpmyfaq/assets/scss/_global.scssphpmyfaq/assets/scss/layout/_theme-switcher.scss
**/*.{html,scss,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Bootstrap components and utilities for layout and styling
Files:
phpmyfaq/assets/scss/_global.scssphpmyfaq/assets/scss/layout/_theme-switcher.scss
🔇 Additional comments (8)
phpmyfaq/assets/scss/_global.scss (1)
72-76: LGTM! Clean centralization of required-field styling.The new
.pmf-required-asteriskclass effectively consolidates required-field indicator styling across templates, using Bootstrap's CSS variable for consistent theming.phpmyfaq/assets/templates/default/add.twig (1)
31-31: LGTM! Consistent refactoring to class-based styling.The replacement of inline styling with the
.pmf-required-asteriskclass is applied consistently across all form fields, improving maintainability and theme compatibility.Also applies to: 42-42, 53-53, 71-71, 84-84, 95-95
phpmyfaq/assets/templates/default/index.twig (1)
104-124: LGTM! Proper conditional rendering.The updated condition correctly hides the search block when on a search page, preventing redundant search UI while maintaining accessibility to advanced search via the link.
phpmyfaq/assets/templates/default/ask.twig (1)
35-35: LGTM! Consistent required-field markup.The explicit
<span class="pmf-required-asterisk"> *</span>markup is applied consistently, with appropriate conditional rendering forid5where the field requirement may vary.Also applies to: 44-44, 54-54, 73-73
phpmyfaq/assets/scss/layout/_theme-switcher.scss (4)
144-147: LGTM! Dark mode support for required indicators.The
.pmf-required-asteriskstyling correctly applies the danger color variable in dark mode for consistency.
258-260: LGTM! Maximum contrast background.The high-contrast mode correctly uses CSS variables for consistent dark background and light text.
410-414: LGTM! High-contrast styling for required indicators.The
.pmf-required-asteriskin high-contrast mode appropriately uses the primary color with bold weight for maximum visibility.
367-385: No changes needed. The logo styling in high-contrast mode is part of an intentional accessibility feature with proper theme switching and testing infrastructure in place. The inverted filter, 1.3x scale, and yellow border are deliberate design choices for this mode and do not require verification—they function as designed.
regex URL matching to avoid false positives for search pages in index.twig Apply larger sizing <a> only to main content links to preserving layout integrity.
2 participants
Updated index.twig to hide the simple search bar when already on a search results page. This prevents redundant search input options and streamlines the user experience, while keeping the advanced search functionality available.
Summary by CodeRabbit
Style
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.