Merge branch 'development' into copilot/add-categories-toggle-button

tienda/static/css/custom.css

@@ -51,12 +51,26 @@ p.price {
   background-color: #513CB0 !important;
   color: #FFF;
 }
+.navbar.header .container-fluid {
+  position: relative;
+}
 .navbar.header .navbar-brand img {
   border-radius: 10px;
 }
 .navbar.header .navbar-brand {
   color: #FFF !important;
 }
+.navbar.header .site-title-mobile {
+  color: #FFF;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 0;
+  max-width: calc(100% - 9rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .navbar.header .navbar-toggler {
   border-color: #FFF !important;
 }
@@ -276,4 +290,4 @@ p.price {
 
 .texto-ajustado {
   overflow-wrap: anywhere;
-}
+}

tienda/templates/tienda/base.html

@@ -95,13 +95,15 @@
                         decoding="async">
                 </picture>
             </a>
+
+            <span class="navbar-text fw-semibold site-title-mobile d-md-none">Comercialmeria</span>
             
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             
             <div class="collapse navbar-collapse" id="navbarContent">
-                <span class="navbar-text fw-semibold me-3" style="color: #ffffff">Comercialmeria</span>
+                <span class="navbar-text fw-semibold me-3 d-none d-md-inline site-title-desktop" style="color: #ffffff">Comercialmeria</span>
                 <!-- Barra de búsqueda con sugerencias -->
                 <form class="search-suggestions-container" method="GET" action="{% url 'search' %}" role="search" id="searchForm">
                     <div class="input-group">

tienda/templates/tienda/home.html

@@ -118,6 +118,13 @@
         font-size: 1.1rem;
         opacity: 0.9;
     }
+
+    @media (max-width: 767.98px) {
+        .hero-section h1 {
+            text-align: center;
+            text-wrap: balance;
+        }
+    }
 </style>
 {% endblock %}
 

tienda/tests.py

@@ -1365,6 +1365,26 @@ class EndpointViewTests(TestCase):
         self.assertContains(response, 'data-bs-target="#mobileCategoriasCollapse"')
         self.assertContains(response, 'id="mobileCategoriasCollapse"')
         self.assertContains(response, ">Categorías<")
+    def test_home_header_renders_mobile_title_outside_collapsible_menu(self):
+        response = self.client.get(reverse("home"))
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(response, 'site-title-mobile d-md-none')
+        self.assertContains(response, 'site-title-desktop')
+    def test_home_mobile_welcome_title_centered(self):
+        response = self.client.get(reverse("home"))
+        html = response.content.decode()
+        media_idx = html.find("@media (max-width: 767.98px)")
+        self.assertNotEqual(media_idx, -1)
+
+        rule_idx = html.find(".hero-section h1", media_idx)
+        self.assertNotEqual(rule_idx, -1)
+
+        block_end_idx = html.find("}", rule_idx)
+        self.assertNotEqual(block_end_idx, -1)
+        rule_block = html[rule_idx:block_end_idx]
+
+        self.assertIn("text-align: center", rule_block)
+        self.assertIn("text-wrap: balance", rule_block)
 
     def test_login_required_endpoints_redirect_anonymous(self):
         secured_get_routes = [