Fix #788: Add Virtual Labs link in mobile navigation#793
Fix #788: Add Virtual Labs link in mobile navigation#793A1L13N merged 1 commit intoalphaonelabs:mainfrom
Conversation
WalkthroughAdds a "Virtual Lab" navigation link to both the desktop and mobile menus in the base template, linking to the virtual_lab home URL with a flask icon for consistent access across layouts. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (3)web/templates/**/*.html📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/*.{html,htm}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{html,htm,css}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (1)📓 Common learnings🔇 Additional comments (1)
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: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/templates/base.html (1)
286-290: Styling inconsistency with other dropdown items.The Virtual Lab link uses different CSS classes compared to other items in the RESOURCES dropdown. This causes inconsistent hover effects and padding.
Other items in this dropdown use
hover:bg-teal-50 dark:hover:bg-teal-900with teal-colored text on hover, while this useshover:bg-gray-100 dark:hover:bg-gray-700.🔎 Proposed fix to match styling of other dropdown items
- <a href="{% url 'virtual_lab:virtual_lab_home' %}" - class="flex items-center py-2 px-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md"> - <i class="fas fa-flask mr-2 text-teal-500"></i> - <span>Virtual Lab</span> - </a> + <a href="{% url 'virtual_lab:virtual_lab_home' %}" + class="block px-4 py-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-teal-50 dark:hover:bg-teal-900 hover:text-teal-600 dark:hover:text-teal-300"> + <i class="fas fa-flask mr-2 text-teal-500"></i>Virtual Lab + </a>As per coding guidelines, Tailwind CSS classes must follow the project's established patterns for consistency.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
web/templates/base.html
🧰 Additional context used
📓 Path-based instructions (3)
web/templates/**/*.html
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
web/templates/**/*.html: Format HTML/Django templates with djlint using 120-character line length
Use Tailwind CSS classes only in templates (no custom CSS or inline styles)
Include dark mode variants using the "dark:" prefix in templates
Ensure proper HTML structure and accessibility in templates
Follow project color scheme in templates (teal-300, gray-600, green-600, yellow-600, red-600)
Files:
web/templates/base.html
**/*.{html,htm}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{html,htm}: Always use Tailwind CSS classes for styling HTML elements
Never use inline styles
Follow the project's color scheme using Tailwind's color classes (Primary: teal-300, Secondary: gray-600, Success: green-600, Warning: yellow-600, Danger: red-600, Dark mode variants using dark: prefix)
Use Tailwind container classes: container mx-auto px-4 for containers
Use Tailwind card classes: bg-white dark:bg-gray-800 rounded-lg shadow-lg for cards
Use Tailwind form input classes: w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 for form inputs
Use Tailwind form label classes: block text-sm font-medium text-gray-700 dark:text-gray-300 for form labels
Use Tailwind primary button classes: bg-teal-300 hover:bg-teal-400 text-white px-6 py-2 rounded-lg transition duration-200
Use Tailwind secondary button classes: bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300
Use Tailwind heading classes: text-2xl font-bold (adjust size as needed) for headings
Use Tailwind body text classes: text-gray-600 dark:text-gray-300 for body text
Use Tailwind link classes: text-blue-600 hover:text-blue-800 dark:text-blue-400 for links
Use flex and grid for layouts
Use consistent spacing with gap-{size} and space-{y|x}-{size} Tailwind classes
Use responsive design with Tailwind prefixes: sm:, md:, lg:, xl:
Always include dark mode alternatives using dark: prefix for elements
Use dark:bg-gray-800 for dark mode card backgrounds
Use dark:text-gray-300 for dark mode text
Use proper heading hierarchy for accessibility
Include proper ARIA labels where needed for accessibility
Ensure sufficient color contrast for accessibility
Add hover/focus states for interactive elements
Files:
web/templates/base.html
**/*.{html,htm,css}
📄 CodeRabbit inference engine (AGENTS.md)
Never use custom CSS classes
Files:
web/templates/base.html
🧠 Learnings (1)
📓 Common learnings
Learnt from: Abhishek-Punhani
Repo: alphaonelabs/alphaonelabs-education-website PR: 337
File: web/templates/courses/detail.html:1506-1560
Timestamp: 2025-04-07T11:33:41.277Z
Learning: For the alphaonelabs-education-website project, the team prefers to keep PRs focused and manageable in size. Additional enhancements like accessibility improvements should be addressed in separate follow-up issues rather than expanding the scope of an existing PR.
🔇 Additional comments (1)
web/templates/base.html (1)
693-697: LGTM! Mobile navigation implementation is correct.The Virtual Lab link is properly added to the mobile RESOURCES accordion with:
- Consistent styling matching other mobile menu items
- Proper dark mode support
- Appropriate icon and URL pattern
This successfully addresses issue #788 for the mobile navigation.
2 participants
Related issues
Fixes #788
Changes
Added the "Virtual Labs" link to the mobile navigation menu
Ensured responsive styling for smaller screens
Tested on mobile and desktop views
Did you run the pre-commit? (If not, your PR will most likely not pass — please ensure it passes pre-commit)
Did you test the change? (Ensure you didn’t just prompt the AI and blindly commit — test the code and confirm it works)
Added screenshots to the PR description (if applicable)
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.