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

feat: tailwind 4.0

Browse Source
This commit is contained in:
Pablo Moreno
2025-01-23 14:30:02 +01:00
parent d5a4345600
commit 8039288b33
31 changed files with 108 additions and 1708 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/settings/base.py
-1
View File
@@ -34,7 +34,6 @@ THIRD_PARTY_APPS = [
"drf_spectacular",
"gonk",
"rest_framework_simplejwt",
"tailwind",
]
PROJECT_APPS = [
config/urls.py
+1
View File
@@ -12,6 +12,7 @@ urlpatterns = [
path("tpv/", include("shop.urls", namespace="shop")),
]
if settings.DEBUG:
urlpatterns.append(path("__debug__/", include(debug_toolbar.urls)))
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
requirements.txt
+1 -1
View File
@@ -11,7 +11,6 @@ django-environ==0.10.0
django-watchman==1.3.0
django-silk==5.1.0
django-storages==1.13.2
django-tailwind==3.8.0
django-unfold==0.42.0
djangorestframework==3.15.2
dj-database-url==1.0.0
@@ -24,5 +23,6 @@ psycopg2-binary==2.9.9
pyDes==2.0.1
redis==4.5.4
requests==2.32.3
pytailwindcss==0.2.0
uvicorn==0.21.1
xmltodict==0.13.0
theme/static_src/tailwind.config.js → tailwind.config.js
-13
View File
@@ -50,19 +50,6 @@ module.exports = {
gray: colors.zinc,
accent: colors.teal,
primary: colors.rose,
secondary: {
50: '#d1daf5',
100: '#bac3e0',
200: '#a4accc',
300: '#8e96b8',
400: '#7a81a4',
500: '#656c91',
DEFAULT: '#52587e',
600: '#3f446b',
700: '#2c3259',
800: '#192047',
900: '#070e36'
}
}
}
},
theme/management/commands/build_tailwind_theme.py
+28 -3
View File
@@ -1,4 +1,8 @@
import os
import subprocess
from dataclasses import dataclass
from django.conf import settings
from django.core.management.base import BaseCommand
from django.template.loader import render_to_string
@@ -6,6 +10,13 @@ from django.core.management import call_command
from web.models import WebSettings
@dataclass
class Color:
name: str
index: int
value: str
class Command(BaseCommand):
"""
Usage:
@@ -16,15 +27,29 @@ class Command(BaseCommand):
def handle(self, *args, **options):
web_settings = WebSettings.load()
path = os.path.join(
settings.BASE_DIR, "theme", "static_src", "tailwind.config.js"
settings.BASE_DIR, "theme", "static", "css", "main.css"
)
colors = []
for color_name, data in web_settings.theme_colors.items():
for index, value in data.items():
color = Color(color_name, index, value)
colors.append(color)
result = str(
render_to_string(
"theme/tailwind.config.template.js", context=web_settings.theme_colors
"theme/main.css.template", context={"colors": colors},
)
)
with open(path, "w") as f:
f.write(result)
call_command("tailwind", "build")
subprocess.run([
"tailwindcss",
"-i",
"theme/static/css/main.css",
"-o",
"theme/static/css/styles.css",
"--minify",
])
call_command("collectstatic", "--no-input")
theme/static/css/main.css
+36
View File
@@ -0,0 +1,36 @@
@import "tailwindcss";
@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--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;
--color-primary-300: #fda4af;
--color-primary-400: #fb7185;
--color-primary-500: #f43f5e;
--color-primary-600: #e11d48;
--color-primary-700: #be123c;
--color-primary-800: #9f1239;
--color-primary-900: #881337;
--color-primary-950: #4c0519;
--color-gray-50: #fafafa;
--color-gray-100: #f4f4f5;
--color-gray-200: #e4e4e7;
--color-gray-300: #d4d4d8;
--color-gray-400: #a1a1aa;
--color-gray-500: #71717a;
--color-gray-600: #52525b;
--color-gray-700: #3f3f46;
--color-gray-800: #27272a;
--color-gray-900: #18181b;
--color-gray-950: #09090b;
}
@variant dark (&:where(.dark, .dark *));
theme/static/css/styles.css
+2
View File
File diff suppressed because one or more lines are too long
theme/static_src/.gitignore
-1
View File
@@ -1 +0,0 @@
node_modules
theme/static_src/package-lock.json
Generated
-1537
View File
File diff suppressed because it is too large Load Diff
theme/static_src/package.json
-28
View File
@@ -1,28 +0,0 @@
{
"name": "theme",
"version": "3.8.0",
"description": "",
"scripts": {
"start": "npm run dev",
"build": "npm run build:clean && npm run build:tailwind",
"build:clean": "rimraf ../static/css/dist",
"build:tailwind": "cross-env NODE_ENV=production tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css --minify",
"dev": "cross-env NODE_ENV=development tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css -w",
"tailwindcss": "node ./node_modules/tailwindcss/lib/cli.js"
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10",
"cross-env": "^7.0.3",
"postcss": "^8.4.32",
"postcss-import": "^15.1.0",
"postcss-nested": "^6.0.1",
"postcss-simple-vars": "^7.0.1",
"rimraf": "^5.0.5",
"tailwindcss": "^3.4.0"
}
}
theme/static_src/postcss.config.js
-7
View File
@@ -1,7 +0,0 @@
module.exports = {
plugins: {
"postcss-import": {},
"postcss-simple-vars": {},
"postcss-nested": {}
},
}
theme/static_src/src/styles.css
-3
View File
@@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
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-2.5">
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-2.5 cursor-pointer">
{% include 'components/icons/moon.svg' %}
{% include 'components/icons/sun.svg' %}
</button>
theme/templates/theme/base.html
+2 -2
View File
@@ -1,4 +1,4 @@
{% load static tailwind_tags %}
{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
@@ -12,7 +12,7 @@
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
<script src="https://unpkg.com/htmx.org@2.0.3"></script>
{% tailwind_css %}
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
{% block extra_js %}
{% endblock %}
</head>
theme/templates/theme/main.css.template
+16
View File
@@ -0,0 +1,16 @@
@import "tailwindcss";
@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* ... */
{% for color in colors %}
--color-{{ color.name }}-{{ color.index }}: {{ color.value }};
{% endfor %}
}
@variant dark (&:where(.dark, .dark *));
theme/templates/theme/tailwind.config.template.js
-90
View File
@@ -1,90 +0,0 @@
/**
* This is a minimal config.
*
* If you need the full config, get it from here:
* https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
*/
const colors = require('tailwindcss/colors')
module.exports = {
content: [
/**
* HTML. Paths to Django template files that will contain Tailwind CSS classes.
*/
/* Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
'../templates/**/*.html',
/*
* Main templates directory of the project (BASE_DIR/templates).
* Adjust the following line to match your project structure.
*/
'../../templates/**/*.html',
/*
* Templates in other django apps (BASE_DIR/<any_app_name>/templates).
* Adjust the following line to match your project structure.
*/
'../../**/templates/**/*.html',
/**
* JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
* patterns match your project structure.
*/
/* JS 1: Ignore any JavaScript in node_modules folder. */
// '!../../**/node_modules',
/* JS 2: Process all JavaScript files in the project. */
// '../../**/*.js',
/**
* Python: If you use Tailwind CSS classes in Python, uncomment the following line
* and make sure the pattern below matches your project structure.
*/
// '../../**/*.py'
],
darkMode: 'class',
theme: {
extend: {
colors: {
{% if gray %}
gray: {
{% for k, v in gray.items %}
{{k}}: '{{v}}'{% if not forloop.last %},{% endif %}
{% endfor %}
},
{% else %}
gray: colors.zinc,
{% endif %}
{% if accent %}
accent: {
{% for k, v in accent.items %}
{{k}}: '{{v}}'{% if not forloop.last %},{% endif %}
{% endfor %}
},
{% else %}
accent: colors.teal,
{% endif %}
{% if primary %}
primary: {
{% for k, v in primary.items %}
{{k}}: '{{v}}'{% if not forloop.last %},{% endif %}
{% endfor %}
},
{% else %}
primary: colors.rose,
{% endif %}
}
}
},
plugins: [
/**
* '@tailwindcss/forms' is the forms plugin that provides a minimal styling
* for forms. If you don't like it or have own styling for forms,
* comment the line below to disable '@tailwindcss/forms'.
*/
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
],
}
web/templates/components/cart/add_to_cart.html
+1 -1
View File
@@ -11,7 +11,7 @@
<button class="w-full flex 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
content-center items-center"
content-center items-center cursor-pointer"
>
{% include 'components/icons/add_cart.svg' %}
{% translate 'Añadir al carrito' %}
web/templates/components/cart/cart.html
+2 -2
View File
@@ -35,7 +35,7 @@
{% csrf_token %}
<button
type="submit"
class="inline-flex items-center text-sm font-medium text-red-700 hover:underline dark:text-red-400"
class="inline-flex items-center text-sm font-medium text-red-700 hover:underline dark:text-red-400 cursor-pointer"
>
{% include 'components/icons/x.svg' %}
{% translate 'Quitar' %}
@@ -360,7 +360,7 @@
</dl>
</div>
<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">
<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 cursor-pointer">
{% translate 'Terminar pedido' %}
</button>
web/templates/components/cart/cart_navbar.html
+2 -2
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-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white cursor-pointer">
{% include 'components/icons/cart.svg' %}
<span class="hidden sm:flex">
{% translate 'Carrito' %}</span>
@@ -39,7 +39,7 @@
</span>
<button data-tooltip-target="tooltipRemoveItem1a" type="submit"
class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600"
class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600 cursor-pointer"
>
{% csrf_token %}
<span class="sr-only">{% translate 'Quitar' %}</span>
web/templates/components/default/form.html
+1 -1
View File
@@ -23,7 +23,7 @@
<footer class="flex justify-end">
<button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600
dark:hover:bg-primary-700 dark:focus:ring-primary-800"
dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer"
>
{{ save_button_text }}
</button>
web/templates/components/generic/navbar.html
+2 -2
View File
@@ -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-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white cursor-pointer">
{% include 'components/icons/user.svg' %}
<span class="hidden sm:flex">
{% translate 'Mi cuenta' %}
@@ -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-2 text-gray-900 dark:text-white">
class="inline-flex lg:hidden items-center justify-center hover:bg-gray-100 rounded-md dark:hover:bg-gray-700 p-2 text-gray-900 dark:text-white cursor-pointer">
<span class="sr-only">
{% translate 'Abrir menú' %}
</span>
web/templates/components/generic/toast.html
+1 -1
View File
@@ -13,7 +13,7 @@
<button type="button"
class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2
focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8
dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 cursor-pointer"
data-dismiss-target="#toast-default" aria-label="Close"
hx-on:click="htmx.toggleClass(htmx.find('#toast-default'), 'hidden')"
>
web/templates/components/products/wishlist_button.html
+2 -2
View File
@@ -3,7 +3,7 @@
<form action="" hx-post="{% url 'web:delete_from_wishlist' pk=product.pk %}" hx-swap="none">
<input type="hidden" name="product" value="{{ product.pk }}">
{% csrf_token %}
<button aria-label="dislike">
<button class="cursor-pointer" aria-label="dislike">
{% include 'components/icons/liked.svg' %}
</button>
</form>
@@ -11,7 +11,7 @@
<form action="" hx-post="{% url 'web:add_to_wishlist' %}" hx-swap="none">
<input type="hidden" name="product" value="{{ product.pk }}">
{% csrf_token %}
<button aria-label="like">
<button class="cursor-pointer" aria-label="like">
{% include 'components/icons/like.svg' %}
</button>
</form>
web/templates/components/users/info.html
+1 -1
View File
@@ -18,7 +18,7 @@
<button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600
dark:hover:bg-primary-700 dark:focus:ring-primary-800"
dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer"
>
{% translate 'Guardar' %}
</button>
web/templates/components/users/retrieve_update_address.html
+2 -2
View File
@@ -104,7 +104,7 @@
<div class="flex justify-end">
<button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600
dark:hover:bg-primary-700 dark:focus:ring-primary-800"
dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer"
>
{% translate 'Guardar' %}
</button>
@@ -153,7 +153,7 @@
data-modal-target="accountInformationModal2" data-modal-toggle="accountInformationModal2"
class="inline-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 sm:w-auto"
dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-auto cursor-pointer"
>
{% include 'components/icons/edit.svg' %}
{% translate 'Editar datos' %}
web/templates/users/login.html
+1 -1
View File
@@ -51,7 +51,7 @@
{% endfor %}
<button
class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer">
{% translate 'Iniciar sesión' %}
</button>
web/templates/users/register.html
+1 -1
View File
@@ -38,7 +38,7 @@
<button class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center
dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 mt-4">
dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 mt-4 cursor-pointer">
{% translate 'Crear cuenta' %}
</button>
<p class="text-sm font-light text-gray-500 mt-4 dark:text-gray-400">
web/templates/users/reset_password.html
+1 -1
View File
@@ -30,7 +30,7 @@
{% endfor %}
<button
class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer">
{% translate 'Restablecer contraseña' %}
</button>
<p class="text-sm font-light text-gray-500 mt-4 dark:text-gray-400">
web/templates/users/reset_password_confirm.html
+1 -1
View File
@@ -31,7 +31,7 @@
{% endfor %}
<button
class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer">
{% translate 'Restablecer contraseña' %}
</button>
<p class="text-sm font-light text-gray-500 mt-4 dark:text-gray-400">
web/templates/web/list_products.html
+2 -2
View File
@@ -15,7 +15,7 @@
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"
dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer"
hx-get="{% url 'web:list_products' %}{% querystring page=page.previous_page_number %}"
hx-trigger="click"
hx-target="#products"
@@ -29,7 +29,7 @@
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"
dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer"
hx-get="{% url 'web:list_products' %}{% querystring page=page.next_page_number %}"
hx-trigger="click"
hx-target="#products"
web/templates/web/order.html
+1 -1
View File
@@ -169,7 +169,7 @@
<input type="hidden" name="Ds_MerchantParameters" value="{{ merchant_parameters }}"/>
<input type="hidden" name="Ds_Signature" value="{{ signature }}"/>
<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">
<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 cursor-pointer">
{% translate 'Pagar' %}
</button>
</form>