Merge pull request #33 from dsaub/development

Fix mobile header alignment and improve navbar responsiveness

.github/workflows/docker-no-push.yml

@@ -0,0 +1,49 @@
+name: Build Docker Image (No Push)
+
+on:
+  push:
+    branches-ignore:
+      - development
+      - latest
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout del código
+        uses: actions/checkout@v6
+      - name: Configurar Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: '3.14'
+      - name: Instalar dependencias
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r requirements.txt
+      - name: Ejecutar tests
+        env:
+          DJANGO_SETTINGS_MODULE: proyecto.settings
+        run: |
+          python manage.py test
+
+  docker:
+    runs-on: ubuntu-latest
+    needs: test
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout del código
+        uses: actions/checkout@v6
+
+      - name: Configurar Docker Buildx
+        uses: docker/setup-buildx-action@v4
+
+      - name: Build (sin push)
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: false

.github/workflows/docker.yml

@@ -3,7 +3,8 @@ name: Build and Push Docker Image
 on:
   push:
     branches:
-      - '**' # Esto aplica para cualquier rama
+      - development
+      - latest
 
 jobs:
   test:

.gitignore

@@ -3,5 +3,7 @@ db.sqlite3
 .venv
 .env
 logs/
+__pycache__/
+*.pyc
 tienda/__pycache__/
 proyecto/__pycache__/

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;
 }
@@ -277,5 +291,3 @@ p.price {
 .texto-ajustado {
   overflow-wrap: anywhere;
 }
-
-/*# sourceMappingURL=custom.css.map */

tienda/templates/tienda/base.html

@@ -96,12 +96,14 @@
                 </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

@@ -9,8 +9,10 @@
         color: white;
         padding: 80px 20px;
         text-align: center;
-        margin-bottom: 60px;
-        border-radius: 8px;
+        margin-bottom: 0;
+        margin-left: calc(var(--bs-gutter-x) * -0.5);
+        margin-right: calc(var(--bs-gutter-x) * -0.5);
+        border-radius: 0;
     }
     
     .hero-section h1 {
@@ -99,7 +101,7 @@
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
         padding: 40px;
-        border-radius: 8px;
+        border-radius: 0;
         margin-bottom: 60px;
     }
     
@@ -116,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/templates/tienda/index.html

@@ -2,8 +2,24 @@
 {% load vat_filters %}
 {% block content %}
 <div class="row mt-2">
-    <div class="col-md-2 d-none d-lg-block">
-        <h5 class="categorias-titulo">Categorias</h5>
+    <div class="col-12 d-lg-none mb-3">
+        <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#mobileCategoriasCollapse" aria-expanded="false" aria-controls="mobileCategoriasCollapse">
+            Categorías
+        </button>
+        <div class="collapse mt-2" id="mobileCategoriasCollapse">
+            <ul class="list-group categorias-lista">
+                {% if categories %}
+                    {% for category in categories %}
+                        <li class="list-group-item categoria-item">
+                            <a href="{% url 'categoria' category.id %}">{{ category.name }}</a>
+                        </li>
+                    {% endfor %}
+                {% endif %}
+            </ul>
+        </div>
+    </div>
+    <div class="col-lg-2 d-none d-lg-block">
+        <h5 class="categorias-titulo">Categorías</h5>
         <ul class="list-group categorias-lista">
             {% if categories %}
                 {% for category in categories %}
@@ -14,7 +30,7 @@
             {% endif %}
         </ul>
     </div>
-    <div class="col-12 col-md-10 grid">
+    <div class="col-12 col-lg-10 grid">
         {% if products %}
             {% for producto in products %}
                 <div class="card card-producto mt-5" style="width: 18rem;">

tienda/tests.py

@@ -1358,6 +1358,35 @@ class EndpointViewTests(TestCase):
                 response = self.client.get(url)
                 self.assertEqual(response.status_code, 200)
 
+    def test_index_shows_mobile_categories_toggle(self):
+        response = self.client.get(reverse("index"))
+
+        self.assertEqual(response.status_code, 200)
+        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 = [
             reverse("mis_productos"),