pablo/shoppy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: styling

Browse Source
This commit is contained in:
Pablo Moreno
2025-01-17 19:22:31 +01:00
parent 21777cafb4
commit 913763fc42
2 changed files with 367 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/components/cart/cart.html
+88 -64
View File
@@ -10,30 +10,17 @@
<div class="space-y-6"> <div class="space-y-6">
{% for item in items %} {% for item in items %}
<div <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm
class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 md:p-6"> dark:border-gray-700 dark:bg-gray-800 md:p-6">
<div class="space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0"> <div class="space-y-4 flex items-center justify-between gap-6 space-y-0">
<a href="#" class="shrink-0 md:order-1"> <a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
class="shrink-0 md:order-1">
<img class="h-20 w-20 dark:hidden" src="{{ item.product.images.all|first }}" <img class="h-20 w-20 dark:hidden" src="{{ item.product.images.all|first }}"
alt="{{ item.product.name }}"/> alt="{{ item.product.name }}"/>
<img class="hidden h-20 w-20 dark:block" src="{{ item.product.images.all|first }}" <img class="hidden h-20 w-20 dark:block" src="{{ item.product.images.all|first }}"
alt="{{ item.product.name }}"/> alt="{{ item.product.name }}"/>
</a> </a>
<label for="counter-input" class="sr-only">{% translate 'Cantidad' %}</label>
<div class="flex items-center justify-between md:order-3 md:justify-end">
<div class="flex items-center">
<span
class="w-10 shrink-0 border-0 bg-transparent text-center text-sm font-medium text-gray-900 focus:outline-none focus:ring-0 dark:text-white">
{{ item.quantity }}x
</span>
</div>
<div class="text-end md:order-4 md:w-32">
<p
class="text-base font-bold text-gray-900 dark:text-white">{{ item.product.price.price_with_tax }}
€</p>
</div>
</div>
<div class="w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md"> <div class="w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md">
<a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}" <a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
@@ -54,10 +41,26 @@
{% translate 'Quitar' %} {% translate 'Quitar' %}
</button> </button>
</form> </form>
</div>
</div>
<label for="counter-input" class="sr-only">{% translate 'Cantidad' %}</label>
<div class="flex items-center justify-between md:order-3 md:justify-end">
<div class="flex items-center">
<span class="w-10 shrink-0 border-0 bg-transparent text-center text-sm font-medium
text-gray-900 focus:outline-none focus:ring-0 dark:text-white"
>
{{ item.quantity }}x
</span>
</div>
<div class="text-end md:order-4 md:w-32">
<p class="text-base font-bold text-gray-900 dark:text-white">
{{ item.product.price.price_with_tax }}€
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
{% endfor %} {% endfor %}
@@ -83,7 +86,8 @@
{% if user.is_anonymous %} {% if user.is_anonymous %}
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<label for="email" <label for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'E-Mail' %}</label> class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'E-Mail' %}</label>
<input type="text" name="email" id="email" <input type="text" name="email" id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -98,7 +102,8 @@
{% endif %} {% endif %}
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<label for="shipping_address_full_name" <label for="shipping_address_full_name"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Nombre completo' %}</label> class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'Nombre completo' %}</label>
<input type="text" name="shipping_address_full_name" id="shipping_address_full_name" <input type="text" name="shipping_address_full_name" id="shipping_address_full_name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -108,7 +113,8 @@
required="" required=""
> >
<label for="shipping_address" <label for="shipping_address"
class="block my-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Dirección' %}</label> class="block my-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'Dirección' %}</label>
<input type="text" name="shipping_address" id="shipping_address" <input type="text" name="shipping_address" id="shipping_address"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -120,7 +126,9 @@
</div> </div>
<div class="w-full"> <div class="w-full">
<label for="shipping_address_town" <label for="shipping_address_town"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Localidad' %}</label> class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'Localidad' %}
</label>
<input type="text" name="shipping_address_town" id="shipping_address_town" <input type="text" name="shipping_address_town" id="shipping_address_town"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -132,7 +140,9 @@
</div> </div>
<div class="w-full"> <div class="w-full">
<label for="shipping_address_zip" <label for="shipping_address_zip"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Código postal' %}</label> class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'Código postal' %}
</label>
<input type="text" name="shipping_address_zip" id="shipping_address_zip" <input type="text" name="shipping_address_zip" id="shipping_address_zip"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -145,7 +155,9 @@
<div> <div>
<label for="shipping_address_state" <label for="shipping_address_state"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Provincia' %}</label> class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'Provincia' %}
</label>
<input type="text" name="shipping_address_state" id="shipping_address_state" <input type="text" name="shipping_address_state" id="shipping_address_state"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -158,7 +170,9 @@
</div> </div>
<div> <div>
<label for="shipping_address_country" <label for="shipping_address_country"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'País' %}</label> class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'País' %}
</label>
<input type="text" name="shipping_address_country" id="shipping_address_country" <input type="text" name="shipping_address_country" id="shipping_address_country"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -181,7 +195,8 @@
<div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2"> <div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<label for="billing_address_full_name" <label for="billing_address_full_name"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Nombre completo' %}</label> class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'Nombre completo' %}</label>
<input type="text" name="billing_address_full_name" id="billing_address_full_name" <input type="text" name="billing_address_full_name" id="billing_address_full_name"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -191,7 +206,9 @@
required="" required=""
> >
<label for="billing_address" <label for="billing_address"
class="block my-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Dirección' %}</label> class="block my-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'Dirección' %}
</label>
<input type="text" name="billing_address" id="billing_address" <input type="text" name="billing_address" id="billing_address"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -203,7 +220,9 @@
</div> </div>
<div class="w-full"> <div class="w-full">
<label for="billing_address_town" <label for="billing_address_town"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Localidad' %}</label> class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'Localidad' %}
</label>
<input type="text" name="billing_address_town" id="billing_address_town" <input type="text" name="billing_address_town" id="billing_address_town"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -215,7 +234,9 @@
</div> </div>
<div class="w-full"> <div class="w-full">
<label for="billing_address_zip" <label for="billing_address_zip"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Código postal' %}</label> class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'Código postal' %}
</label>
<input type="text" name="billing_address_zip" id="billing_address_zip" <input type="text" name="billing_address_zip" id="billing_address_zip"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -228,7 +249,9 @@
<div> <div>
<label for="billing_address_state" <label for="billing_address_state"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Provincia' %}</label> class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'Provincia' %}
</label>
<input type="text" name="billing_address_state" id="billing_address_state" <input type="text" name="billing_address_state" id="billing_address_state"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -241,7 +264,9 @@
</div> </div>
<div> <div>
<label for="billing_address_country" <label for="billing_address_country"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'País' %}</label> class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
{% translate 'País' %}
</label>
<input type="text" name="billing_address_country" id="billing_address_country" <input type="text" name="billing_address_country" id="billing_address_country"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
@@ -263,9 +288,11 @@
{% for shipping_method in shipping_methods %} {% for shipping_method in shipping_methods %}
<div class="p-4"> <div class="p-4">
<input type="radio" id="shipping_method_{{ shipping_method.pk }}" name="shipping_method" <input type="radio" id="shipping_method_{{ shipping_method.pk }}"
name="shipping_method"
value="{{ shipping_method.pk }}" {% if forloop.first %}checked{% endif %}> value="{{ shipping_method.pk }}" {% if forloop.first %}checked{% endif %}>
<label for="shipping_method_{{ shipping_method.pk }}" class="text-gray-900 dark:text-white"> <label for="shipping_method_{{ shipping_method.pk }}"
class="text-gray-900 dark:text-white">
{{ shipping_method.name }} - {{ shipping_method.shipping_product.price.price_with_tax }}€ {{ shipping_method.name }} - {{ shipping_method.shipping_product.price.price_with_tax }}€
</label> </label>
{% if not forloop.last %} {% if not forloop.last %}
@@ -285,41 +312,55 @@
<div class="mx-auto mt-6 max-w-4xl flex-1 space-y-6 lg:mt-0 lg:w-full"> <div class="mx-auto mt-6 max-w-4xl flex-1 space-y-6 lg:mt-0 lg:w-full">
<div <div
class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6"> class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6">
<p class="text-xl font-semibold text-gray-900 dark:text-white">{% translate 'Resumen del pedido' %}</p> <p class="text-xl font-semibold text-gray-900 dark:text-white">
{% translate 'Resumen del pedido' %}
</p>
<div class="space-y-4"> <div class="space-y-4">
<div class="space-y-2"> <div class="space-y-2">
<dl class="flex items-center justify-between gap-4"> <dl class="flex items-center justify-between gap-4">
<dt <dt
class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Base imponible' %}</dt> class="text-base font-normal text-gray-500 dark:text-gray-400">
<dd class="text-base font-medium text-gray-900 dark:text-white">{{ base_total }} €</dd> {% translate 'Base imponible' %}
</dt>
<dd class="text-base font-medium text-gray-900 dark:text-white">{{ base_total }} €
</dd>
</dl> </dl>
<dl class="flex items-center justify-between gap-4"> <dl class="flex items-center justify-between gap-4">
<dt class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Descuentos' %}</dt> <dt class="text-base font-normal text-gray-500 dark:text-gray-400">
{% translate 'Descuentos' %}
</dt>
<dd class="text-base font-medium text-green-600">-{{ savings }} €</dd> <dd class="text-base font-medium text-green-600">-{{ savings }} €</dd>
</dl> </dl>
<dl class="flex items-center justify-between gap-4"> <dl class="flex items-center justify-between gap-4">
<dt <dt
class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Gastos de envío' %}</dt> class="text-base font-normal text-gray-500 dark:text-gray-400">
<dd class="text-base font-medium text-gray-900 dark:text-white">{{ shipping_cost }} €</dd> {% translate 'Gastos de envío' %}
</dt>
<dd class="text-base font-medium text-gray-900 dark:text-white">
{{ shipping_cost }} €
</dd>
</dl> </dl>
<dl class="flex items-center justify-between gap-4"> <dl class="flex items-center justify-between gap-4">
<dt class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Impuestos' %}</dt> <dt class="text-base font-normal text-gray-500 dark:text-gray-400">
<dd class="text-base font-medium text-gray-900 dark:text-white">{{ tax_total }} €</dd> {% translate 'Impuestos' %}
</dt>
<dd class="text-base font-medium text-gray-900 dark:text-white">{{ tax_total }} €
</dd>
</dl> </dl>
</div> </div>
<dl class="flex items-center justify-between gap-4 border-t border-gray-200 pt-2 dark:border-gray-700"> <dl class="flex items-center justify-between gap-4 border-t border-gray-200 pt-2 dark:border-gray-700">
<dt class="text-base font-bold text-gray-900 dark:text-white">{% translate 'Total' %}</dt> <dt class="text-base font-bold text-gray-900 dark:text-white">{% translate 'Total' %}
</dt>
<dd class="text-base font-bold text-gray-900 dark:text-white">{{ total }} €</dd> <dd class="text-base font-bold text-gray-900 dark:text-white">{{ total }} €</dd>
</dl> </dl>
</div> </div>
<button <button class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
{% translate 'Terminar pedido' %} {% translate 'Terminar pedido' %}
</button> </button>
@@ -331,23 +372,6 @@
</a> </a>
</div> </div>
</div> </div>
{# <div#}
{# class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6">#}
{# <form class="space-y-4">#}
{# <div>#}
{# <label for="voucher" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"> Do you have a#}
{# voucher or gift card? </label>#}
{# <input type="text" id="voucher"#}
{# class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"#}
{# placeholder="" required/>#}
{# </div>#}
{# <button type="submit"#}
{# class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">#}
{# Apply Code#}
{# </button>#}
{# </form>#}
{# </div>#}
</div> </div>
</div> </div>
web/templates/components/cart/cart_navbar.html
+3 -2
View File
@@ -14,7 +14,7 @@
<!-- Cart --> <!-- Cart -->
<div id="myCartDropdown1" <div id="myCartDropdown1"
class="absolute top-10 z-10 mx-auto max-w-sm space-y-4 overflow-hidden rounded-lg bg-white p-4 antialiased shadow-lg dark:bg-gray-800 hidden" class="absolute top-10 z-10 w-56 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700 right-0 p-4 hidden"
> >
<div> <div>
{% if cart.items.count == 0 %} {% if cart.items.count == 0 %}
@@ -24,7 +24,7 @@
{% for cart_item in cart.items.all %} {% for cart_item in cart.items.all %}
<div> <div>
<a href="{% url 'web:product_detail' pk=cart_item.product.pk slug=cart_item.product.slug %}" <a href="{% url 'web:product_detail' pk=cart_item.product.pk slug=cart_item.product.slug %}"
class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline"> class="text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">
{{ cart_item.product.name }} {{ cart_item.product.name }}
</a> </a>
@@ -58,6 +58,7 @@
</div> </div>
</div> </div>
</div> </div>
<hr class="my-2" />
{% endfor %} {% endfor %}
</div> </div>