Skip to content

Commit

Permalink
Merge pull request #2 from AidanG1/feature/toggle
Browse files Browse the repository at this point in the history
Feature/toggle
  • Loading branch information
AidanG1 authored May 31, 2022
2 parents 991bf71 + c9cde6b commit 190b5bb
Show file tree
Hide file tree
Showing 16 changed files with 311 additions and 54 deletions.
16 changes: 14 additions & 2 deletions .stylelintrc
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand All @@ -29,4 +41,4 @@
}
]
}
}
}
32 changes: 32 additions & 0 deletions frontend/css/app-base.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
1 change: 0 additions & 1 deletion frontend/css/app-components.css
Original file line number Diff line number Diff line change
Expand Up @@ -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";
6 changes: 0 additions & 6 deletions frontend/css/components/buttons.scss

This file was deleted.

4 changes: 2 additions & 2 deletions frontend/css/components/links.scss
Original file line number Diff line number Diff line change
@@ -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;
}
7 changes: 7 additions & 0 deletions sampleapp/config/jinja2.py
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -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,
},
}
5 changes: 5 additions & 0 deletions sampleapp/home/urls.py
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
]
82 changes: 82 additions & 0 deletions sampleapp/templates/components.jinja
Original file line number Diff line number Diff line change
@@ -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 %}
<div class="container p-2">
<h1>Components</h1>
<div>
<h2>Headings</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>
Paragraph, <a href="#" class="link">link with link class</a>
</p>
</div>
<div>
<h2>Buttons</h2>
<div x-data="{ clicked: 'none' }"
@button-click.window="clicked = $event.detail">
<h4>
Clicked Button: <span x-text="clicked"></span>
</h4>
<div>
<h3>Colors</h3>
{{ 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') }}
</div>
<div>
<h3>Shapes</h3>
{{ 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') }}
</div>
<div>
<h3>Outlines</h3>
{{ 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') }}
</div>
<div>
<h3>Sizes</h3>
{{ 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") }}
</div>
</div>
</div>
<div>
<h2>Toggle</h2>
{{ 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) }}
</div>
</div>
{% endblock content %}
40 changes: 38 additions & 2 deletions sampleapp/templates/components/button.jinja
Original file line number Diff line number Diff line change
@@ -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 %}
<button type="{{ type }}"
class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
x-on:click="$dispatch('{{ dispatch_name }}', '{{ variant }} {{ color }} {{ shape }} {{ size }}')"
class="{{ class }}">
{{ button_content }}
</button>
{% 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
#}
5 changes: 5 additions & 0 deletions sampleapp/templates/components/link.jinja
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{% macro link(url, text='', target='') %}
<a href="{{ url }}"
target="{{ target }}"
class="text-blue-500; hover:text-blue-700; underline">{{ text }}</a>
{% endmacro %}
88 changes: 88 additions & 0 deletions sampleapp/templates/components/toggle.jinja
Original file line number Diff line number Diff line change
@@ -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 %}
<span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
aria-hidden="true"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }">
<svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
<path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</span>
<!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" -->
<span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
aria-hidden="true"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }">
<svg class="h-3 w-3 text-{{ color }}"
fill="currentColor"
viewBox="0 0 12 12">
<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"/>
</svg>
</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 %}
<button type="button"
class="{{ class }}"
role="switch"
aria-checked="'{{ initial_tf }}'"
x-data="{on: '{{ initial_tf }}' }"
x-on:click="on = !on; $dispatch('{{ dispatch_name }}', on)"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'bg-{{ color }}': on, 'bg-gray-200': !(on) }">
<span class="sr-only">Use setting</span>
{% if size == 'small' or size == 'sm' %}
<span aria-hidden="true"
class="pointer-events-none absolute bg-white w-full h-full rounded-md"></span>
<span aria-hidden="true"
class="bg-gray-200 pointer-events-none absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200"
:class="{ 'bg-{{ color }}': on, 'bg-gray-200': !(on) }"
x-state:on="Enabled"
x-state:off="Not Enabled"></span>
<span aria-hidden="true"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"
class="translate-x-0 pointer-events-none absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform ring-0 transition-transform ease-in-out duration-200">
{% if icon %}{{ icon_span }}{% endif %}
</span>
{% else %}
<span aria-hidden="true"
class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'translate-x-5': on, 'translate-x-0': !(on) }">
{% if icon %}{{ icon_span }}{% endif %}
</span>
{% endif %}
</button>
{% 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') %}
<div class="flex items-center justify-between">
{% if side.lower() in ('left', 'l') %}
<span class="mr-2">{{ toggle }}</span>
{% endif %}
<span class="flex-grow flex flex-col">
<span class="text-sm font-medium text-gray-900">{{ label }}</span>
<span class="text-sm text-gray-500">{{ description }}</span>
</span>
{% if side.lower() not in ('left', 'l') %}
{{ toggle }}
{% endif %}
</div>
{% endmacro %}
3 changes: 2 additions & 1 deletion sampleapp/templates/django/forms/default.jinja
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
{% from 'django/forms/inputgroup.jinja' import inputgroup %}
{% macro default(field, errors) %}
{% macro default(fields, errors, hidden_fields) %}
<div class="form-wrapper">
<span class="text-red">{{ errors }}</span>
{% for field, errors in fields %}{{ inputgroup(field, errors )}}{% endfor %}
{% for field in hidden_fields %}{{ field }}{% endfor %}
</div>
{% endmacro %}
{{ default(fields, errors, hidden_fields) }}
3 changes: 1 addition & 2 deletions sampleapp/templates/django/forms/widgets/input.jinja
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
<input type="{{ widget.type }}"
name="{{ widget.name }}"
{% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}
{% include "django/forms/widgets/attrs.jinja" %}>
{% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}>
5 changes: 2 additions & 3 deletions sampleapp/templates/header/desktop_center.jinja
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<div class="hidden md:ml-6 md:flex md:space-x-8">
<!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
<a href="#"
class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Dashboard </a>
<a href="#"
<a href={{ url('components') }} class="border-primary-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Components </a>
<a href=""
class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Team </a>
<a href="#"
class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> Projects </a>
Expand Down
2 changes: 1 addition & 1 deletion sampleapp/templates/header/mobile_menu.jinja
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<div class="pt-2 pb-3 space-y-1">
<!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
<a href="#"
class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6">Dashboard</a>
class="bg-primary-50 border-primary-500 text-primary-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6">Dashboard</a>
<a href="#"
class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6">Team</a>
<a href="#"
Expand Down
Loading

0 comments on commit 190b5bb

Please sign in to comment.