Keep mobile navbar title anchored when collapse menu expands (#35)
* Initial plan * fix: keep mobile header title aligned when navbar menu expands
This commit is contained in:
@@ -63,8 +63,9 @@ p.price {
|
||||
.navbar.header .site-title-mobile {
|
||||
color: #FFF;
|
||||
position: absolute;
|
||||
top: calc(var(--bs-navbar-padding-y) + 20px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 0;
|
||||
max-width: calc(100% - 9rem);
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import json
|
||||
from pathlib import Path
|
||||
import re
|
||||
from unittest.mock import MagicMock, patch
|
||||
|
||||
from django.test import TestCase, override_settings
|
||||
@@ -1371,6 +1373,16 @@ class EndpointViewTests(TestCase):
|
||||
self.assertEqual(response.status_code, 200)
|
||||
self.assertContains(response, 'site-title-mobile d-md-none')
|
||||
self.assertContains(response, 'site-title-desktop')
|
||||
|
||||
def test_mobile_site_title_css_keeps_title_pinned_to_header_row(self):
|
||||
css_path = Path(__file__).resolve().parent / "static" / "css" / "custom.css"
|
||||
css_content = css_path.read_text(encoding="utf-8")
|
||||
selector_match = re.search(r"\.navbar\.header \.site-title-mobile\s*\{(?P<body>[^}]*)\}", css_content, re.DOTALL)
|
||||
self.assertIsNotNone(selector_match)
|
||||
|
||||
rule_block = selector_match.group("body")
|
||||
self.assertRegex(rule_block, r"top:\s*calc\(var\(--bs-navbar-padding-y\)\s*\+\s*20px\);")
|
||||
self.assertRegex(rule_block, r"transform:\s*translate\(-50%,\s*-50%\);")
|
||||
def test_home_mobile_welcome_title_centered(self):
|
||||
response = self.client.get(reverse("home"))
|
||||
html = response.content.decode()
|
||||
|
||||
Reference in New Issue
Block a user