diff --git a/.editorconfig b/.editorconfig index d41b743d87778676a3db7cb8e3adccceadc64070..24c3d45f8285a994c2dfa9e5344c03a2fcffbaab 100644 --- a/.editorconfig +++ b/.editorconfig @@ -10,8 +10,8 @@ indent_style=tab tab_width=3 [*.html] -indent_style=space indent_size=3 +insert_final_newline=false [*.md] indent_style=tab @@ -20,12 +20,3 @@ tab_width=3 [*.js.map] indent_style=tab indent_size=3 - -[{*.css,*.scss}] -indent_style=space -indent_size=2 -insert_final_newline = true - -[{*.yml,*.yaml}] -indent_style=space -indent_size=2 diff --git a/README.md b/README.md index 03302542beb210ae125302a755556d30d2366aa3..1c689518d7387d7bc34a5a865bc541098bddad5e 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Premium and Open Source dashboard template with responsive and high-quality UI. ## Status - Total Downloads License Latest Release + Total Downloads License Latest Release ## Features diff --git a/js/tabler-charts.js b/js/tabler-charts.js index 1cada1a26eda7d528ebff39e1777725b3689fd87..5d47d081c0dc63dc5a1994a61c5b9cc2f7c7a55f 100644 --- a/js/tabler-charts.js +++ b/js/tabler-charts.js @@ -7,7 +7,7 @@ color = $this.attr('data-spark-color') || 'blue', type = $this.attr('data-spark-type') || 'line'; - const $div = $('
').html(data); + const $div = $('
').html(data); $this.append($div); let strokeColor = tabler.colors[color], @@ -169,9 +169,6 @@ if (window.Apex) { yaxis: { show: false, - labels: { - show: false, - }, }, }; } diff --git a/package.json b/package.json index 7823f0a223a794ec2c1b20f5e7559b2bc39886bc..d81e923f31fcf1b3b838e4dde88298d00bc8c01b 100644 --- a/package.json +++ b/package.json @@ -68,24 +68,24 @@ "main": "dist/js/tabler.js", "homepage": "https://tabler.io", "devDependencies": { - "@babel/preset-env": "7.7.4", + "@babel/preset-env": "7.7.6", "browser-sync": "2.26.7", "bundlesize": "0.18.0", "clean-css-cli": "4.3.0", "cross-env": "6.0.3", - "eslint": "6.7.1", + "eslint": "6.7.2", "eslint-config-xo": "0.27.2", - "eslint-plugin-import": "2.18.2", - "eslint-plugin-unicorn": "13.0.0", - "glob": "^7.1.6", - "http-server": "0.11.1", + "eslint-plugin-import": "2.19.1", + "eslint-plugin-unicorn": "14.0.1", + "glob": "7.1.6", + "http-server": "0.12.0", "icon-font-generator": "2.1.10", "node-sass": "4.13.0", "node-sass-package-importer": "5.3.2", - "nodemon": "^2.0.1", + "nodemon": "2.0.1", "npm-run-all": "4.1.5", "postcss-cli": "6.1.3", - "rollup": "1.27.5", + "rollup": "1.27.9", "rollup-plugin-babel": "4.3.3", "rollup-plugin-babel-minify": "9.1.1", "rollup-plugin-commonjs": "10.1.0", @@ -95,7 +95,7 @@ "stylelint": "12.0.0", "stylelint-config-twbs-bootstrap": "1.0.0", "svgo": "1.3.2", - "terser": "4.4.0", + "terser": "4.4.2", "yaml": "1.7.2" }, "dependencies": { @@ -106,7 +106,7 @@ "@fullcalendar/timegrid": "4.3.0", "apexcharts": "3.10.1", "autosize": "4.0.2", - "bootstrap": "twbs/bootstrap#76fd85b", + "bootstrap": "twbs/bootstrap#dde55d1", "fullcalendar": "3.10.1", "imask": "5.2.1", "jquery": "3.4.1", diff --git a/pages/_data/charts.yml b/pages/_data/charts.yml index d2be3f573289eb58f6d11b78fd5188620e2c4ebe..b4f6ba251b1a5fdd5dba37dc3ddbb40e0026da4e 100644 --- a/pages/_data/charts.yml +++ b/pages/_data/charts.yml @@ -1,7 +1,16 @@ +tasks-overview: + type: bar + categories: ['Sprint 1','Sprint 2','Sprint 3','Sprint 4','Sprint 5','Sprint 6','Sprint 7','Sprint 8','Sprint 9','Sprint 10','Sprint 11','Sprint 12','Sprint 13','Sprint 14','Sprint 15','Sprint 16','Sprint 17','Sprint 18','Sprint 19','Sprint 20','Sprint 21','Sprint 22','Sprint 23','Sprint 24'] + series: + - name: A + data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22] + total-sales: type: donut + demo: true sparkline: true hide-legend: true + name: Total sales series: - name: Direct color: blue @@ -16,26 +25,26 @@ total-sales: color: yellow data: 12 -total-sales2: - type: radalBar +campaigns: + name: Campaigns + demo: true + type: radialBar sparkline: true hide-legend: true series: - - name: Direct + - name: Total Sent color: blue data: 44 - - name: Affilliate - color: green - data: 55 - - name: Sponsored - color: red - data: 35 - - name: E-mail - color: yellow - data: 12 + - name: Reached + color: blue-light + data: 36 + - name: Opened + color: blue-lighten + data: 18 tasks: name: Tasks + demo: true type: line categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W'] groups: [1, 2, 3] @@ -72,7 +81,7 @@ development-activity: line: name: Employment Growth - display: true + demo: true type: line show-grid: true categories: ['2013', '2014', '2015', '2016', '2017', '2018'] @@ -89,7 +98,7 @@ line: line-stroke: name: Line chart - display: true + demo: true type: line stroke-curve: straight hide-legend: true @@ -108,7 +117,7 @@ line-stroke: stepline: name: Stepline - display: true + demo: true type: line hide-legend: true stroke-curve: stepline @@ -120,7 +129,7 @@ stepline: temperature: name: Monthly Average Temperature - display: true + demo: true type: line show-labels: true show-data-labels: true @@ -139,7 +148,7 @@ temperature: area: name: Lorem ipsum - display: true + demo: true type: area hide-legend: true categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] @@ -154,7 +163,7 @@ area: area-spline: name: Lorem ipsum - display: true + demo: true type: area spline: true hide-legend: true @@ -170,12 +179,11 @@ area-spline: area-spline-stacked: name: Lorem ipsum - display: true + demo: true type: area spline: true hide-legend: true stacked: true -# groups: [1, 2] categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] series: - name: Maximum @@ -188,7 +196,7 @@ area-spline-stacked: spline: name: Wind speed during two days - display: true + demo: true type: line spline: true show-labels: true @@ -205,7 +213,7 @@ spline: spline-rotated: name: Lorem ipsum - display: true + demo: true type: line spline: true rotated: true @@ -222,7 +230,7 @@ spline-rotated: bar: name: Lorem ipsum - display: true + demo: true type: bar hide-legend: true categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] @@ -236,7 +244,7 @@ bar: bar-rotated: name: Lorem ipsum - display: true + demo: true type: bar rotated: true hide-legend: true @@ -252,10 +260,9 @@ bar-rotated: bar-stacked: name: Lorem ipsum - display: true + demo: true type: bar stacked: true -# groups: [1, 2] hide-legend: true categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] series: @@ -269,7 +276,7 @@ bar-stacked: pie: name: Lorem ipsum - display: true + demo: true type: pie hide-legend: true show-data-labels: true @@ -290,7 +297,7 @@ pie: donut: name: Lorem ipsum - display: true + demo: true type: donut sparkline: true hide-legend: true @@ -305,7 +312,7 @@ donut: scatter: name: Lorem ipsum - display: true + demo: true type: scatter hide-legend: true categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] @@ -320,7 +327,7 @@ scatter: combination: name: Combination chart - display: true + demo: true type: bar types: 2: 'line' diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md index d974fd63cee7c5636604127c82c750ab2cb3d9a8..966329320253475b04450d082313bfa9b7430d83 100644 --- a/pages/_docs/avatars.md +++ b/pages/_docs/avatars.md @@ -14,6 +14,50 @@ Create and group avatars of various shapes and sizes with one component. {% include ui/avatar.html person-id=3 %} {% endexample %} +### Avatar image + +Set an image as the background. + +{% example html wrapper=avatar-list %} +{% include ui/avatar.html person-id=1 %} +{% include ui/avatar.html person-id=3 %} +{% include ui/avatar.html person-id=4 %} +{% endexample %} + +### Initials + +You can easily use initials instead of images. + +{% example html wrapper=avatar-list %} +{% include ui/avatar.html placeholder="AB" %} +{% include ui/avatar.html placeholder="CD" %} +{% include ui/avatar.html placeholder="EF" %} +{% include ui/avatar.html placeholder="GH" %} +{% include ui/avatar.html placeholder="IJ" %} +{% endexample %} + +### Avatar icons + +You can also use icons in avatars. + +{% example html wrapper=avatar-list %} +{% include ui/avatar.html icon="user" %} +{% include ui/avatar.html icon="plus" %} +{% include ui/avatar.html icon="user-plus" %} +{% endexample %} + +### Avatar initials color + +Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors. + +{% example html wrapper=avatar-list %} +{% include ui/avatar.html placeholder="AB" color="green" %} +{% include ui/avatar.html placeholder="CD" color="red" %} +{% include ui/avatar.html placeholder="EF" color="yellow" %} +{% include ui/avatar.html placeholder="GH" color="blue" %} +{% include ui/avatar.html placeholder="IJ" color="purple" %} +{% endexample %} + ### Avatar size Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed. @@ -51,43 +95,18 @@ Change the shape of an avatar with the default Bootstrap image classes. {% include ui/avatar.html person-id=21 shape="rounded-lg" %} {% endexample %} -### Initials - -{% example html wrapper=avatar-list %} -{% include ui/avatar.html placeholder="AB" size="xl" %} -{% include ui/avatar.html placeholder="CD" size="lg" %} -{% include ui/avatar.html placeholder="EF" size="md" %} -{% include ui/avatar.html placeholder="GH" %} -{% include ui/avatar.html placeholder="IJ" size="sm" %} -{% endexample %} - - -### Avatar initials color - -[See more]({% docs_url colors %}) - -{% example html wrapper=avatar-list %} -{% include ui/avatar.html placeholder="AB" color="green" %} -{% include ui/avatar.html placeholder="CD" color="red" %} -{% include ui/avatar.html placeholder="EF" color="yellow" %} -{% include ui/avatar.html placeholder="GH" color="blue" %} -{% include ui/avatar.html placeholder="IJ" color="purple" %} -{% endexample %} - -### Avatar initials icons - -{% example html wrapper=avatar-list %} -{% include ui/avatar.html icon="user" %} -{% include ui/avatar.html icon="plus" %} -{% include ui/avatar.html icon="user-plus" %} -{% endexample %} - ### Avatars list +You can easily create a list of avatars. + {% example %} {% include ui/avatar-list.html %} {% endexample %} +### Stacked list + +Make the list stack when it reaches a certain length. + {% example %}
{% for person in site.data.people limit: 5 offset: 30 %} @@ -95,4 +114,4 @@ Change the shape of an avatar with the default Bootstrap image classes. {% endfor %} +8
-{% endexample %} +{% endexample %} \ No newline at end of file diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md index ec1b5902b9d315594a77aa17977797f9ed15fbcf..8ef32487a71c48aa8ee102e6a68c16b9e04f927b 100644 --- a/pages/_docs/buttons.md +++ b/pages/_docs/buttons.md @@ -12,9 +12,9 @@ The `.btn` classes are designed to be used with the ` - - - + + + {% endexample %} ### Button variations diff --git a/pages/_docs/divider.md b/pages/_docs/divider.md index d50a9a4bf0cffd2c07bc0269a402aa372936e2e3..588e6f5e24678617a30208510b1aed2825c5f04a 100644 --- a/pages/_docs/divider.md +++ b/pages/_docs/divider.md @@ -6,20 +6,34 @@ done: true ### Default markup -{% example html max-width=300 %} +{% example html columns=1 %}

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore? + Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!

-
Left divider
+{% include ui/hr.html text="Left divider" %}

Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!

-
Centered divider
+{% include ui/hr.html text="Centered divider" position="center" %}

Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!

-
Right divider
+{% include ui/hr.html text="Right divider" position="right" %}

Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!

{% endexample %} + +### Divider color + +Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors. + +{% example html columns=1 %} +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex. +

+{% include ui/hr.html text="Green divider" color="green" %} +

+ Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! +

+{% endexample %} diff --git a/pages/_docs/flags.md b/pages/_docs/flags.md index 09e4fbd79480c5c80e3be535c482af3f94708380..43394535c7ab42e1171fa758cd36efa85ea7edb3 100644 --- a/pages/_docs/flags.md +++ b/pages/_docs/flags.md @@ -15,6 +15,8 @@ done: true ### Flag sizes +Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed. + {% example html %} {% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %} {% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %} @@ -24,6 +26,8 @@ done: true ### Types +To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`. + {% for flag in site.data.flags %} diff --git a/pages/_docs/progress.md b/pages/_docs/progress.md index 9f32dc4c9db2554c770399e40998e66633858bfc..bafac640e02ad7fbc39b80d7d2257d9ae4881761 100644 --- a/pages/_docs/progress.md +++ b/pages/_docs/progress.md @@ -34,5 +34,5 @@ To create a default progress bar, add a `.progress` class to a `
` element: You can also use native HTML5 `` element. {% example html %} - + {% endexample %} diff --git a/pages/_docs/ribbons.md b/pages/_docs/ribbons.md index 5fe18237a3a9b127211dcca205e45de52b1ed765..5067c3ae5998c322e5d7ae6624c84a51c20eca48 100644 --- a/pages/_docs/ribbons.md +++ b/pages/_docs/ribbons.md @@ -12,24 +12,39 @@ new: true ### Ribbon position +You can easily change the position of a ribbon by adding a class to the element. + + `ribbon-top` - moves it to the top + `ribbon-right` - moves it to the right + `ribbon-bottom` - moves it to the bottom + `ribbon-left` - moves it to the lefg + +You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner. + {% example html columns=1 %} {% include cards/ribbon.html top=true left=true %} {% endexample %} ### Ribbon color +Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors. + {% example html columns=1 %} {% include cards/ribbon.html color="red" %} {% endexample %} ### Ribbon text +Set your own text in a ribbon. + {% example html columns=1 %} {% include cards/ribbon.html color="green" text="-50%" %} {% endexample %} ### Ribbon style +Change the style of a ribbon. + {% example html columns=1 %} {% include cards/ribbon.html bookmark=true color="orange" text="-50%" %} {% endexample %} diff --git a/pages/_docs/typography.md b/pages/_docs/typography.md index 43d39cc9026569ac7790e9918ebc525c4732162a..0f12a11899696c50513a4d8b17a072eb2615bb25 100644 --- a/pages/_docs/typography.md +++ b/pages/_docs/typography.md @@ -21,23 +21,23 @@ description: Documentation and examples for common text utilities to control ali ### Semantic text elements {% example %} -I18N abbr
 -Bold strong b
 -Citation cite
 -Hello World! code
 -Deleted del
 -Emphasis em
 -Italic i
 -Inserted ins
 -Ctrl + S kbd
 -Highlighted mark
 -Strikethrough> s
-Sample samp
 -Text Subscripted sub
 -Text Superscripted sup
 - time
 -Underline u
 -x = y + 2 var
 +I18N abbr
 +Bold strong b
 +Citation cite
 +Hello World! code
 +Deleted del
 +Emphasis em
 +Italic i
 +Inserted ins
 +Ctrl + S kbd
 +Highlighted mark
 +Strikethrough> s
+Sample samp
 +Text Subscripted sub
 +Text Superscripted sup
 + time
 +Underline u
 +x = y + 2 var
 {% endexample %} ### Horizontal rules diff --git a/pages/_includes/cards/charts/card.html b/pages/_includes/cards/charts/card.html deleted file mode 100644 index 65610037cfd32096791b86f61bd69d1ab07740d8..0000000000000000000000000000000000000000 --- a/pages/_includes/cards/charts/card.html +++ /dev/null @@ -1,10 +0,0 @@ -{% assign data = site.data.charts[include.chart-id] %} -{% assign height = include.height | default: 10 %} -
-
- {% if include.title %} -

{{ include.title }}

- {% endif %} - {% include ui/chart.html height=height chart-id=include.chart-id %} -
-
diff --git a/pages/_includes/cards/charts/total-sales.html b/pages/_includes/cards/charts/total-sales.html index 23675dc852e1f90108959be3d2132a924b5195bb..ae44620a0d93c582b479b2a61fe39422b6b6e48e 100644 --- a/pages/_includes/cards/charts/total-sales.html +++ b/pages/_includes/cards/charts/total-sales.html @@ -4,6 +4,6 @@

Total sales

{% include ui/chart.html chart-id="total-sales" height=15 %} - {% include ui/chart.html chart-id="total-sales2" height=15 %} + {% include ui/chart.html chart-id="campaigns" height=15 %}
diff --git a/pages/_includes/cards/invoices.html b/pages/_includes/cards/invoices.html index 689040b24b00368f7b5aa9c7ad1b34db3828e897..91c4be70f484ac8f1de056d3b2b7216c0f6cc3b1 100644 --- a/pages/_includes/cards/invoices.html +++ b/pages/_includes/cards/invoices.html @@ -3,7 +3,7 @@

Invoices

-
+
diff --git a/pages/_includes/layout/css.html b/pages/_includes/layout/css.html index 7e25e89282c8ee2472c5258327d86164b1964fb9..c34c5f64899e5226ec41f0a8941d84d9fecbe91e 100644 --- a/pages/_includes/layout/css.html +++ b/pages/_includes/layout/css.html @@ -1,13 +1,13 @@ {% if site.data.libs %} {% for lib in site.data.libs.css %} - + {% endfor %} {% endif %} - + - - + + diff --git a/pages/_includes/layout/homepage.html b/pages/_includes/layout/homepage.html index 64d3e084bb7c62fd0ee10e5c6b3ff3fb43a4dc21..b524939916485540cb3ac76bfb9cc79b98e38d93 100644 --- a/pages/_includes/layout/homepage.html +++ b/pages/_includes/layout/homepage.html @@ -43,10 +43,10 @@
- {% include cards/charts/card.html chart-id="temperature" height=10 %} + {% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
- {% include cards/charts/card.html chart-id="donut" height=10 %} + {% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
diff --git a/pages/_includes/layout/page-title.html b/pages/_includes/layout/page-title.html index d9556fadd3daabcbbb557f773637aab35fb12af9..296c0f1fc6e3c69d43c6fd8df3dd60ec12626487 100644 --- a/pages/_includes/layout/page-title.html +++ b/pages/_includes/layout/page-title.html @@ -26,7 +26,7 @@
{% if page.page-title-actions == 'users' %}
- + {% include_cached ui/button.html text="New user" color="primary" icon="plus" %}
{% elsif page.page-title-actions == 'calendar' %} diff --git a/pages/_includes/parts/form-fieldset.html b/pages/_includes/parts/form-fieldset.html index 5f223466fbc9cdcb7bbeb0bb6832f2e376a55125..8e1f33e8f49e18efe994d156cbeaf5914db25402 100644 --- a/pages/_includes/parts/form-fieldset.html +++ b/pages/_includes/parts/form-fieldset.html @@ -1,18 +1,18 @@
- +
- +
- +
- +
diff --git a/pages/_includes/parts/input-datalist.html b/pages/_includes/parts/input-datalist.html index 9a0f7a4f2e0cfd36b71d39085681b9bdc9bada5a..0a1fce62e2a86533ad52de5e6d60bf458689e2e9 100644 --- a/pages/_includes/parts/input-datalist.html +++ b/pages/_includes/parts/input-datalist.html @@ -1,8 +1,8 @@
- + {% for country in site.data.countries limit: 10 %} -
diff --git a/pages/_includes/parts/input-image.html b/pages/_includes/parts/input-image.html index 2f19733792ca33c4db5e2249e260b07a128c7f46..66c4a50175e04ab22ae5ee4301faa0c615b16bff 100644 --- a/pages/_includes/parts/input-image.html +++ b/pages/_includes/parts/input-image.html @@ -5,7 +5,7 @@ {% for photo in site.data.photos limit: limit offset: 30 %}