mirror of
https://github.com/kevinveenbirkenbach/homepage.veen.world.git
synced 2026-05-14 09:15:32 +00:00
fix(navigation): unclip dropdowns and flip toward the side with more space
- Move <header> overflow:hidden into body.fullscreen scope and drop the implicit-vertical-clip overflow-x:auto from .navbar-nav so dropdown menus can escape the navbar. - Drive top-level dropdowns through bootstrap.Dropdown (popperConfig strategy:'fixed'), and add a chooseDirection() helper that toggles .dropup/.dropdown on the .nav-item based on space above vs below before each show. Split the navigation.css rules to position the menu with top:100% or bottom:100% accordingly. - Mark the dropdown toggle with data-bs-toggle="dropdown" in the template; cover that with a Jinja-rendered unit test and add Cypress specs for the header (opens downward) and footer (flips to .dropup) cases. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
70
tests/unit/test_navigation_template.py
Normal file
70
tests/unit/test_navigation_template.py
Normal file
@@ -0,0 +1,70 @@
|
||||
import unittest
|
||||
from html.parser import HTMLParser
|
||||
from pathlib import Path
|
||||
|
||||
from jinja2 import Environment, FileSystemLoader, select_autoescape
|
||||
|
||||
|
||||
class AnchorCollector(HTMLParser):
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
self.anchors = []
|
||||
|
||||
def handle_starttag(self, tag, attrs):
|
||||
if tag == "a":
|
||||
self.anchors.append(dict(attrs))
|
||||
|
||||
|
||||
class TestNavigationTemplate(unittest.TestCase):
|
||||
def test_top_level_dropdowns_have_bootstrap_toggle_attribute(self):
|
||||
template_dir = Path(__file__).resolve().parents[2] / "app" / "templates"
|
||||
environment = Environment(
|
||||
loader=FileSystemLoader(template_dir),
|
||||
autoescape=select_autoescape(),
|
||||
)
|
||||
environment.globals["url_for"] = lambda _endpoint, filename: (
|
||||
f"/static/{filename}"
|
||||
)
|
||||
|
||||
rendered = environment.get_template("moduls/navigation.html.j2").render(
|
||||
menu_type="header",
|
||||
platform={
|
||||
"titel": "Portfolio",
|
||||
"logo": {"cache": "logo.png"},
|
||||
},
|
||||
navigation={
|
||||
"header": {
|
||||
"children": [
|
||||
{
|
||||
"name": "Apps",
|
||||
"description": "Application menu",
|
||||
"icon": {"class": "fa-solid fa-grid"},
|
||||
"children": [
|
||||
{
|
||||
"name": "Example",
|
||||
"description": "Example app",
|
||||
"icon": {"class": "fa-solid fa-link"},
|
||||
"url": "https://example.test",
|
||||
}
|
||||
],
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
parser = AnchorCollector()
|
||||
parser.feed(rendered)
|
||||
dropdown_toggles = [
|
||||
anchor
|
||||
for anchor in parser.anchors
|
||||
if "nav-link" in anchor.get("class", "")
|
||||
and "dropdown-toggle" in anchor.get("class", "")
|
||||
]
|
||||
|
||||
self.assertEqual(len(dropdown_toggles), 1)
|
||||
self.assertEqual(dropdown_toggles[0].get("data-bs-toggle"), "dropdown")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
unittest.main()
|
||||
Reference in New Issue
Block a user