fix: responsive
CI / test (push) Failing after 1m8s
CI / build (push) Has been skipped

This commit is contained in:
2026-07-23 18:36:07 +02:00
parent 332e0fc5f4
commit ec15d8ef2e
9 changed files with 112 additions and 56 deletions
+44 -33
View File
@@ -1,4 +1,3 @@
{% load static %}
<!DOCTYPE html>
<html lang="es" data-theme="light">
<head>
@@ -9,42 +8,54 @@
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css"/>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
{% block extra_js %}
{% endblock %}
</head>
<body class="min-h-screen bg-base-200">
<div class="flex min-h-screen">
<aside class="w-64 shrink-0 bg-base-100 border-r border-base-300">
<a href="{% url 'backoffice:dashboard' %}" class="text-xl font-semibold block p-4">Backoffice</a>
<ul class="menu w-full">
<li>
<a href="{% url 'backoffice:product_list' %}" class="{% if section == 'products' %}menu-active{% endif %}">Productos</a>
</li>
<li>
<a href="{% url 'backoffice:order_list' %}" class="{% if section == 'orders' %}menu-active{% endif %}">Pedidos</a>
</li>
<li>
<a href="{% url 'backoffice:payment_list' %}" class="{% if section == 'payments' %}menu-active{% endif %}">Pagos</a>
</li>
<li>
<a href="{% url 'backoffice:customer_list' %}" class="{% if section == 'customers' %}menu-active{% endif %}">Clientes</a>
</li>
<li>
<a href="{% url 'backoffice:provider_list' %}" class="{% if section == 'providers' %}menu-active{% endif %}">Proveedores</a>
</li>
<li>
<a href="{% url 'backoffice:tax_list' %}" class="{% if section == 'taxes' %}menu-active{% endif %}">Impuestos</a>
</li>
<li>
<a href="{% url 'backoffice:brand_settings' %}" class="{% if section == 'settings' %}menu-active{% endif %}">Marca y ajustes</a>
</li>
</ul>
</aside>
<main class="flex-1 p-6">
{% block main %}
{% endblock %}
</main>
<div class="drawer lg:drawer-open">
<input id="backoffice-drawer" type="checkbox" class="drawer-toggle"/>
<div class="drawer-content flex flex-col min-h-screen">
<div class="navbar bg-base-100 border-b border-base-300 lg:hidden">
<label for="backoffice-drawer" class="btn btn-square btn-ghost" aria-label="Abrir menú"></label>
<span class="text-lg font-semibold ml-2">Backoffice</span>
</div>
<main class="flex-1 p-4 lg:p-6 overflow-x-hidden">
{% block main %}
{% endblock %}
</main>
</div>
<div class="drawer-side z-20">
<label for="backoffice-drawer" aria-label="Cerrar menú" class="drawer-overlay"></label>
<aside class="w-64 min-h-full bg-base-100 border-r border-base-300">
<a href="{% url 'backoffice:dashboard' %}" class="text-xl font-semibold block p-4">Backoffice</a>
<ul class="menu w-full">
<li>
<a href="{% url 'backoffice:product_list' %}" class="{% if section == 'products' %}menu-active{% endif %}">Productos</a>
</li>
<li>
<a href="{% url 'backoffice:order_list' %}" class="{% if section == 'orders' %}menu-active{% endif %}">Pedidos</a>
</li>
<li>
<a href="{% url 'backoffice:payment_list' %}" class="{% if section == 'payments' %}menu-active{% endif %}">Pagos</a>
</li>
<li>
<a href="{% url 'backoffice:customer_list' %}" class="{% if section == 'customers' %}menu-active{% endif %}">Clientes</a>
</li>
<li>
<a href="{% url 'backoffice:provider_list' %}" class="{% if section == 'providers' %}menu-active{% endif %}">Proveedores</a>
</li>
<li>
<a href="{% url 'backoffice:tax_list' %}" class="{% if section == 'taxes' %}menu-active{% endif %}">Impuestos</a>
</li>
<li>
<a href="{% url 'backoffice:brand_settings' %}" class="{% if section == 'settings' %}menu-active{% endif %}">Marca y ajustes</a>
</li>
</ul>
</aside>
</div>
</div>
<dialog id="backoffice-modal" class="modal">
@@ -5,7 +5,7 @@
{% block main %}
<h1 class="text-2xl font-semibold mb-6">Backoffice</h1>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{% for section in sections %}
<a href="{% url section.url_name %}" class="card bg-base-100 border border-base-300 shadow-sm hover:shadow-md transition-shadow">
<div class="card-body">
@@ -3,7 +3,7 @@
{% block title %}{{ title }}{% endblock %}
{% block main %}
<div class="flex justify-between items-center mb-4">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 mb-4">
<h1 class="text-2xl font-semibold">{{ title }}</h1>
{% if create_url %}
{% if create_is_page %}
@@ -5,7 +5,7 @@
{% block main %}
<h1 class="text-2xl font-semibold mb-4">Pedido {{ object.code }}</h1>
<div class="stats shadow mb-6 bg-base-100">
<div class="stats stats-vertical sm:stats-horizontal shadow mb-6 bg-base-100 w-full sm:w-auto">
<div class="stat">
<div class="stat-title">Cliente</div>
<div class="stat-value text-lg">{{ object.email }}</div>
@@ -16,20 +16,20 @@
{% url 'backoffice:product_inline_view' product.pk 'tags' as tags_view_url %}
{% url 'backoffice:product_inline_edit' product.pk 'tags' as tags_edit_url %}
<div class="flex justify-between items-center mb-4">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 mb-4">
{% include 'backoffice/products/_inline_view.html' with field_name='name' view_url=name_view_url edit_url=name_edit_url %}
<div class="flex gap-2">
<button class="btn btn-sm btn-error" hx-get="{% url 'backoffice:product_delete' product.pk %}" hx-target="#backoffice-modal-box" hx-swap="innerHTML">Borrar</button>
</div>
</div>
<div class="flex gap-6 mb-6">
<div class="flex flex-col sm:flex-row gap-6 mb-6">
{% with images.first as main_image %}
<div class="shrink-0 w-64">
<div class="shrink-0 w-full sm:w-64">
{% if main_image %}
<img class="w-64 h-64 object-cover rounded-box border border-base-300 shadow" src="{{ main_image.l.url }}" alt="{{ product.name }}">
<img class="w-full h-64 sm:w-64 object-cover rounded-box border border-base-300 shadow" src="{{ main_image.l.url }}" alt="{{ product.name }}">
{% else %}
<div class="w-64 h-64 rounded-box border border-base-300 border-dashed flex items-center justify-center text-sm opacity-50">
<div class="w-full h-64 sm:w-64 rounded-box border border-base-300 border-dashed flex items-center justify-center text-sm opacity-50">
Sin imagen
</div>
{% endif %}
@@ -37,7 +37,7 @@
{% endwith %}
<section class="w-full">
<div class="stats shadow bg-base-100 self-start">
<div class="stats stats-vertical sm:stats-horizontal shadow bg-base-100 self-start w-full sm:w-auto">
<div class="stat">
<div class="stat-title">SKU</div>
<div class="stat-value text-lg">{{ product.sku }}</div>
@@ -58,7 +58,7 @@
{% include 'backoffice/products/_inline_view.html' with field_name='description' view_url=description_view_url edit_url=description_edit_url %}
</div>
<div class="grid grid-cols-3 gap-4 m-4">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 m-4">
<div>
<h3 class="text-sm font-medium opacity-70 mb-1">Marca</h3>
{% include 'backoffice/products/_inline_view.html' with field_name='brand' view_url=brand_view_url edit_url=brand_edit_url %}
@@ -18,7 +18,7 @@
{{ form.description.errors }}
</div>
<div class="grid grid-cols-3 gap-4 mb-6">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
<div>
<h3 class="text-sm font-medium opacity-70 mb-1">Marca</h3>
{% include 'backoffice/products/_combobox.html' with field_name='brand' multiple=False %}
@@ -33,7 +33,7 @@
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-4 max-w-md">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4 max-w-md">
<div>
<label class="text-sm font-medium opacity-70 mb-1 block" for="{{ form.sku.id_for_label }}">Código de referencia</label>
{{ form.sku }}
@@ -57,7 +57,7 @@
<div class="mb-6 max-w-md">
<h3 class="text-sm font-medium opacity-70 mb-1">Precio inicial (opcional)</h3>
<div class="grid grid-cols-2 gap-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
{{ price_form.price }}
{{ price_form.price.errors }}