diff --git a/.editorconfig b/.editorconfig index a84ebd640..df030a224 100644 --- a/.editorconfig +++ b/.editorconfig @@ -3,7 +3,7 @@ charset=utf-8 end_of_line=lf insert_final_newline=true indent_style=tab -indent_size=3 +tab_width=3 max_line_length=off [*.svg] @@ -13,6 +13,7 @@ tab_width=3 [*.html] indent_style=tab indent_size=3 +tab_width=3 insert_final_newline=false [*.md] diff --git a/build/rollup.config.js b/build/rollup.config.js index f0bfcd3f4..ff34a1d7f 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -38,7 +38,7 @@ module.exports = { context: "window", input: { tabler: path.resolve(__dirname, '../js/tabler.js'), - 'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'), + // 'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'), }, output: { banner, diff --git a/js/tabler-charts.js b/js/tabler-charts.js deleted file mode 100644 index 9aaec558c..000000000 --- a/js/tabler-charts.js +++ /dev/null @@ -1,173 +0,0 @@ -(function ($) { - $(document).ready(function () { - $().peity && - $('[data-spark]').each(function () { - const $this = $(this), - data = $this.attr('data-spark'), - color = $this.attr('data-spark-color') || 'blue', - bgColor = $this.attr('data-spark-color-bg') || 'blue-100', - type = $this.attr('data-spark-type') || 'line'; - - const $div = $('
').html(data); - $this.append($div); - - let fillColor; - - if (type === 'donut' || type === 'pie') { - fillColor = [color, bgColor]; - } else if (type === 'bar') { - fillColor = [color]; - } else if (type === 'line') { - fillColor = bgColor; - } - - $div.peity(type, { - width: $this.width(), - height: $this.height(), - // max: 100, - // min: 0, - stroke: color, - strokeWidth: 2, - fill: fillColor, - padding: 0.2, - innerRadius: type === 'donut' ? 17 : 0, - }); - }); - }); -})(jQuery); - -/* -charts default configuration - */ -if (window.Apex) { - // const borderColor = 'rgba(0, 0, 0, 0.09)'; - // const mutedColor = '#888e9a'; - - // window.Apex = { - // chart: { - // // fontFamily: 'inherit', - // // foreColor: 'currentColor', - // toolbar: { - // show: false, - // }, - // zoom: { - // enabled: false, - // }, - // animations: { - // enabled: false, - // }, - // }, - // - // grid: { - // show: true, - // borderColor: borderColor, - // padding: { - // right: 0, - // bottom: 0, - // left: 0, - // top: 0, - // }, - // }, - // - // dataLabels: { - // enabled: false, - // dropShadow: { - // enabled: false, - // }, - // }, - // - // plotOptions: { - // pie: { - // customScale: 1, - // expandOnClick: false, - // dataLabels: { - // minAngleToShowLabel: 10, - // }, - // donut: { - // size: '80%' - // } - // }, - // }, - // - // stroke: { - // width: 2, - // curve: 'smooth', - // lineCap: "round", - // }, - // - // fill: { - // type: 'solid', - // opacity: 1, - // }, - // - // markers: { - // size: 0, - // strokeWidth: 1, - // radius: 2, - // hover: { - // size: 4, - // }, - // }, - // - // legend: { - // show: true, - // fontSize: '14px', - // markers: { - // width: 8, - // height: 8, - // }, - // itemMargin: { - // horizontal: 0, - // vertical: 8, - // }, - // }, - // - // title: { - // margin: 0, - // floating: true, - // offsetX: 10, - // style: { - // fontSize: '18px', - // }, - // }, - // - // subtitle: { - // margin: 0, - // }, - // - // tooltip: { - // fillSeriesColor: false, - // }, - - // xaxis: { - // labels: { - // style: { - // colors: mutedColor, - // fontSize: '12px', - // }, - // datetimeFormatter: { - // year: 'yyyy', - // month: 'MMM \'yy', - // day: 'd MMM', - // hour: 'HH:mm' - // } - // }, - // tooltip: { - // enabled: false, - // }, - // axisBorder: { - // color: borderColor, - // height: 0, - // }, - // axisTicks: { - // show: true, - // height: 4, - // color: borderColor, - // }, - // }, - // - // yaxis: { - // show: true, - // }, - // }; -} diff --git a/package.json b/package.json index 70a6826d4..102620818 100644 --- a/package.json +++ b/package.json @@ -125,14 +125,6 @@ "path": "./dist/css/tabler.min.css", "maxSize": "45 kB" }, - { - "path": "./dist/css/tabler-charts.css", - "maxSize": "2 kB" - }, - { - "path": "./dist/css/tabler-charts.min.css", - "maxSize": "2 kB" - }, { "path": "./dist/css/tabler-flags.css", "maxSize": "2 kB" diff --git a/pages/_data/libs.json b/pages/_data/libs.json index da96e90ff..7edbc55b7 100644 --- a/pages/_data/libs.json +++ b/pages/_data/libs.json @@ -3,7 +3,7 @@ "jquery", "bootstrap" ], "js": { - "jquery": "jquery/dist/jquery.min.js", + "jquery": "jquery/dist/jquery.slim.min.js", "bootstrap": "bootstrap/dist/js/bootstrap.bundle.min.js", "autosize": "autosize/dist/autosize.min.js", "imask": "imask/dist/imask.min.js", diff --git a/pages/_includes/cards/small-stats.html b/pages/_includes/cards/small-stats.html index 34987af24..2badb5462 100644 --- a/pages/_includes/cards/small-stats.html +++ b/pages/_includes/cards/small-stats.html @@ -1,39 +1,33 @@ {% assign chart-type = include.chart-type | default: 'line' %} {% assign chart-position = include.chart-position | default: 'right' %}
-
- {% if include.icon %} - {% include_cached ui/icon.html icon=include.icon %} - {% elsif include.person-id %} - {% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %} - {% endif %} +
+ {% if include.icon %} + {% include_cached ui/icon.html icon=include.icon %} + {% elsif include.person-id %} + {% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %} + {% endif %} - {% if include.chart-data and chart-position=="left" %} -
- {% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %} -
- {% endif %} + {% if include.chart-data and chart-position == "left" %} +
+ {% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %} +
+ {% endif %} -
-
- {{ include.count | default: 1700 | format_number }} {{ include.subtitle }} - {% if include.small-icon %} - {% include_cached ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %} - {% endif %} -
-
{{ include.description | default: "Users" }}
-
+
+
+ {{ include.count | default: 1700 | format_number }} {{ include.subtitle }} + {% if include.small-icon %} + {% include_cached ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %} + {% endif %} +
+
{{ include.description | default: "Users" }}
+
- {% if include.second-icon %} -
- {% include_cached ui/icon.html icon=include.second-icon color=include.color class="icon-lg icon-thin" %} -
- {% endif %} - - {% if include.chart-data and chart-position=="right" %} -
- {% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %} -
- {% endif %} -
+ {% if include.chart-data and chart-position=="right" %} +
+ {% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %} +
+ {% endif %} +
diff --git a/pages/_includes/cards/subscribe.html b/pages/_includes/cards/subscribe.html index 08b534460..53ca03365 100644 --- a/pages/_includes/cards/subscribe.html +++ b/pages/_includes/cards/subscribe.html @@ -1,35 +1,35 @@ {% assign person-id = include.person-id | default: 0 %} {% assign person = site.data.people[person-id] %}
-
-
-
- {% include ui/avatar.html person=person size="lg" %} -
-
-

- {{ person.full_name }} -

-
- Working in {{ person.company }} -
-
- ● Online -
-
-
- - Subscribe - -
-
-
- - {% include_cached ui/dropdown-menu.html right=true %} -
-
-
-
+
+
+
+ {% include ui/avatar.html person=person size="lg" %} +
+
+

+ {{ person.full_name }} +

+
+ Working in {{ person.company }} +
+
+ ● Online +
+
+
+ + Subscribe + +
+
+
+ + {% include_cached ui/dropdown-menu.html right=true %} +
+
+
+
diff --git a/pages/_includes/cards/user-card.html b/pages/_includes/cards/user-card.html index f6db78777..f700a4b6a 100644 --- a/pages/_includes/cards/user-card.html +++ b/pages/_includes/cards/user-card.html @@ -1,11 +1,13 @@ {% assign person-id = include.person-id | default: 0 %} {% assign person = site.data.people[person-id] %} -
-
- {% include ui/avatar.html person=person %} -
-
{{ person.full_name }}
-
{{ person.job_title }}
-
+
+
+ {% include ui/avatar.html person=person class="rounded" %} +
+
+
{{ person.full_name }}
+
{{ person.job_title }}
+
+
diff --git a/pages/_includes/layout/css.html b/pages/_includes/layout/css.html index 7cc1f8bea..89e5dd3d8 100644 --- a/pages/_includes/layout/css.html +++ b/pages/_includes/layout/css.html @@ -12,4 +12,3 @@ - diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html index 367d4bb12..02bfb608e 100644 --- a/pages/_includes/layout/js.html +++ b/pages/_includes/layout/js.html @@ -11,6 +11,3 @@ - - - diff --git a/pages/_includes/layout/navbar.html b/pages/_includes/layout/navbar.html index fe989724a..07e13e48e 100644 --- a/pages/_includes/layout/navbar.html +++ b/pages/_includes/layout/navbar.html @@ -15,7 +15,7 @@
  • - {% include ui/avatar.html src=person.photo %} + {% include ui/avatar.html src=person.photo size="sm" %} {{ person.full_name }} Administrator diff --git a/pages/_includes/ui/avatar.html b/pages/_includes/ui/avatar.html index 88ce57733..92c00bf27 100644 --- a/pages/_includes/ui/avatar.html +++ b/pages/_includes/ui/avatar.html @@ -2,18 +2,18 @@ {% assign src = include.src %} {% assign placeholder = include.placeholder %} {% if include.person-id %} - {% assign person-id = include.person-id | minus: 1 %} - {% assign person = site.data.people[person-id] %} - {% assign src = person.photo %} - {% unless src %} - {% assign placeholder = person.full_name | first_letters %} - {% endunless %} -{% elsif include.person %} - {% assign person = include.person %} - {% assign src = person.photo %} - {% unless src %} - {% assign placeholder = person.full_name | first_letters %} - {% endunless %} + {% assign person-id = include.person-id | minus: 1 %} + {% assign person = site.data.people[person-id] %} + {% assign src = person.photo %} + {% unless src %} + {% assign placeholder = person.full_name | first_letters %} + {% endunless %} + {% elsif include.person %} + {% assign person = include.person %} + {% assign src = person.photo %} + {% unless src %} + {% assign placeholder = person.full_name | first_letters %} + {% endunless %} {% endif %} {% assign link = include.link | default: false %} {% assign el = 'span' %} diff --git a/pages/_includes/ui/chart.html b/pages/_includes/ui/chart.html index d26b8adcb..3ca91622f 100644 --- a/pages/_includes/ui/chart.html +++ b/pages/_includes/ui/chart.html @@ -19,7 +19,7 @@ {% capture script %} +{% endcapture_global %} \ No newline at end of file diff --git a/pages/snippets.html b/pages/snippets.html index 82bc1fe6a..07674534c 100644 --- a/pages/snippets.html +++ b/pages/snippets.html @@ -5,58 +5,76 @@ page-title-right: date ---
    -
    {% include cards/user-card.html person-id=5 %}
    -
    {% include cards/user-card.html person-id=6 %}
    -
    {% include cards/user-card.html person-id=7 right=true %}
    -
    {% include cards/user-card.html person-id=8 right=true %}
    +
    {% include cards/user-card.html person-id=5 %}
    +
    {% include cards/user-card.html person-id=6 %}
    +
    {% include cards/user-card.html person-id=7 right=true %}
    +
    {% include cards/user-card.html person-id=8 right=true %}
    -
    {% include cards/user-card-big.html person-id=15 %}
    -
    {% include cards/user-card-big.html person-id=16 %}
    -
    {% include cards/user-card-big.html person-id=17 %}
    -
    {% include cards/user-card-big.html person-id=18 %}
    +
    {% include cards/user-card-big.html person-id=15 %}
    +
    {% include cards/user-card-big.html person-id=16 %}
    +
    {% include cards/user-card-big.html person-id=17 %}
    +
    {% include cards/user-card-big.html person-id=18 %}
    -
    {% include cards/user-card-bg.html person-id=25 %}
    -
    {% include cards/user-card-bg.html person-id=26 %}
    -
    {% include cards/user-card-bg.html person-id=27 blurred=true %}
    -
    {% include cards/user-card-bg.html person-id=28 blurred=true %}
    +
    {% include cards/user-card-bg.html person-id=25 %}
    +
    {% include cards/user-card-bg.html person-id=26 %}
    +
    {% include cards/user-card-bg.html person-id=27 blurred=true %}
    +
    {% include cards/user-card-bg.html person-id=28 blurred=true %}
    -
    - {% include cards/subscribe.html person-id=0 %} -
    -
    - {% include cards/subscribe.html person-id=2 %} -
    -
    {% include cards/small-stats.html icon="dollar-sign" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
    -
    {% include cards/small-stats.html icon="shopping-bag" color="green" count=78 subtitle="Orders" description="32 shipped" %}
    -
    {% include cards/small-stats.html icon="users" color="red" count=1352 subtitle="Members" description="163 registered today" %}
    -
    {% include cards/small-stats.html icon="message-square" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
    +
    + {% include cards/subscribe.html person-id=0 %} +
    +
    + {% include cards/subscribe.html person-id=2 %} +
    +
    {% include cards/small-stats.html icon="dollar-sign" color="blue" count=132 + subtitle="Sales" description="12 waiting payments" %} +
    +
    {% include cards/small-stats.html icon="shopping-bag" color="green" count=78 + subtitle="Orders" description="32 shipped" %} +
    +
    {% include cards/small-stats.html icon="users" color="red" count=1352 + subtitle="Members" description="163 registered today" %} +
    +
    {% include cards/small-stats.html icon="message-square" color="yellow" count=132 + subtitle="Comments" description="16 waitings" %} +
    -
    {% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
    -
    {% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" color="green" count=78 subtitle="Orders" description="32 shipped" %}
    -
    {% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="red" count=1352 subtitle="Members" description="163 registered today" %}
    -
    {% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
    +
    {% include cards/small-stats.html chart-position="left" chart-type="pie" + chart-data="56/100" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %} +
    +
    {% include cards/small-stats.html chart-position="left" chart-type="pie" + chart-data="56/100" color="green" count=78 subtitle="Orders" description="32 shipped" %} +
    +
    {% include cards/small-stats.html chart-position="left" chart-type="pie" + chart-data="56/100" color="red" count=1352 subtitle="Members" description="163 registered today" %} +
    +
    {% include cards/small-stats.html chart-position="left" chart-type="pie" + chart-data="56/100" color="yellow" count=132 subtitle="Comments" description="16 waitings" %} +
    -
    - {% include cards/small-stats.html chart-type="line" chart-data="20,40,30,40,60,80,100" color="yellow" %} - {% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,40,60,80,70" color="red" icon="heart" %} - {% include cards/small-stats.html chart-type="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="github" %} - {% include cards/small-stats.html chart-type="donut" chart-data="12/100" chart-label="12%" person-id=10 %} - {% include cards/small-stats.html chart-type="donut" chart-data="12/100" chart-label-icon="trending-up" person-id=11 %} - {% include cards/small-stats.html chart-type="pie" chart-data="56/100" person-id=1 %} - {% include cards/small-stats.html second-icon="trending-up" color="green" person-id=4 %} - {% include cards/small-stats.html small-icon="trending-down" color="red" person-id=3 %} - {% include cards/code.html %} -
    -
    - {% include cards/small-stats-2.html title="Customers" count="1,950" growth=5.2 color="yellow" %} - {% include cards/small-stats-2.html title="Orders" count="8256" growth=0 color="green" %} - {% include cards/small-stats-2.html title="Revenue" count="$58,924" growth=-3.1 color="red" light=true %} -
    -
    - {% include cards/project-kanban.html title="Tabler UI" badge="v1.0" value=30 percentage-color="red" limit=4 offset=0 due="72 days" %} - {% include cards/project-kanban.html title="Tabler React" value=80 offset=20 %} - {% include cards/user-info.html %} -
    +
    + {% include cards/small-stats.html chart-type="line" chart-data="20,0,40,30,40,30,80,60" %} + {% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,10,40,60,80,70" color="red" icon="heart" %} + {% include cards/small-stats.html chart-type="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" + icon="github" %} + {% include cards/small-stats.html chart-type="pie" chart-data="12/100" person-id=10 %} + {% include cards/small-stats.html chart-type="pie" chart-data="12/100" person-id=11 %} + {% include cards/small-stats.html chart-type="pie" chart-data="56/100" person-id=1 %} + {% include cards/small-stats.html color="green" person-id=4 %} + {% include cards/small-stats.html small-icon="trending-down" color="red" person-id=3 %} + {% include cards/code.html %} +
    +
    + {% include cards/small-stats-2.html title="Customers" count="1,950" growth=5.2 color="yellow" %} + {% include cards/small-stats-2.html title="Orders" count="8256" growth=0 color="green" %} + {% include cards/small-stats-2.html title="Revenue" count="$58,924" growth=-3.1 color="red" light=true %} +
    +
    + {% include cards/project-kanban.html title="Tabler UI" badge="v1.0" value=30 percentage-color="red" limit=4 offset=0 + due="72 days" %} + {% include cards/project-kanban.html title="Tabler React" value=80 offset=20 %} + {% include cards/user-info.html %} +
    diff --git a/pages/tmp.html b/pages/tmp.html index a96a562a8..b6bfc9483 100644 --- a/pages/tmp.html +++ b/pages/tmp.html @@ -4,7 +4,10 @@ tmp: true
    - {% include cards/small-stats.html chart-position="right" %} + {% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,40,60,80,70" color="red" icon="heart" %} +
    +
    + {% include cards/small-stats.html chart-type="bar" chart-data="5,8,2,5,-1,3,5,3" color="blue" icon="heart" %}
    {% for chart in site.data.charts %} diff --git a/scss/_debug.scss b/scss/_debug.scss index cff7d531f..5d80477c2 100644 --- a/scss/_debug.scss +++ b/scss/_debug.scss @@ -1,4 +1,4 @@ -$debug: true; +$debug: false; @if $debug { $colors: ("blue": $blue, "azure": $azure, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan); diff --git a/scss/_utilities.scss b/scss/_utilities.scss index daa0c7e27..91884ea30 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -25,7 +25,7 @@ $utilities: ( class: leading, values: ( none: 1, - tight: 1.25, + tight: 1.3333334, normal: $line-height-base, loose: 2 !important, ) diff --git a/scss/_variables.scss b/scss/_variables.scss index e88435a4a..714a3c084 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -104,7 +104,7 @@ $colors: ( ) !default; $avatar-sizes: ( - "sm": 1.25rem, + "sm": 2rem, "md": 3rem, "lg": 4.5rem, "xl": 6rem @@ -228,7 +228,7 @@ $card-status-size: $border-width-wide !default; $card-group-margin: 1.5rem !default; $card-shadow: rgba($dark, .04) 0 2px 4px 0 !default; -$card-shadow-hover: rgba($dark, .08) 0 2px 12px 0 !default; +$card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default; //close $close-font-weight: 400 !default; diff --git a/scss/tabler.scss b/scss/tabler.scss index 66b815617..11a6fd829 100644 --- a/scss/tabler.scss +++ b/scss/tabler.scss @@ -60,7 +60,6 @@ @import "vendor/selectize"; @import "vendor/jqvmap"; @import "vendor/apexcharts"; -@import "vendor/sparkline"; @import "vendor/fullcalendar"; @import "utils/border"; diff --git a/scss/ui/_avatars.scss b/scss/ui/_avatars.scss index b226d8916..88056158a 100644 --- a/scss/ui/_avatars.scss +++ b/scss/ui/_avatars.scss @@ -1,11 +1,11 @@ .avatar { position: relative; display: inline-block; - width: 2rem; - height: 2rem; + width: 2.5rem; + height: 2.5rem; + line-height: 2.5rem; font-size: .875rem; font-weight: 400; - line-height: 2rem; color: $text-muted; text-align: center; text-transform: uppercase; diff --git a/scss/ui/_charts.scss b/scss/ui/_charts.scss index 242dc6b89..60ccd662f 100644 --- a/scss/ui/_charts.scss +++ b/scss/ui/_charts.scss @@ -17,8 +17,35 @@ //outline: 1px solid red; } -.chart-placeholder { - background-image: linear-gradient(135deg, $border-color 25%, transparent 25%, transparent 50%, $border-color 50%, $border-color 75%, transparent 75%, transparent 100%); - background-size: 14.14px 14.14px; + +.chart-sparkline { + position: relative; + width: 4rem; + height: 2.5rem; + line-height: 1; } +.chart-sparkline-square { + width: 2.5rem; +} + +.chart-sparkline-wide { + width: 6rem; +} + +.chart-sparkline-label { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: $h6-font-size; + + .icon { + width: 1rem; + height: 1rem; + } +} diff --git a/scss/vendor/_sparkline.scss b/scss/vendor/_sparkline.scss deleted file mode 100644 index e51c76658..000000000 --- a/scss/vendor/_sparkline.scss +++ /dev/null @@ -1,31 +0,0 @@ -.sparkline { - position: relative; - width: 4rem; - height: 2.5rem; - line-height: 1; -} - -.sparkline-square { - width: 2.5rem; -} - -.sparkline-wide { - width: 6rem; -} - -.sparkline-label { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; - font-size: $h6-font-size; - - .icon { - width: 1rem; - height: 1rem; - } -}