diff --git a/_config.yml b/_config.yml index a16fd4a50..850999eb7 100644 --- a/_config.yml +++ b/_config.yml @@ -26,6 +26,9 @@ google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw npm-package: "@tabler/core" +random-date-from: "2018-01-01" +random-date-to: "2022-01-01" + debug: false layout-dark: false diff --git a/package-lock.json b/package-lock.json index 25d5ce6cb..67f78692a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,6 +45,7 @@ "gulp-sass": "^5.1.0", "imask": "^6.4.2", "jsvectormap": "^1.4.5", + "list.js": "^2.3.1", "litepicker": "^2.0.12", "nouislider": "^15.5.1", "postcss": "^8.4.12", @@ -9119,6 +9120,18 @@ "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=", "dev": true }, + "node_modules/list.js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/list.js/-/list.js-2.3.1.tgz", + "integrity": "sha512-jnmm7DYpKtH3DxtO1E2VNCC9Gp7Wrp/FWA2JxQrZUhVJ2RCQBd57pCN6W5w6jpsfWZV0PCAbTX2NOPgyFeeZZg==", + "dev": true, + "dependencies": { + "string-natural-compare": "^2.0.2" + }, + "engines": { + "node": "^6.0 || ^8.0 || ^10.0 || ^12.0 || >=14" + } + }, "node_modules/litepicker": { "version": "2.0.12", "resolved": "https://registry.npmjs.org/litepicker/-/litepicker-2.0.12.tgz", @@ -13628,6 +13641,12 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/string-natural-compare": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-2.0.3.tgz", + "integrity": "sha512-4Kcl12rNjc+6EKhY8QyDVuQTAlMWwRiNbsxnVwBUKFr7dYPQuXVrtNU4sEkjF9LHY0AY6uVbB3ktbkIH4LC+BQ==", + "dev": true + }, "node_modules/string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", @@ -22412,6 +22431,15 @@ "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=", "dev": true }, + "list.js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/list.js/-/list.js-2.3.1.tgz", + "integrity": "sha512-jnmm7DYpKtH3DxtO1E2VNCC9Gp7Wrp/FWA2JxQrZUhVJ2RCQBd57pCN6W5w6jpsfWZV0PCAbTX2NOPgyFeeZZg==", + "dev": true, + "requires": { + "string-natural-compare": "^2.0.2" + } + }, "litepicker": { "version": "2.0.12", "resolved": "https://registry.npmjs.org/litepicker/-/litepicker-2.0.12.tgz", @@ -25961,6 +25989,12 @@ "safe-buffer": "~5.1.0" } }, + "string-natural-compare": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-2.0.3.tgz", + "integrity": "sha512-4Kcl12rNjc+6EKhY8QyDVuQTAlMWwRiNbsxnVwBUKFr7dYPQuXVrtNU4sEkjF9LHY0AY6uVbB3ktbkIH4LC+BQ==", + "dev": true + }, "string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", diff --git a/package.json b/package.json index e82d9fd1e..2b873c672 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "gulp-sass": "^5.1.0", "imask": "^6.4.2", "jsvectormap": "^1.4.5", + "list.js": "^2.3.1", "litepicker": "^2.0.12", "nouislider": "^15.5.1", "postcss": "^8.4.12", diff --git a/src/pages/_data/libs.json b/src/pages/_data/libs.json index b424bf7dd..a981408b0 100644 --- a/src/pages/_data/libs.json +++ b/src/pages/_data/libs.json @@ -10,6 +10,7 @@ "apexcharts": "apexcharts/dist/apexcharts.min.js", "nouislider": "nouislider/dist/nouislider.min.js", "countup": "countup.js/dist/countUp.js", + "lists": "list.js/dist/list.min.js", "masonry": "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js", "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js", "google-maps": "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY", diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml index 1de8dd0b6..6b3afae4a 100644 --- a/src/pages/_data/menu.yml +++ b/src/pages/_data/menu.yml @@ -37,6 +37,10 @@ base: colors: url: colors.html title: Colors + datatables: + url: datatables.html + title: Datatables + badge: New dropdowns: url: dropdowns.html title: Dropdowns diff --git a/src/pages/_includes/cards/tasks.html b/src/pages/_includes/cards/tasks.html index d8992b570..301dee846 100644 --- a/src/pages/_includes/cards/tasks.html +++ b/src/pages/_includes/cards/tasks.html @@ -14,7 +14,7 @@ {% include ui/icon.html icon="calendar" %} - {{ forloop.index | random_date: "2019-01-01", "2018-01-01" | date: '%B %d, %Y' }} + {{ forloop.index | random_date: site.random-date-from, site.random-date-to | date: '%B %d, %Y' }} diff --git a/src/pages/_includes/ui/progress.html b/src/pages/_includes/ui/progress.html index 2ab04337a..05e0af84e 100644 --- a/src/pages/_includes/ui/progress.html +++ b/src/pages/_includes/ui/progress.html @@ -1,6 +1,6 @@ {% assign percentage = include.value | default: 38 %} {% assign colors = include.colors | default: 'blue,red,green,yellow,dark' | split: ',' %} -
+
{% if include.indeterminate %}
{% elsif include.values %} diff --git a/src/pages/datatables.html b/src/pages/datatables.html new file mode 100644 index 000000000..7e2b95a8f --- /dev/null +++ b/src/pages/datatables.html @@ -0,0 +1,65 @@ +--- +title: Datatables +page-header: Datatables +libs: lists +--- + +{% assign id = include.map-id | default: 'default' %} +
+
+ {% assign products = 'Tabler,Tabler Icons,Tabler Emails,Tabler Components,Tabler Illustrations,Bootstrap' | split: ',' %} + {% assign techs = 'brand-apple,brand-windows,brand-debian,brand-android' | split: ',' %} +
+ + + + + + + + + + + + + + {% for rc in site.data.rollercoasters %} + {% assign progress = forloop.index | random_number %} + + + + + + + + + + {% endfor %} + +
{{ rc.name }}{{ rc.city }}{{ rc.type }}{{ rc.score }}{{ forloop.index | random_date: site.random-date-from, site.random-date-to | date: '%B %d, %Y' }}{{ forloop.index | random_number: 1, 200 }} +
+
{{ progress }}%
+
{% include ui/progress.html value=progress width="5rem" %}
+
+
+
+
+
+ +{% capture_global scripts %} + +{% endcapture_global %} \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index a1463fbef..8680bcb5a 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -545,15 +545,22 @@ $spinner-border-width-sm: 1px !default; //tables $table-color: inherit !default; +$table-cell-padding-x: .5rem !default; +$table-cell-padding-y: .75rem !default; $table-border-color: $border-color-transparent !default; -$table-head-border-color: $border-color-transparent !default; -$table-head-padding-y: .5rem !default; -$table-head-color: $text-muted !default; -$table-head-bg: var(--#{$variable-prefix}border-color-light) !default; +$table-th-border-color: $border-color-transparent !default; +$table-th-padding-x: $table-cell-padding-x !default; +$table-th-padding-y: .5rem !default; +$table-th-color: $text-muted !default; +$table-th-bg: var(--#{$variable-prefix}border-color-light) !default; $table-striped-order: even !default; $table-striped-bg: var(--#{$variable-prefix}border-color-light) !default; $table-group-separator-color: $border-color-transparent !default; +$table-sort-bg-image: url("data:image/svg+xml,") !default; +$table-sort-asc-bg-image: url("data:image/svg+xml,") !default; +$table-sort-desc-bg-image: url("data:image/svg+xml,") !default; + //toasts $toast-border-color: $border-color !default; $toast-header-color: $text-muted !default; diff --git a/src/scss/ui/_tables.scss b/src/scss/ui/_tables.scss index 73331a97f..78adde2e4 100644 --- a/src/scss/ui/_tables.scss +++ b/src/scss/ui/_tables.scss @@ -1,11 +1,12 @@ .table { thead { th { - color: $table-head-color; - background: $table-head-bg; + color: $table-th-color; + background: $table-th-bg; @include subheader; - padding-top: $table-head-padding-y; - padding-bottom: $table-head-padding-y; + padding-top: $table-th-padding-y; + padding-bottom: $table-th-padding-y; + white-space: nowrap; @media print { background: transparent; @@ -13,7 +14,7 @@ } } - >:not(:first-child) { + > :not(:first-child) { border-top-width: $table-border-width; } } @@ -96,4 +97,48 @@ } } } +} + +.table-sort { + font: inherit; + color: inherit; + text-transform: inherit; + letter-spacing: inherit; + border: 0; + background: inherit; + display: block; + width: 100%; + text-align: inherit; + @include transition(color $transition-time); + + margin: (-$table-th-padding-y) (-$table-th-padding-x); + padding: $table-th-padding-y $table-th-padding-x; + + &:hover, + &.asc, + &.desc { + color: $body-color; + } + + &:after, + &.asc:after, + &.desc:after { + content: ''; + display: inline-flex; + width: 1rem; + height: 1rem; + vertical-align: bottom; + background: $table-sort-bg-image no-repeat center; + opacity: .2; + } + + &.asc:after { + background: $table-sort-desc-bg-image no-repeat center; + opacity: 1; + } + + &.desc:after { + background: $table-sort-asc-bg-image no-repeat center; + opacity: 1; + } } \ No newline at end of file