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

fix: refactor css

Browse Source
This commit is contained in:
Pablo Moreno
2025-01-28 17:21:57 +01:00
parent 33c5432019
commit 69fc6d4d5a
8 changed files with 107 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/static/css/components.css
+80
View File
@@ -0,0 +1,80 @@
@layer components {
.card {
@apply rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800;
}
.link {
@apply text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white;
}
.product-grid {
@apply mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5;
}
.button-gray {
@apply rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer;
}
.page {
@apply flex justify-center items-center text-lg text-gray-900 dark:text-gray-400 mt-4;
}
.navbar-bg {
@apply bg-white dark:bg-gray-800 antialiased;
}
.navbar-content {
@apply max-w-screen-xl px-4 mx-auto 2xl:px-0 py-4;
}
.navbar-align {
@apply flex items-center justify-between;
}
.navbar-categories {
@apply hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center;
}
.navbar-web-title {
@apply text-xl font-semibold text-gray-900 dark:text-white;
}
.navbar-title {
@apply flex items-center space-x-8;
}
.navbar-category-link {
@apply flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500;
}
.navbar-dropdown-menu {
@apply bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border border-gray-200 rounded-lg py-3 px-4 mt-4;
}
.navbar-dropdown-menu-list {
@apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
}
.navbar-dropdown-menu-list-items {
@apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
}
.navbar-dropdown-menu-title {
@apply hover:text-primary-700 dark:hover:text-primary-500;
}
.icon-button {
@apply flex text-gray-500 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-4 cursor-pointer;
}
.link-button {
@apply inline-flex items-center rounded-lg justify-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white;
}
.cart-navbar-floating {
@apply absolute top-12 z-10 w-75 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;
}
}
theme/static/css/main.css
+1 -1
View File
@@ -1,4 +1,5 @@
@import "tailwindcss";
@import "./components.css";
@theme {
@@ -7,7 +8,6 @@
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* ... */
--color-primary-50: #fff1f2;
--color-primary-100: #ffe4e6;
--color-primary-200: #fecdd3;
theme/templates/components/theme-switch.html
+1 -1
View File
@@ -3,7 +3,7 @@
id="theme-toggle"
type="button"
aria-label="switchtheme"
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-4 cursor-pointer">
class="icon-button">
{% include 'components/icons/moon.svg' %}
{% include 'components/icons/sun.svg' %}
</button>
theme/templates/theme/main.css.template
+1
View File
@@ -1,4 +1,5 @@
@import "tailwindcss";
@import "./components.css";
@theme {
web/templates/components/cart/cart_navbar.html
+2 -3
View File
@@ -3,7 +3,7 @@
hx-on:click="htmx.toggleClass(htmx.find('#myCartDropdown1'), 'hidden'); htmx.addClass(htmx.find('#userDropdown1'), 'hidden')"
id="myCartDropdownButton1"
data-dropdown-toggle="myCartDropdown1" type="button"
class="inline-flex items-center rounded-lg justify-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white cursor-pointer">
class="icon-button">
{% include 'components/icons/cart.svg' %}
<span class="hidden sm:flex">
{% translate 'Carrito' %}</span>
@@ -12,8 +12,7 @@
<!-- Cart -->
<div id="myCartDropdown1"
class="absolute top-12 z-10 w-68 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"
class="cart-navbar-floating hidden"
>
<div>
{% if cart.items.count == 0 %}
web/templates/components/generic/navbar.html
+16 -16
View File
@@ -1,31 +1,31 @@
{% load i18n %}
{% load static %}
<nav class="bg-white dark:bg-gray-800 antialiased">
<nav class="navbar-bg">
<!-- Left side -->
<div class="max-w-screen-xl px-4 mx-auto 2xl:px-0 py-4">
<div class="flex items-center justify-between">
<div class="navbar-content">
<div class="navbar-align">
<!-- Title -->
<div class="flex items-center space-x-8">
<div class="navbar-title">
<div class="shrink-0">
<a class="flex flex-row items-center" href="{% url 'web:index' %}">
<img class="w-8 h-8 mr-2" src="{{ logo }}" alt="{{ web_title }} logo">
<h1 class="text-xl font-semibold text-gray-900 dark:text-white">{{ web_title }}</h1>
<h1 class="navbar-web-title">{{ web_title }}</h1>
</a>
</div>
<!-- Categories -->
<ul class="hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center">
<ul class="navbar-categories">
<li>
<a href="{% url 'web:index' %}" title=""
class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
class="navbar-category-link">
{% translate 'Inicio' %}
</a>
</li>
{% for category in navbar_categories %}
<li class="shrink-0">
<a href="{% url 'web:category_view' slug=category.slug %}" title=""
class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
class="navbar-category-link">
{{ category.name }}
</a>
</li>
@@ -48,7 +48,7 @@
id="userDropdownButton1"
data-dropdown-toggle="userDropdown1" type="button"
aria-label="show menu"
class="inline-flex items-center rounded-lg justify-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white cursor-pointer">
class="icon-button">
{% include 'components/icons/user.svg' %}
<span class="hidden sm:flex">
{% translate 'Mi cuenta' %}
@@ -63,8 +63,8 @@
</div>
{% else %}
<a href="{% url 'web:login' %}"
class="inline-flex items-center rounded-lg justify-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
Inicia sesión
class="link-button">
{% translate 'Inicia sesión' %}
</a>
{% endif %}
@@ -73,7 +73,7 @@
data-collapse-toggle="ecommerce-navbar-menu-1" aria-controls="ecommerce-navbar-menu-1"
aria-expanded="false"
aria-label="show menu"
class="inline-flex lg:hidden items-center justify-center hover:bg-gray-100 rounded-md dark:hover:bg-gray-700 p-4 text-gray-900 dark:text-white cursor-pointer">
class="icon-button lg:hidden">
<span class="sr-only">
{% translate 'Abrir menú' %}
</span>
@@ -83,17 +83,17 @@
</div>
<div id="ecommerce-navbar-menu-1"
class="bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border border-gray-200 rounded-lg py-3 hidden px-4 mt-4">
<ul class="text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3">
class="navbar-dropdown-menu hidden">
<ul class="navbar-dropdown-menu-list">
<li>
<a href="{% url 'web:index' %}"
class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Inicio' %}</a>
class="navbar-dropdown-menu-title">{% translate 'Inicio' %}</a>
</li>
{% for category in navbar_categories %}
<li>
<a href="{% url 'web:category_view' slug=category.slug %}"
class="hover:text-primary-700 dark:hover:text-primary-500">{{ category.name }}</a>
class="navbar-dropdown-menu-title">{{ category.name }}</a>
</li>
{% endfor %}
</ul>
web/templates/components/product_card.html
+2 -2
View File
@@ -1,7 +1,7 @@
{% load i18n %}
<article>
<div
class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
class="card">
<div class="h-56 w-full">
<a href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}">
<img class="mx-auto h-full dark:hidden" src="{{ product.images.all|first }}"
@@ -13,7 +13,7 @@
<div class="pt-6">
<a href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}"
class="text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white">{{ product.name }}</a>
class="link">{{ product.name }}</a>
<!-- <div class="mt-2 flex items-center gap-2">-->
<!-- <div class="flex items-center">-->
web/templates/web/list_products.html
+4 -10
View File
@@ -1,7 +1,7 @@
{% load i18n %}
{% load static %}
<ul class="mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5">
<ul class="product-grid">
{% for product in page %}
<li>
{% include 'components/product_card.html' %}
@@ -12,10 +12,7 @@
<div class="flex justify-center items-center">
{% if has_previous_page %}
<button type="button"
class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer"
class="button-gray"
hx-get="{% url 'web:list_products' %}{% querystring page=page.previous_page_number %}"
hx-trigger="click"
hx-target="#products"
@@ -26,10 +23,7 @@
{% endif %}
{% if has_next_page %}
<button type="button"
class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer"
class="button-gray"
hx-get="{% url 'web:list_products' %}{% querystring page=page.next_page_number %}"
hx-trigger="click"
hx-target="#products"
@@ -40,6 +34,6 @@
{% endif %}
</div>
<span class="flex justify-center items-center text-lg text-gray-900 dark:text-gray-400 mt-4">
<span class="page">
{% blocktranslate %}Página {{ current_page }} de {{ num_pages }}{% endblocktranslate %}
</span>