diff --git a/core/js/src/countup.js b/core/js/src/countup.js index 7ff7fb5fb..37f4b0f02 100644 --- a/core/js/src/countup.js +++ b/core/js/src/countup.js @@ -5,15 +5,19 @@ if (elements.length) { let options = {}; try { const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {}; - options = Object.assign({'enableScrollSpy': true}, dataOptions); + options = Object.assign({ + 'enableScrollSpy': true + }, dataOptions); } catch (error) {} const value = parseInt(element.innerHTML, 10); - const countUp = new window.countUp.CountUp(element, value, options); - if (!countUp.error) { - countUp.start(); + if (window.countUp && window.countUp.CountUp) { + const countUp = new window.countUp.CountUp(element, value, options); + if (!countUp.error) { + countUp.start(); + } } }); } diff --git a/docs/content/illustrations/introduction/preview.md b/docs/content/illustrations/introduction/preview.md new file mode 100644 index 000000000..b8ad1d6fb --- /dev/null +++ b/docs/content/illustrations/introduction/preview.md @@ -0,0 +1,17 @@ +--- +title: Preview +summary: "Tabler Illustrations offers 80 illustrations in two themes: light and dark. You can use them in your projects to enhance the visual appeal and convey messages effectively." +--- + +Look at full list of illustrations below and see how they look. + +{% assign all-illustrations = illustrations | sort %} +
+{% for illustration in all-illustrations %} +
+{{ illustration }} +{{ illustration }} +{{ illustration }} +
+{% endfor %} +
\ No newline at end of file diff --git a/docs/content/ui/components/breadcrumb.md b/docs/content/ui/components/breadcrumb.md index c4e1064cd..c2480ed93 100644 --- a/docs/content/ui/components/breadcrumb.md +++ b/docs/content/ui/components/breadcrumb.md @@ -35,7 +35,7 @@ Look at the example below to see how breadcrumbs work in practice. {%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html vertical separated %} ## Different separators @@ -105,7 +105,7 @@ You can use icons in breadcrumbs to make them more visually appealing. The examp {%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html vertical separated %} ## Muted breadcrumbs diff --git a/docs/content/ui/components/cards.md b/docs/content/ui/components/cards.md index 02c536f2b..bf42fc0a8 100644 --- a/docs/content/ui/components/cards.md +++ b/docs/content/ui/components/cards.md @@ -16,7 +16,7 @@ Use the `.card` and `.card-body` classes to create a card and use it as the basi {%- endcapture %} -{% include "docs/example.html" html=html bg="surface-secondary" %} +{% include "docs/example.html" html=html bg="surface-secondary" column %} ## Card padding @@ -38,7 +38,7 @@ Cards with the `.card-sm` class are well suited for small items such as widgets,
This is some text within a card body.
{%- endcapture %} -{% include "docs/example.html" html=html bg="surface-secondary" %} +{% include "docs/example.html" html=html bg="surface-secondary" column %} ```html
...
@@ -67,7 +67,7 @@ Add a title to your card by including the `.card-title` class within `.card-body {%- endcapture %} -{% include "docs/example.html" html=html bg="surface-secondary" column vertical %} +{% include "docs/example.html" html=html bg="surface-secondary" column %} ## Card with title and image @@ -89,7 +89,7 @@ To create a more visually appealing card, add a title and an image. Thanks to th {%- endcapture %} -{% include "docs/example.html" html=html bg="surface-secondary" %} +{% include "docs/example.html" html=html bg="surface-secondary" column %} ## Blog post card @@ -230,29 +230,6 @@ Add a status color to your card, either at the top or on the side of the card, t {%- endcapture %} {% include "docs/example.html" html=html bg="surface-secondary" %} -```html -
-
-
-

Card with top status

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, - iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. -

-
-
-
-
-
-

Card with side status

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, - iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. -

-
-
-``` - ## Stacked card Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect. @@ -332,66 +309,3 @@ Organize multiple cards into tabs to be able to display more content in a well-o {%- endcapture %} {% include "docs/example.html" html=html bg="surface-secondary" column %} -```html - -
- - -
- -
-
-
Content of tab #1
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid - distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. -

-
-
- -
-
-
Content of tab #2
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid - distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. -

-
-
- -
-
-
Content of tab #3
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid - distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. -

-
-
- -
-
-
Content of tab #4
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid - distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. -

-
-
-
-
-``` - diff --git a/docs/content/ui/components/countup.md b/docs/content/ui/components/countup.md index ffefa522d..1c0e1da7d 100644 --- a/docs/content/ui/components/countup.md +++ b/docs/content/ui/components/countup.md @@ -24,7 +24,7 @@ The results can be seen in the example below. {% capture html -%}

30000

{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html centered %} ## Duration @@ -41,7 +41,7 @@ Look at the example below to see how the duration affects the animation.

30000

30000

{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html vertical separated %} ## Starting value @@ -58,7 +58,7 @@ To see how the starting value affects the animation, look at the example below.

30000

30000

{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html vertical separated %} ## Decimal places @@ -76,7 +76,7 @@ Look at the example below to see how the number of decimal places affects the an

3.123

3.123

{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html vertical separated %} ## Easing @@ -92,7 +92,7 @@ Look at the example below to see how easing affects the animation.

30000

30000

{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html vertical separated %} ## Use grouping @@ -108,7 +108,7 @@ Example below shows how grouping affects the animation.

30000

30000

{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html vertical separated %} ## Separator @@ -124,7 +124,7 @@ This example shows how the separator affects the animation.

3000000

3000000

{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html vertical separated %} ## Decimal separator @@ -140,7 +140,7 @@ Look at the example below to see how the decimal separator affects the animation

3.12

3.12

{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html vertical separated %} ## Prefix @@ -156,7 +156,7 @@ Look at the example below to see how the prefix affects the animation.

30000

30000

{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html vertical separated %} ## Suffix @@ -172,4 +172,4 @@ Look at the example below to see how the suffix affects the animation.

300

300

{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html vertical separated %} diff --git a/docs/content/ui/components/empty.md b/docs/content/ui/components/empty.md index 726cc2a01..60e485d2f 100644 --- a/docs/content/ui/components/empty.md +++ b/docs/content/ui/components/empty.md @@ -57,7 +57,7 @@ Use the default empty state to engage users in the critical moments of their exp {%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html bg="surface-secondary" %} ## Empty state with illustration @@ -66,7 +66,7 @@ Make your empty state screen more attractive and engaging by adding an illustrat {% capture html -%}
- + {% include "ui/illustration.html" image="boy-with-key" alt="Empty state illustration" %}

Invoices are managed from here

@@ -95,7 +95,7 @@ Make your empty state screen more attractive and engaging by adding an illustrat

{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html bg="surface-secondary" %} ## Empty state with header @@ -132,20 +132,5 @@ Instead of adding an icon or illustration you can simply give the text: {%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html bg="surface-secondary" %} -```html -
-
404
-

Oops… You just found an error page

-

- Try adjusting your search or filter to find what you're looking for. -

-
- - {% include "ui/icon.html" icon="arrow-left" %} - Take me home - -
-
-``` diff --git a/shared/data/sri.json b/shared/data/sri.json index f82fee111..c1f7d9a39 100644 --- a/shared/data/sri.json +++ b/shared/data/sri.json @@ -1,6 +1,6 @@ { - "css": "sha384-KSBcNt/Mulg3JQzroX3d1zEP/Tc56uS+xE5k+uXt33zVlRwz1j7BQp4eRUH5P+X4", - "css-rtl": "sha384-5hIjOeu7y3tXjZQO/1xmN9svs+x+3LGjFOW6YH54qRh38/c/uiYqRU0orgjXAGDp", + "css": "sha384-IBrVf7Odj7RWoMpL3vakQPUmgqjDCU7WUZLi2kJY/VHMq1vwt3EYKnKiWJ4H28Oc", + "css-rtl": "sha384-XEafVtpnCab8PIASAoWtYQC/yLMJCj3NMPhvefuQbwWBhJHFUfoPKa0jIZw8ZbYb", "css-flags": "sha384-fStl5MKxnUStSlpPiHGSFmUTTzr2KEY7jtgmvTswVDaQJ+sLbmEF+26m57M2sbCm", "css-flags-rtl": "sha384-i8KVpZYtpnZDkTYzaYlaeiF91VNnmyORipMLZh6hKGh5Jj80QN6962xlHQPkx/xr", "css-marketing": "sha384-IILX0Nea/+/hbVhEsrQ/djsqtSJmb4CM9hPzWd7Yh8hzbyYp4N/4hWMQL5kIPEuZ", @@ -15,7 +15,7 @@ "css-themes-rtl": "sha384-er5SohDm2dJxg5UhUf1RI96jOlVA7RwgVm5++ribGoWmjds4MntkV6Mxg66xCQQg", "css-vendors-rtl": "sha384-irFOyZsTL/op6ReHkogsg+DkyAcog2eS/KdjjclmEPqJ6EuT2/okOK49HogVr0vC", "css-vendors": "sha384-CW4ecnQUl53vx8YMR5fr7mJTTQqoFz5pBEM2GoWprNI+H/t+WG6bosZLrQMdnbCh", - "js": "sha384-PRkENR4f5wQma0mCHb6RLYzjdNtqhICPI0A0k27raTkeKg17hM+tNMvCx1ZiwAQ7", + "js": "sha384-bOI13MQRvtBDkXKOx4PXrPh6/LDliTRkHou3x8+2cQZUG28UdQrgtPmoCkYR2SGT", "js-theme": "sha384-3Z3TIkq5YSKOncCfiURX/S03AUHfI0nVzd39uRc9KLhtLi7M228qgWBjnRXwt2j0", "demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA", "demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z" diff --git a/shared/includes/docs/example.html b/shared/includes/docs/example.html index 4aa84cd1a..55bda49dd 100644 --- a/shared/includes/docs/example.html +++ b/shared/includes/docs/example.html @@ -1,6 +1,6 @@
- {%- unless include.raw -%}
{%- endunless -%} + {%- unless include.raw -%}
{%- endunless -%} {{ html | remove-href }} {%- unless include.raw -%}
{%- endunless -%}
diff --git a/shared/includes/ui/illustration.html b/shared/includes/ui/illustration.html index 13f7a022e..b72702c9a 100644 --- a/shared/includes/ui/illustration.html +++ b/shared/includes/ui/illustration.html @@ -1,6 +1,6 @@ +{% removeemptylines %} {% assign image = include.image | replace: '.svg', '' %} {% assign height = include.height | default: 128 %} -{% assign src = "/free-illustrations/autodark/" | append: image %} {% assign illustration = free-illustrations.autodark[image] %} @@ -12,4 +12,5 @@ {% assign replace-to-height = 'height="' | append: height | append: '"' %} {% assign illustration = illustration | replace: 'width="800" height="600"', replace-to-height %} -{{ illustration }} \ No newline at end of file +{{ illustration }} +{% endremoveemptylines %} \ No newline at end of file diff --git a/shared/layouts/docs/default.html b/shared/layouts/docs/default.html index 00c360a29..49c1ceda3 100644 --- a/shared/layouts/docs/default.html +++ b/shared/layouts/docs/default.html @@ -135,19 +135,19 @@
- - - {% if docs-libs -%} {% for lib in libs.js -%} {% if docs-libs contains lib[0] or libs.global-libs contains lib[0] -%} {% for file in lib[1] -%} + > {% endfor -%} {% endif -%} {% endfor -%} {% endif -%} + + + \ No newline at end of file