diff --git a/.stylelintrc b/.stylelintrc index d284be7..b7ebde7 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -8,13 +8,25 @@ "tailwind", "components", "utilities", - "screen" + "screen", + "layer" ] }], "block-no-empty": true, "color-no-invalid-hex": true, "declaration-colon-space-after": "always", "scss/at-import-partial-extension": null, + "scss/at-rule-no-unknown": [ true, { + "ignoreAtRules": [ + "extends", + "apply", + "tailwind", + "components", + "utilities", + "screen", + "layer" + ] + }], "indentation": 2, "max-empty-lines": 2, "rule-empty-line-before": [ @@ -29,4 +41,4 @@ } ] } -} +} \ No newline at end of file diff --git a/frontend/css/app-base.css b/frontend/css/app-base.css index abb0d03..503dfb1 100644 --- a/frontend/css/app-base.css +++ b/frontend/css/app-base.css @@ -10,3 +10,35 @@ * */ @import "@/css/app.scss"; + + +@layer base { + h1 { + @apply text-4xl font-bold mb-3; + } + + h2 { + @apply text-3xl font-bold mb-2; + } + + + h3 { + @apply text-3xl font-semibold mb-2; + } + + h4 { + @apply text-2xl font-semibold mb-1; + } + + h5 { + @apply text-xl mb-1; + } + + h6 { + @apply text-lg; + } + + ul { + @apply list-disc list-inside; + } +} diff --git a/frontend/css/app-components.css b/frontend/css/app-components.css index 4a7ae51..2f22862 100644 --- a/frontend/css/app-components.css +++ b/frontend/css/app-components.css @@ -25,6 +25,5 @@ /* @import './pages/homepage.pcss'; */ @import "@/css/components/messages.scss"; -@import "@/css/components/buttons.scss"; @import "@/css/components/links.scss"; @import "@/css/components/forms.scss"; diff --git a/frontend/css/components/buttons.scss b/frontend/css/components/buttons.scss deleted file mode 100644 index 3386e96..0000000 --- a/frontend/css/components/buttons.scss +++ /dev/null @@ -1,6 +0,0 @@ -.btn-primary { - @apply inline-flex items-center px-4 py-2 border border-transparent; - @apply text-sm font-medium rounded-md shadow-sm text-white; - @apply bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500; - @apply justify-center; -} diff --git a/frontend/css/components/links.scss b/frontend/css/components/links.scss index 477b1f6..b403783 100644 --- a/frontend/css/components/links.scss +++ b/frontend/css/components/links.scss @@ -1,6 +1,6 @@ .link { @apply cursor-pointer no-underline; - @apply text-indigo-500; + @apply text-indigo-600; @apply hover:underline; - @apply hover:text-indigo-700; + @apply hover:text-indigo-800; } diff --git a/sampleapp/config/jinja2.py b/sampleapp/config/jinja2.py index be04d79..86cf9f4 100644 --- a/sampleapp/config/jinja2.py +++ b/sampleapp/config/jinja2.py @@ -22,6 +22,12 @@ def random_chart( return results +def convert_tf(item1: str | bool) -> bool: + if item1: + return "true" + return "" + + options = { "constants": {"csrftoken": settings.CSRF_COOKIE_NAME}, "filters": { @@ -34,5 +40,6 @@ def random_chart( "now": datetime.datetime.utcnow, "template_localtime": "django.utils.timezone.template_localtime", "random_chart": random_chart, + "convert_tf": convert_tf, }, } diff --git a/sampleapp/home/urls.py b/sampleapp/home/urls.py index 5c79c47..2184266 100644 --- a/sampleapp/home/urls.py +++ b/sampleapp/home/urls.py @@ -10,6 +10,11 @@ TemplateView.as_view(template_name="random_chart.jinja"), name="random_chart", ), + path( + "components/", + TemplateView.as_view(template_name="components.jinja"), + name="components", + ), path(r"error/", error, name="error"), path(r"", TemplateView.as_view(template_name="index.jinja"), name="home"), ] diff --git a/sampleapp/templates/components.jinja b/sampleapp/templates/components.jinja new file mode 100644 index 0000000..ce4e4dc --- /dev/null +++ b/sampleapp/templates/components.jinja @@ -0,0 +1,82 @@ +{% extends "base.jinja" %} +{% from 'components/button.jinja' import button %} +{% from 'components/toggle.jinja' import toggle, toggle_label %} +{% block title %} + Components +{% endblock title %} +{% block content %} +
+

Components

+
+

Headings

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

+ Paragraph, link with link class +

+
+
+

Buttons

+
+

+ Clicked Button: +

+
+

Colors

+ {{ button('primary normal rounded', color='primary', variant='normal', shape='rounded') }} + {{ button('secondary normal rounded', color='secondary', variant='normal', shape='rounded') }} + {{ button('accent normal rounded', color='accent', variant='normal', shape='rounded') }} + {{ button('success normal rounded', color='success', variant='normal', shape='rounded') }} + {{ button('info normal rounded', color='info', variant='normal', shape='rounded') }} + {{ button('warning normal rounded', color='warning', variant='normal', shape='rounded') }} + {{ button('error normal rounded', color='error', variant='normal', shape='rounded') }} +
+
+

Shapes

+ {{ button('primary normal rounded', color='primary', variant='normal', shape='rounded') }} + {{ button('primary normal square', color='primary', variant='normal', shape='square') }} + {{ button('primary normal circle', color='primary', variant='normal', shape='circle') }} +
+
+

Outlines

+ {{ button('primary outline rounded', color='primary', variant='outline', shape='rounded') }} + {{ button('secondary outline rounded', color='secondary', variant='outline', shape='rounded') }} + {{ button('accent outline rounded', color='accent', variant='outline', shape='rounded') }} + {{ button('success outline rounded', color='success', variant='outline', shape='rounded') }} + {{ button('info outline rounded', color='info', variant='outline', shape='rounded') }} + {{ button('warning outline rounded', color='warning', variant='outline', shape='rounded') }} + {{ button('error outline rounded', color='error', variant='outline', shape='rounded') }} +
+
+

Sizes

+ {{ button('primary normal rounded xs', color='primary', size="xs") }} + {{ button('primary normal rounded sm', color='primary', size="sm") }} + {{ button('primary normal rounded md', color='primary', size="md") }} + {{ button('primary normal rounded lg', color='primary', size="lg") }} + {{ button('primary normal rounded xl', color='primary', size="xl") }} +
+
+
+
+

Toggle

+ {{ toggle(color='primary', size="normal", icon=False) }} + {{ toggle(color='primary', size="normal", icon=True) }} + {{ toggle(color='primary', size="sm", icon=False) }} + {{ toggle(color='primary', size="sm", icon=True) }} + {{ toggle_label(side='left') }} + {{ toggle_label(side='right') }} + {{ toggle(color='primary', size="normal", icon=True) }} + {{ toggle(color='secondary', size="normal", icon=True) }} + {{ toggle(color='accent', size="normal", icon=True) }} + {{ toggle(color='success', size="normal", icon=True) }} + {{ toggle(color='info', size="normal", icon=True) }} + {{ toggle(color='warning', size="normal", icon=True) }} + {{ toggle(color='error', size="normal", icon=True) }} +
+
+{% endblock content %} diff --git a/sampleapp/templates/components/button.jinja b/sampleapp/templates/components/button.jinja index 943c610..84d8fb9 100644 --- a/sampleapp/templates/components/button.jinja +++ b/sampleapp/templates/components/button.jinja @@ -1,6 +1,42 @@ -{% macro button(button_content='Button', type='button') %} +{% macro button(button_content='Button', dispatch_name='button-click', variant='normal', color='primary', shape='rounded', size='md', type='button') %} + {# Variant support: normal, outline #} + {# Color support: primary, secondary, accent, success, info, warning, error #} + {# Shape support: rounded, square, circle #} + {# Size support: xs, sm, md, lg, xl #} + {% set class="inline-flex items-center shadow-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-"+color+"-600" %} + {% if size == 'xs' %} + {% set class = class + " px-2.5 py-1.5 text-xs" %} + {% elif size == 'sm' %} + {% set class = class + " px-3 py-2 text-sm" %} + {% elif size == 'md' %} + {% set class = class + " px-4 py-2 text-sm" %} + {% elif size == 'lg' %} + {% set class = class + " px-4 py-2 text-base" %} + {% elif size == 'xl' %} + {% set class = class + " px-6 py-3 text-base" %} + {% endif %} + {% if shape == 'rounded' %} + {% set class = class + " rounded" %} + {% elif shape == 'circle' %} + {% set class = class + ' rounded-full' %} + {% endif %} + {% if variant == 'outline' %} + {% set class = "{} text-{} bg-{}-content hover:text-{}-focus border border-{}".format(class, color, color, color, color) %} + {% else %} + {% set class = "{} text-{}-content bg-{} hover:bg-{}-focus".format(class, color, color, color) %} + {% endif %} {% endmacro %} +{# +text-primary-content bg-primary hover:bg-primary-focus border-primary bg-primary-content hover:text-primary-focus text-primary +text-secondary-content bg-secondary hover:bg-secondary-focus border-secondary bg-secondary-content hover:text-secondary-focus text-secondary +text-accent-content bg-accent hover:bg-accent-focus border-accent bg-accent-content hover:text-accent-focus text-accent +text-success-content bg-success hover:bg-success-focus border-success bg-success-content hover:text-success-focus text-success +text-info-content bg-info hover:bg-info-focus border-info bg-info-content hover:text-info-focus text-info +text-warning-content bg-warning hover:bg-warning-focus border-warning bg-warning-content hover:text-warning-focus text-warning +text-error-content bg-error hover:bg-error-focus border-error bg-error-content hover:text-error-focus text-error +#} diff --git a/sampleapp/templates/components/link.jinja b/sampleapp/templates/components/link.jinja new file mode 100644 index 0000000..7fc9d94 --- /dev/null +++ b/sampleapp/templates/components/link.jinja @@ -0,0 +1,5 @@ +{% macro link(url, text='', target='') %} + {{ text }} +{% endmacro %} diff --git a/sampleapp/templates/components/toggle.jinja b/sampleapp/templates/components/toggle.jinja new file mode 100644 index 0000000..e2aa8f6 --- /dev/null +++ b/sampleapp/templates/components/toggle.jinja @@ -0,0 +1,88 @@ +{% macro toggle(dispatch_name='toggle-slide', color='primary', size="normal", icon=False, initial=False) %} + {% set initial_tf = convert_tf(initial) %} + {% set icon_span %} + + + +{% endset %} +{% set class = "flex-shrink-0 inline-flex relative rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-{{ color }}" %} +{% if size == 'small' or size == 'sm' %} + {% set class = class + 'group items-center justify-center h-5 w-10 ' %} +{% else %} + {% set class = class + 'bg-gray-200 h-6 w-11 border-2 border-transparent transition-colors ease-in-out duration-200' %} +{% endif %} + +{% endmacro %} +{% set default_toggle %} +{{ toggle() }} +{% endset %} +{% macro toggle_label(toggle=default_toggle, side='right', label='100% Jedi Strength: Agen Kolar, Saesee Tiin, Kit Fisto, Mace Windu', description='99.9% Jedi Strength: Mace Windu') %} +
+ {% if side.lower() in ('left', 'l') %} + {{ toggle }} + {% endif %} + + {{ label }} + {{ description }} + + {% if side.lower() not in ('left', 'l') %} + {{ toggle }} + {% endif %} +
+{% endmacro %} diff --git a/sampleapp/templates/django/forms/default.jinja b/sampleapp/templates/django/forms/default.jinja index 2f7064a..d1587b3 100644 --- a/sampleapp/templates/django/forms/default.jinja +++ b/sampleapp/templates/django/forms/default.jinja @@ -1,8 +1,9 @@ {% from 'django/forms/inputgroup.jinja' import inputgroup %} -{% macro default(field, errors) %} +{% macro default(fields, errors, hidden_fields) %}
{{ errors }} {% for field, errors in fields %}{{ inputgroup(field, errors )}}{% endfor %} {% for field in hidden_fields %}{{ field }}{% endfor %}
{% endmacro %} +{{ default(fields, errors, hidden_fields) }} diff --git a/sampleapp/templates/django/forms/widgets/input.jinja b/sampleapp/templates/django/forms/widgets/input.jinja index d4949b1..2cc6423 100644 --- a/sampleapp/templates/django/forms/widgets/input.jinja +++ b/sampleapp/templates/django/forms/widgets/input.jinja @@ -1,4 +1,3 @@ + {% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}> diff --git a/sampleapp/templates/header/desktop_center.jinja b/sampleapp/templates/header/desktop_center.jinja index c938799..98fef6a 100644 --- a/sampleapp/templates/header/desktop_center.jinja +++ b/sampleapp/templates/header/desktop_center.jinja @@ -1,8 +1,7 @@