mirror of https://github.com/ColorlibHQ/AdminLTE
improve index*.html
Daniel
parent
92cb0b8bac
commit
97d6a97d16
17
gulpfile.js
17
gulpfile.js
|
|
@ -11,6 +11,7 @@ const { src, dest, lastRun, watch, series } = require('gulp')
|
|||
const cleanCss = require('gulp-clean-css')
|
||||
const eslint = require('gulp-eslint7')
|
||||
const fileinclude = require('gulp-file-include')
|
||||
const gulpIf = require('gulp-if')
|
||||
const npmDist = require('gulp-npm-dist')
|
||||
const postcss = require('gulp-postcss')
|
||||
const rename = require('gulp-rename')
|
||||
|
|
@ -110,7 +111,7 @@ const lintScss = () => {
|
|||
}))
|
||||
}
|
||||
|
||||
const ts = () => {
|
||||
const tsCompile = () => {
|
||||
return esbuild.build({
|
||||
entryPoints: [paths.src.ts + '/adminlte.ts'],
|
||||
banner: {
|
||||
|
|
@ -127,10 +128,17 @@ const ts = () => {
|
|||
}
|
||||
|
||||
// Lint TS
|
||||
function isFixed(file) {
|
||||
// Has ESLint fixed the file contents?
|
||||
return file.eslint !== null && file.eslint.fixed
|
||||
}
|
||||
|
||||
const lintTs = () => {
|
||||
return src([paths.src.ts + '/**/*.ts'], { since: lastRun(lintTs) })
|
||||
.pipe(eslint())
|
||||
.pipe(eslint({ fix: true }))
|
||||
.pipe(eslint.format())
|
||||
.pipe(gulpIf(isFixed, dest(paths.src.ts)))
|
||||
.pipe(eslint.failAfterError())
|
||||
}
|
||||
|
||||
const index = () => {
|
||||
|
|
@ -178,10 +186,9 @@ const serve = () => {
|
|||
watch([paths.src.scss], series(lintScss))
|
||||
watch([paths.src.scss + '/**/*.scss', '!' + paths.src.scss + '/bootstrap-dark/**/*.scss', '!' + paths.src.scss + '/dark/**/*.scss'], series(scss))
|
||||
watch([paths.src.scss + '/bootstrap-dark/', paths.src.scss + '/dark/'], series(scssDark))
|
||||
watch([paths.src.ts], series(lintTs, ts))
|
||||
watch([paths.src.ts], series(lintTs, tsCompile))
|
||||
watch([paths.src.html, paths.src.base + '*.html', paths.src.partials], series(html, index))
|
||||
watch([paths.src.assets], series(assets))
|
||||
// watch([paths.src.vendor], series(vendor)) // Probably not required
|
||||
}
|
||||
|
||||
// From here Dist will Start
|
||||
|
|
@ -293,4 +300,4 @@ const copyDistVendor = () => {
|
|||
exports.build = series(lintScss, lintTs, cleanDist, copyDistCssAll, copyDistCssRtl, minifyDistCss, copyDistJs, minifyDistJs, copyDistHtml, copyDistHtmlIndex, copyDistAssets, copyDistVendor)
|
||||
|
||||
// Default - Only for light mode AdminLTE
|
||||
exports.default = series(scss, scssDark, ts, html, index, assets, vendor, serve)
|
||||
exports.default = series(scss, scssDark, tsCompile, html, index, assets, vendor, serve)
|
||||
|
|
|
|||
|
|
@ -481,6 +481,12 @@
|
|||
"integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/overlayscrollbars": {
|
||||
"version": "1.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/overlayscrollbars/-/overlayscrollbars-1.12.0.tgz",
|
||||
"integrity": "sha512-h/pScHNKi4mb+TrJGDon8Yb06ujFG0mSg12wIO0sWMUF3dQIe2ExRRdNRviaNt9IjxIiOfnRr7FsQAdHwK4sMg==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/parse-json": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
|
||||
|
|
@ -494,13 +500,13 @@
|
|||
"dev": true
|
||||
},
|
||||
"@typescript-eslint/eslint-plugin": {
|
||||
"version": "4.24.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.24.0.tgz",
|
||||
"integrity": "sha512-qbCgkPM7DWTsYQGjx9RTuQGswi+bEt0isqDBeo+CKV0953zqI0Tp7CZ7Fi9ipgFA6mcQqF4NOVNwS/f2r6xShw==",
|
||||
"version": "4.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.25.0.tgz",
|
||||
"integrity": "sha512-Qfs3dWkTMKkKwt78xp2O/KZQB8MPS1UQ5D3YW2s6LQWBE1074BE+Rym+b1pXZIX3M3fSvPUDaCvZLKV2ylVYYQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@typescript-eslint/experimental-utils": "4.24.0",
|
||||
"@typescript-eslint/scope-manager": "4.24.0",
|
||||
"@typescript-eslint/experimental-utils": "4.25.0",
|
||||
"@typescript-eslint/scope-manager": "4.25.0",
|
||||
"debug": "^4.1.1",
|
||||
"functional-red-black-tree": "^1.0.1",
|
||||
"lodash": "^4.17.15",
|
||||
|
|
@ -510,55 +516,55 @@
|
|||
}
|
||||
},
|
||||
"@typescript-eslint/experimental-utils": {
|
||||
"version": "4.24.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.24.0.tgz",
|
||||
"integrity": "sha512-IwTT2VNDKH1h8RZseMH4CcYBz6lTvRoOLDuuqNZZoThvfHEhOiZPQCow+5El3PtyxJ1iDr6UXZwYtE3yZQjhcw==",
|
||||
"version": "4.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.25.0.tgz",
|
||||
"integrity": "sha512-f0doRE76vq7NEEU0tw+ajv6CrmPelw5wLoaghEHkA2dNLFb3T/zJQqGPQ0OYt5XlZaS13MtnN+GTPCuUVg338w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/json-schema": "^7.0.3",
|
||||
"@typescript-eslint/scope-manager": "4.24.0",
|
||||
"@typescript-eslint/types": "4.24.0",
|
||||
"@typescript-eslint/typescript-estree": "4.24.0",
|
||||
"@typescript-eslint/scope-manager": "4.25.0",
|
||||
"@typescript-eslint/types": "4.25.0",
|
||||
"@typescript-eslint/typescript-estree": "4.25.0",
|
||||
"eslint-scope": "^5.0.0",
|
||||
"eslint-utils": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@typescript-eslint/parser": {
|
||||
"version": "4.24.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.24.0.tgz",
|
||||
"integrity": "sha512-dj1ZIh/4QKeECLb2f/QjRwMmDArcwc2WorWPRlB8UNTZlY1KpTVsbX7e3ZZdphfRw29aTFUSNuGB8w9X5sS97w==",
|
||||
"version": "4.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.25.0.tgz",
|
||||
"integrity": "sha512-OZFa1SKyEJpAhDx8FcbWyX+vLwh7OEtzoo2iQaeWwxucyfbi0mT4DijbOSsTgPKzGHr6GrF2V5p/CEpUH/VBxg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@typescript-eslint/scope-manager": "4.24.0",
|
||||
"@typescript-eslint/types": "4.24.0",
|
||||
"@typescript-eslint/typescript-estree": "4.24.0",
|
||||
"@typescript-eslint/scope-manager": "4.25.0",
|
||||
"@typescript-eslint/types": "4.25.0",
|
||||
"@typescript-eslint/typescript-estree": "4.25.0",
|
||||
"debug": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"@typescript-eslint/scope-manager": {
|
||||
"version": "4.24.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.24.0.tgz",
|
||||
"integrity": "sha512-9+WYJGDnuC9VtYLqBhcSuM7du75fyCS/ypC8c5g7Sdw7pGL4NDTbeH38eJPfzIydCHZDoOgjloxSAA3+4l/zsA==",
|
||||
"version": "4.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.25.0.tgz",
|
||||
"integrity": "sha512-2NElKxMb/0rya+NJG1U71BuNnp1TBd1JgzYsldsdA83h/20Tvnf/HrwhiSlNmuq6Vqa0EzidsvkTArwoq+tH6w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@typescript-eslint/types": "4.24.0",
|
||||
"@typescript-eslint/visitor-keys": "4.24.0"
|
||||
"@typescript-eslint/types": "4.25.0",
|
||||
"@typescript-eslint/visitor-keys": "4.25.0"
|
||||
}
|
||||
},
|
||||
"@typescript-eslint/types": {
|
||||
"version": "4.24.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.24.0.tgz",
|
||||
"integrity": "sha512-tkZUBgDQKdvfs8L47LaqxojKDE+mIUmOzdz7r+u+U54l3GDkTpEbQ1Jp3cNqqAU9vMUCBA1fitsIhm7yN0vx9Q==",
|
||||
"version": "4.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.25.0.tgz",
|
||||
"integrity": "sha512-+CNINNvl00OkW6wEsi32wU5MhHti2J25TJsJJqgQmJu3B3dYDBcmOxcE5w9cgoM13TrdE/5ND2HoEnBohasxRQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@typescript-eslint/typescript-estree": {
|
||||
"version": "4.24.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.24.0.tgz",
|
||||
"integrity": "sha512-kBDitL/by/HK7g8CYLT7aKpAwlR8doshfWz8d71j97n5kUa5caHWvY0RvEUEanL/EqBJoANev8Xc/mQ6LLwXGA==",
|
||||
"version": "4.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.25.0.tgz",
|
||||
"integrity": "sha512-1B8U07TGNAFMxZbSpF6jqiDs1cVGO0izVkf18Q/SPcUAc9LhHxzvSowXDTvkHMWUVuPpagupaW63gB6ahTXVlg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@typescript-eslint/types": "4.24.0",
|
||||
"@typescript-eslint/visitor-keys": "4.24.0",
|
||||
"@typescript-eslint/types": "4.25.0",
|
||||
"@typescript-eslint/visitor-keys": "4.25.0",
|
||||
"debug": "^4.1.1",
|
||||
"globby": "^11.0.1",
|
||||
"is-glob": "^4.0.1",
|
||||
|
|
@ -567,12 +573,12 @@
|
|||
}
|
||||
},
|
||||
"@typescript-eslint/visitor-keys": {
|
||||
"version": "4.24.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.24.0.tgz",
|
||||
"integrity": "sha512-4ox1sjmGHIxjEDBnMCtWFFhErXtKA1Ec0sBpuz0fqf3P+g3JFGyTxxbF06byw0FRsPnnbq44cKivH7Ks1/0s6g==",
|
||||
"version": "4.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.25.0.tgz",
|
||||
"integrity": "sha512-AmkqV9dDJVKP/TcZrbf6s6i1zYXt5Hl8qOLrRDTFfRNae4+LB8A4N3i+FLZPW85zIxRy39BgeWOfMS3HoH5ngg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@typescript-eslint/types": "4.24.0",
|
||||
"@typescript-eslint/types": "4.25.0",
|
||||
"eslint-visitor-keys": "^2.0.0"
|
||||
}
|
||||
},
|
||||
|
|
@ -1000,17 +1006,25 @@
|
|||
"dev": true
|
||||
},
|
||||
"autoprefixer": {
|
||||
"version": "10.2.5",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.5.tgz",
|
||||
"integrity": "sha512-7H4AJZXvSsn62SqZyJCP+1AWwOuoYpUfK6ot9vm0e87XD6mT8lDywc9D9OTJPMULyGcvmIxzTAMeG2Cc+YX+fA==",
|
||||
"version": "10.2.6",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.6.tgz",
|
||||
"integrity": "sha512-8lChSmdU6dCNMCQopIf4Pe5kipkAGj/fvTMslCsih0uHpOrXOPUEVOmYMMqmw3cekQkSD7EhIeuYl5y0BLdKqg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"browserslist": "^4.16.3",
|
||||
"caniuse-lite": "^1.0.30001196",
|
||||
"browserslist": "^4.16.6",
|
||||
"caniuse-lite": "^1.0.30001230",
|
||||
"colorette": "^1.2.2",
|
||||
"fraction.js": "^4.0.13",
|
||||
"fraction.js": "^4.1.1",
|
||||
"normalize-range": "^0.1.2",
|
||||
"postcss-value-parser": "^4.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001230",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz",
|
||||
"integrity": "sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"aws-sign2": {
|
||||
|
|
@ -1482,6 +1496,11 @@
|
|||
"integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
|
||||
"dev": true
|
||||
},
|
||||
"chart.js": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.3.0.tgz",
|
||||
"integrity": "sha512-3pO3kL2st1Lzhw+HTGvDwcNYWustHwvApM/v7b2td6CrthyEygbPoXaN/iGZfUpfuovZfJ4dy129RCr39BR1Bg=="
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
|
||||
|
|
@ -2475,9 +2494,9 @@
|
|||
}
|
||||
},
|
||||
"esbuild": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.1.tgz",
|
||||
"integrity": "sha512-WfQ00MKm/Y4ysz1u9PCUAsV66k5lbrcEvS6aG9jhBIavpB94FBdaWeBkaZXxCZB4w+oqh+j4ozJFWnnFprOXbg==",
|
||||
"version": "0.12.5",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.5.tgz",
|
||||
"integrity": "sha512-vcuP53pA5XiwUU4FnlXM+2PnVjTfHGthM7uP1gtp+9yfheGvFFbq/KyuESThmtoHPUrfZH5JpxGVJIFDVD1Egw==",
|
||||
"dev": true
|
||||
},
|
||||
"escalade": {
|
||||
|
|
@ -3502,6 +3521,12 @@
|
|||
"integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
|
||||
"dev": true
|
||||
},
|
||||
"fork-stream": {
|
||||
"version": "0.0.4",
|
||||
"resolved": "https://registry.npmjs.org/fork-stream/-/fork-stream-0.0.4.tgz",
|
||||
"integrity": "sha1-24Sfznf2cIpfjzhq5TOgkHtUrnA=",
|
||||
"dev": true
|
||||
},
|
||||
"form-data": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
|
||||
|
|
@ -3514,9 +3539,9 @@
|
|||
}
|
||||
},
|
||||
"fraction.js": {
|
||||
"version": "4.0.13",
|
||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.0.13.tgz",
|
||||
"integrity": "sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA==",
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
|
||||
"integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
|
||||
"dev": true
|
||||
},
|
||||
"fragment-cache": {
|
||||
|
|
@ -3553,6 +3578,48 @@
|
|||
"requires": {
|
||||
"graceful-fs": "^4.1.11",
|
||||
"through2": "^2.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"isarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
|
||||
"dev": true
|
||||
},
|
||||
"readable-stream": {
|
||||
"version": "2.3.7",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
|
||||
"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
"isarray": "~1.0.0",
|
||||
"process-nextick-args": "~2.0.0",
|
||||
"safe-buffer": "~5.1.1",
|
||||
"string_decoder": "~1.1.1",
|
||||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"through2": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
|
||||
"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"readable-stream": "~2.3.6",
|
||||
"xtend": "~4.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"fs.realpath": {
|
||||
|
|
@ -4482,6 +4549,38 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"gulp-if": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/gulp-if/-/gulp-if-3.0.0.tgz",
|
||||
"integrity": "sha512-fCUEngzNiEZEK2YuPm+sdMpO6ukb8+/qzbGfJBXyNOXz85bCG7yBI+pPSl+N90d7gnLvMsarthsAImx0qy7BAw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"gulp-match": "^1.1.0",
|
||||
"ternary-stream": "^3.0.0",
|
||||
"through2": "^3.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"through2": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
|
||||
"integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"inherits": "^2.0.4",
|
||||
"readable-stream": "2 || 3"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"gulp-match": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/gulp-match/-/gulp-match-1.1.0.tgz",
|
||||
"integrity": "sha512-DlyVxa1Gj24DitY2OjEsS+X6tDpretuxD6wTfhXE/Rw2hweqc1f6D/XtsJmoiCwLWfXgR87W9ozEityPCVzGtQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimatch": "^3.0.3"
|
||||
}
|
||||
},
|
||||
"gulp-npm-dist": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/gulp-npm-dist/-/gulp-npm-dist-1.0.3.tgz",
|
||||
|
|
@ -4637,6 +4736,36 @@
|
|||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
|
||||
"dev": true
|
||||
},
|
||||
"isarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
|
||||
"dev": true
|
||||
},
|
||||
"readable-stream": {
|
||||
"version": "2.3.7",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
|
||||
"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
"isarray": "~1.0.0",
|
||||
"process-nextick-args": "~2.0.0",
|
||||
"safe-buffer": "~5.1.1",
|
||||
"string_decoder": "~1.1.1",
|
||||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
|
||||
|
|
@ -4654,6 +4783,16 @@
|
|||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"through2": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
|
||||
"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"readable-stream": "~2.3.6",
|
||||
"xtend": "~4.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -4732,6 +4871,38 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"gulp-typescript": {
|
||||
"version": "6.0.0-alpha.1",
|
||||
"resolved": "https://registry.npmjs.org/gulp-typescript/-/gulp-typescript-6.0.0-alpha.1.tgz",
|
||||
"integrity": "sha512-KoT0TTfjfT7w3JItHkgFH1T/zK4oXWC+a8xxKfniRfVcA0Fa1bKrIhztYelYmb+95RB80OLMBreknYkdwzdi2Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-colors": "^4.1.1",
|
||||
"plugin-error": "^1.0.1",
|
||||
"source-map": "^0.7.3",
|
||||
"through2": "^3.0.1",
|
||||
"vinyl": "^2.2.0",
|
||||
"vinyl-fs": "^3.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"source-map": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
|
||||
"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
|
||||
"dev": true
|
||||
},
|
||||
"through2": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
|
||||
"integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"inherits": "^2.0.4",
|
||||
"readable-stream": "2 || 3"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"gulplog": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
|
||||
|
|
@ -6146,6 +6317,12 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"merge-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||
"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
|
||||
"dev": true
|
||||
},
|
||||
"merge2": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
|
||||
|
|
@ -7145,6 +7322,11 @@
|
|||
"os-tmpdir": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"overlayscrollbars": {
|
||||
"version": "1.13.1",
|
||||
"resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-1.13.1.tgz",
|
||||
"integrity": "sha512-gIQfzgGgu1wy80EB4/6DaJGHMEGmizq27xHIESrzXq0Y/J0Ay1P3DWk6tuVmEPIZH15zaBlxeEJOqdJKmowHCQ=="
|
||||
},
|
||||
"p-limit": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
|
||||
|
|
@ -8246,6 +8428,48 @@
|
|||
"remove-bom-buffer": "^3.0.0",
|
||||
"safe-buffer": "^5.1.0",
|
||||
"through2": "^2.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"isarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
|
||||
"dev": true
|
||||
},
|
||||
"readable-stream": {
|
||||
"version": "2.3.7",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
|
||||
"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
"isarray": "~1.0.0",
|
||||
"process-nextick-args": "~2.0.0",
|
||||
"safe-buffer": "~5.1.1",
|
||||
"string_decoder": "~1.1.1",
|
||||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"through2": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
|
||||
"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"readable-stream": "~2.3.6",
|
||||
"xtend": "~4.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"remove-trailing-separator": {
|
||||
|
|
@ -8483,9 +8707,9 @@
|
|||
}
|
||||
},
|
||||
"rtlcss": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.1.2.tgz",
|
||||
"integrity": "sha512-b04YSX37siupPOWUEguEBReWX2w4QT89C0PI9g2JzZycbq7zrgPmTr1DA1pizSWpKRFdCjjnrx/SSvU4fOHmGg==",
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.2.0.tgz",
|
||||
"integrity": "sha512-nV3UmaTmA5TkP2dYOR16ULu6FkMOqZRbiXbFZnmWIN9coPfx3gin31VGOPV7vrVMPjNds7pCS2UYy0mwQUdFCQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
|
|
@ -10177,6 +10401,42 @@
|
|||
"inherits": "2"
|
||||
}
|
||||
},
|
||||
"ternary-stream": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ternary-stream/-/ternary-stream-3.0.0.tgz",
|
||||
"integrity": "sha512-oIzdi+UL/JdktkT+7KU5tSIQjj8pbShj3OASuvDEhm0NT5lppsm7aXWAmAq4/QMaBIyfuEcNLbAQA+HpaISobQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"duplexify": "^4.1.1",
|
||||
"fork-stream": "^0.0.4",
|
||||
"merge-stream": "^2.0.0",
|
||||
"through2": "^3.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"duplexify": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.1.tgz",
|
||||
"integrity": "sha512-DY3xVEmVHTv1wSzKNbwoU6nVjzI369Y6sPoqfYr0/xlx3IdX2n94xIszTcjPO8W8ZIv0Wb0PXNcjuZyT4wiICA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"end-of-stream": "^1.4.1",
|
||||
"inherits": "^2.0.3",
|
||||
"readable-stream": "^3.1.1",
|
||||
"stream-shift": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"through2": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
|
||||
"integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"inherits": "^2.0.4",
|
||||
"readable-stream": "2 || 3"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"text-table": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
||||
|
|
@ -10193,14 +10453,14 @@
|
|||
"dlv": "^1.1.3"
|
||||
}
|
||||
},
|
||||
"through2": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
|
||||
"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
|
||||
"through2-filter": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-3.0.0.tgz",
|
||||
"integrity": "sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"readable-stream": "~2.3.6",
|
||||
"xtend": "~4.0.1"
|
||||
"through2": "~2.0.0",
|
||||
"xtend": "~4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"isarray": {
|
||||
|
|
@ -10232,19 +10492,19 @@
|
|||
"requires": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"through2": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
|
||||
"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"readable-stream": "~2.3.6",
|
||||
"xtend": "~4.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"through2-filter": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-3.0.0.tgz",
|
||||
"integrity": "sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"through2": "~2.0.0",
|
||||
"xtend": "~4.0.0"
|
||||
}
|
||||
},
|
||||
"time-stamp": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
|
||||
|
|
@ -10338,6 +10598,48 @@
|
|||
"dev": true,
|
||||
"requires": {
|
||||
"through2": "^2.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"isarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
|
||||
"dev": true
|
||||
},
|
||||
"readable-stream": {
|
||||
"version": "2.3.7",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
|
||||
"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
"isarray": "~1.0.0",
|
||||
"process-nextick-args": "~2.0.0",
|
||||
"safe-buffer": "~5.1.1",
|
||||
"string_decoder": "~1.1.1",
|
||||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"through2": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
|
||||
"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"readable-stream": "~2.3.6",
|
||||
"xtend": "~4.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"toidentifier": {
|
||||
|
|
@ -10456,9 +10758,9 @@
|
|||
}
|
||||
},
|
||||
"typescript": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz",
|
||||
"integrity": "sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==",
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz",
|
||||
"integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==",
|
||||
"dev": true
|
||||
},
|
||||
"ua-parser-js": {
|
||||
|
|
@ -10812,6 +11114,16 @@
|
|||
"requires": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"through2": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
|
||||
"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"readable-stream": "~2.3.6",
|
||||
"xtend": "~4.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
19
package.json
19
package.json
|
|
@ -37,16 +37,19 @@
|
|||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.15.3",
|
||||
"@popperjs/core": "^2.9.2",
|
||||
"bootstrap": "^5.0.1"
|
||||
"bootstrap": "^5.0.1",
|
||||
"chart.js": "^3.3.0",
|
||||
"overlayscrollbars": "^1.13.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^4.24.0",
|
||||
"@typescript-eslint/parser": "^4.24.0",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"@types/overlayscrollbars": "^1.12.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.25.0",
|
||||
"@typescript-eslint/parser": "^4.25.0",
|
||||
"autoprefixer": "^10.2.6",
|
||||
"browser-sync": "^2.26.14",
|
||||
"bundlewatch": "^0.3.2",
|
||||
"del": "^6.0.0",
|
||||
"esbuild": "^0.12.1",
|
||||
"esbuild": "^0.12.5",
|
||||
"eslint": "^7.27.0",
|
||||
"eslint-config-xo": "^0.36.0",
|
||||
"eslint-config-xo-typescript": "^0.41.1",
|
||||
|
|
@ -56,18 +59,20 @@
|
|||
"gulp-clean-css": "^4.3.0",
|
||||
"gulp-eslint7": "^0.3.1",
|
||||
"gulp-file-include": "^2.3.0",
|
||||
"gulp-if": "^3.0.0",
|
||||
"gulp-npm-dist": "^1.0.3",
|
||||
"gulp-postcss": "^9.0.0",
|
||||
"gulp-rename": "^2.0.0",
|
||||
"gulp-sass": "^4.1.0",
|
||||
"gulp-stylelint": "^13.0.0",
|
||||
"gulp-typescript": "^6.0.0-alpha.1",
|
||||
"lockfile-lint": "^4.6.2",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.3.0",
|
||||
"rtlcss": "^3.1.2",
|
||||
"rtlcss": "^3.2.0",
|
||||
"sass": "^1.32.13",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-config-twbs-bootstrap": "^2.2.0",
|
||||
"typescript": "^4.2.4"
|
||||
"typescript": "^4.3.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
/* eslint-disable no-undef */
|
||||
/* Chart.js Charts */
|
||||
// Sales chart
|
||||
const salesChartCanvas = document.querySelector('#revenue-chart-canvas').getContext('2d')
|
||||
|
||||
const salesChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Digital Goods',
|
||||
backgroundColor: 'rgba(60,141,188,0.9)',
|
||||
borderColor: 'rgba(60,141,188,0.8)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointColor: '#3b8bba',
|
||||
pointStrokeColor: 'rgba(60,141,188,1)',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(60,141,188,1)',
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
},
|
||||
{
|
||||
label: 'Electronics',
|
||||
backgroundColor: 'rgba(210, 214, 222, 1)',
|
||||
borderColor: 'rgba(210, 214, 222, 1)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointColor: 'rgba(210, 214, 222, 1)',
|
||||
pointStrokeColor: '#c1c7d1',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const salesChartOptions = {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
|
||||
type: 'line',
|
||||
data: salesChartData,
|
||||
options: salesChartOptions
|
||||
})
|
||||
|
||||
// Donut Chart
|
||||
const pieChartCanvas = document.querySelector('#sales-chart-canvas').getContext('2d')
|
||||
const pieData = {
|
||||
labels: [
|
||||
'Instore Sales',
|
||||
'Download Sales',
|
||||
'Mail-Order Sales'
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [30, 12, 20],
|
||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12']
|
||||
}
|
||||
]
|
||||
}
|
||||
const pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
responsive: true
|
||||
}
|
||||
// Create pie or douhnut chart
|
||||
// You can switch between pie and douhnut using the method below.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
|
||||
type: 'doughnut',
|
||||
data: pieData,
|
||||
options: pieOptions
|
||||
})
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
/* eslint-disable no-undef */
|
||||
/* ChartJS
|
||||
* -------
|
||||
* Here we will create a few charts using ChartJS
|
||||
*/
|
||||
|
||||
//-----------------------
|
||||
// - MONTHLY SALES CHART -
|
||||
//-----------------------
|
||||
|
||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
||||
const salesChartCanvas = document.querySelector('#salesChart').getContext('2d')
|
||||
|
||||
const salesChartData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Digital Goods',
|
||||
backgroundColor: 'rgba(60,141,188,0.9)',
|
||||
borderColor: 'rgba(60,141,188,0.8)',
|
||||
fill: true,
|
||||
pointRadius: 0,
|
||||
pointColor: '#3b8bba',
|
||||
pointStrokeColor: 'rgba(60,141,188,1)',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(60,141,188,1)',
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
},
|
||||
{
|
||||
label: 'Electronics',
|
||||
backgroundColor: 'rgba(210, 214, 222, 1)',
|
||||
borderColor: 'rgba(210, 214, 222, 1)',
|
||||
fill: true,
|
||||
pointRadius: 0,
|
||||
pointColor: 'rgba(210, 214, 222, 1)',
|
||||
pointStrokeColor: '#c1c7d1',
|
||||
pointHighlightFill: '#fff',
|
||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const salesChartOptions = {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
tension: 0.4,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const salesChart = new Chart(salesChartCanvas, {
|
||||
type: 'line',
|
||||
data: salesChartData,
|
||||
options: salesChartOptions
|
||||
})
|
||||
|
||||
//---------------------------
|
||||
// - END MONTHLY SALES CHART -
|
||||
//---------------------------
|
||||
|
||||
//-------------
|
||||
// - PIE CHART -
|
||||
//-------------
|
||||
|
||||
// Get context with querySelector - using Chart.js .getContext('2d') method.
|
||||
const pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
|
||||
|
||||
const pieData = {
|
||||
labels: [
|
||||
'Chrome',
|
||||
'IE',
|
||||
'FireFox',
|
||||
'Safari',
|
||||
'Opera',
|
||||
'Navigator'
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [700, 500, 400, 600, 300, 100],
|
||||
backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
|
||||
}
|
||||
]
|
||||
}
|
||||
const pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
// Create pie or douhnut chart
|
||||
// You can switch between pie and douhnut using the method below.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const pieChart = new Chart(pieChartCanvas, {
|
||||
type: 'doughnut',
|
||||
data: pieData,
|
||||
options: pieOptions
|
||||
})
|
||||
|
||||
//-----------------
|
||||
// - END PIE CHART -
|
||||
//-----------------
|
||||
249
src/index.html
249
src/index.html
|
|
@ -95,16 +95,242 @@
|
|||
<div class="row">
|
||||
<!-- Left col -->
|
||||
<section class="col-lg-7">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
<!-- Custom tabs (Charts with tabs)-->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<i class="fas fa-chart-pie me-1"></i>
|
||||
Sales
|
||||
</h3>
|
||||
<div class="card-tools">
|
||||
<ul class="nav nav-pills ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#revenue-chart" data-bs-toggle="tab">Area</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#sales-chart" data-bs-toggle="tab">Donut</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div class="tab-content p-0">
|
||||
<!-- Morris chart - Sales -->
|
||||
<div class="chart tab-pane active" id="revenue-chart"
|
||||
style="position: relative; height: 300px;">
|
||||
<canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
|
||||
</div>
|
||||
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
|
||||
<canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<!-- DIRECT CHAT -->
|
||||
<div class="card direct-chat direct-chat-primary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Direct Chat</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<span title="3 New Messages" class="badge bg-primary">3</span>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" title="Contacts" data-widget="chat-pane-toggle">
|
||||
<i class="fas fa-comments"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<!-- Conversations are loaded here -->
|
||||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the start -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-start">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Is this template really for free? That's unbelievable!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message to the end -->
|
||||
<div class="direct-chat-msg end">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-end">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message. Default to the start -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-start">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Working with AdminLTE on a great new app! Wanna join?
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message to the end -->
|
||||
<div class="direct-chat-msg end">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-end">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
I would love to.
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
</div>
|
||||
<!--/.direct-chat-messages-->
|
||||
|
||||
<!-- Contacts are loaded here -->
|
||||
<div class="direct-chat-contacts">
|
||||
<ul class="contacts-list">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Count Dracula
|
||||
<small class="contacts-list-date float-end">2/28/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">How have you been? I was...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="dist/img/user7-128x128.jpg" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Sarah Doe
|
||||
<small class="contacts-list-date float-end">2/23/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">I will be waiting for...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Nadia Jolie
|
||||
<small class="contacts-list-date float-end">2/20/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">I'll call you back at...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="dist/img/user5-128x128.jpg" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Nora S. Vans
|
||||
<small class="contacts-list-date float-end">2/10/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Where is your new...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="dist/img/user6-128x128.jpg" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
John K.
|
||||
<small class="contacts-list-date float-end">1/27/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Can I take a look at...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="dist/img/user8-128x128.jpg" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Kenneth M.
|
||||
<small class="contacts-list-date float-end">1/4/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Never mind I found...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
</ul>
|
||||
<!-- /.contacts-list -->
|
||||
</div>
|
||||
<!-- /.direct-chat-pane -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
<form action="#" method="post">
|
||||
<div class="input-group">
|
||||
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
||||
<span class="input-group-append">
|
||||
<button type="button" class="btn btn-primary">Send</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!--/.direct-chat -->
|
||||
</section>
|
||||
<!-- /.Left col -->
|
||||
</div>
|
||||
<!-- /.row (main row) -->
|
||||
</div><!-- /.container-fluid -->
|
||||
|
|
@ -121,5 +347,10 @@
|
|||
@@include('./_scripts.html', {
|
||||
"path": "."
|
||||
})
|
||||
|
||||
<!-- ChartJS -->
|
||||
<script src="./vendor/chart.js/dist/chart.js"></script>
|
||||
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
|
||||
<script src="./assets/js/dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
723
src/index2.html
723
src/index2.html
|
|
@ -89,6 +89,724 @@
|
|||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Monthly Recap Report</h5>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<i class="fas fa-wrench"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<a href="#" class="dropdown-item">Action</a>
|
||||
<a href="#" class="dropdown-item">Another action</a>
|
||||
<a href="#" class="dropdown-item">Something else here</a>
|
||||
<a class="dropdown-divider"></a>
|
||||
<a href="#" class="dropdown-item">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<p class="text-center">
|
||||
<strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
|
||||
</p>
|
||||
|
||||
<div class="chart">
|
||||
<!-- Sales Chart Canvas -->
|
||||
<canvas id="salesChart" style="height: 180px;"></canvas>
|
||||
</div>
|
||||
<!-- /.chart-responsive -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-4">
|
||||
<p class="text-center">
|
||||
<strong>Goal Completion</strong>
|
||||
</p>
|
||||
|
||||
<div class="progress-group">
|
||||
Add Products to Cart
|
||||
<span class="float-end"><b>160</b>/200</span>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-primary" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.progress-group -->
|
||||
|
||||
<div class="progress-group">
|
||||
Complete Purchase
|
||||
<span class="float-end"><b>310</b>/400</span>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-danger" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.progress-group -->
|
||||
<div class="progress-group">
|
||||
<span class="progress-text">Visit Premium Page</span>
|
||||
<span class="float-end"><b>480</b>/800</span>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-success" style="width: 60%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.progress-group -->
|
||||
<div class="progress-group">
|
||||
Send Inquiries
|
||||
<span class="float-end"><b>250</b>/500</span>
|
||||
<div class="progress progress-sm">
|
||||
<div class="progress-bar bg-warning" style="width: 50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.progress-group -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- ./card-body -->
|
||||
<div class="card-footer">
|
||||
<div class="row">
|
||||
<div class="col-sm-3 col-6">
|
||||
<div class="description-block border-end">
|
||||
<span class="description-percentage text-success"><i class="fas fa-caret-up"></i> 17%</span>
|
||||
<h5 class="description-header">$35,210.43</h5>
|
||||
<span class="description-text">TOTAL REVENUE</span>
|
||||
</div>
|
||||
<!-- /.description-block -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-3 col-6">
|
||||
<div class="description-block border-end">
|
||||
<span class="description-percentage text-purple"><i class="fas fa-caret-left"></i> 0%</span>
|
||||
<h5 class="description-header">$10,390.90</h5>
|
||||
<span class="description-text">TOTAL COST</span>
|
||||
</div>
|
||||
<!-- /.description-block -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-3 col-6">
|
||||
<div class="description-block border-end">
|
||||
<span class="description-percentage text-success"><i class="fas fa-caret-up"></i> 20%</span>
|
||||
<h5 class="description-header">$24,813.53</h5>
|
||||
<span class="description-text">TOTAL PROFIT</span>
|
||||
</div>
|
||||
<!-- /.description-block -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-3 col-6">
|
||||
<div class="description-block">
|
||||
<span class="description-percentage text-danger"><i class="fas fa-caret-down"></i> 18%</span>
|
||||
<h5 class="description-header">1200</h5>
|
||||
<span class="description-text">GOAL COMPLETIONS</span>
|
||||
</div>
|
||||
<!-- /.description-block -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- Main row -->
|
||||
<div class="row">
|
||||
<!-- Left col -->
|
||||
<div class="col-md-8">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- DIRECT CHAT -->
|
||||
<div class="card direct-chat direct-chat-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Direct Chat</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<span title="3 New Messages" class="badge bg-warning">3</span>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" title="Contacts" data-widget="chat-pane-toggle">
|
||||
<i class="fas fa-comments"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<!-- Conversations are loaded here -->
|
||||
<div class="direct-chat-messages">
|
||||
<!-- Message. Default to the start -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-start">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Is this template really for free? That's unbelievable!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message to the end -->
|
||||
<div class="direct-chat-msg end">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-end">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
You better believe it!
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message. Default to the start -->
|
||||
<div class="direct-chat-msg">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-start">Alexander Pierce</span>
|
||||
<span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
Working with AdminLTE on a great new app! Wanna join?
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
<!-- Message to the end -->
|
||||
<div class="direct-chat-msg end">
|
||||
<div class="direct-chat-infos clearfix">
|
||||
<span class="direct-chat-name float-end">Sarah Bullock</span>
|
||||
<span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
|
||||
</div>
|
||||
<!-- /.direct-chat-infos -->
|
||||
<img class="direct-chat-img" src="./assets/img/AdminLTELogo.png" alt="message user image">
|
||||
<!-- /.direct-chat-img -->
|
||||
<div class="direct-chat-text">
|
||||
I would love to.
|
||||
</div>
|
||||
<!-- /.direct-chat-text -->
|
||||
</div>
|
||||
<!-- /.direct-chat-msg -->
|
||||
|
||||
</div>
|
||||
<!--/.direct-chat-messages-->
|
||||
|
||||
<!-- Contacts are loaded here -->
|
||||
<div class="direct-chat-contacts">
|
||||
<ul class="contacts-list">
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Count Dracula
|
||||
<small class="contacts-list-date float-end">2/28/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">How have you been? I was...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Sarah Doe
|
||||
<small class="contacts-list-date float-end">2/23/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">I will be waiting for...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Nadia Jolie
|
||||
<small class="contacts-list-date float-end">2/20/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">I'll call you back at...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Nora S. Vans
|
||||
<small class="contacts-list-date float-end">2/10/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Where is your new...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
John K.
|
||||
<small class="contacts-list-date float-end">1/27/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Can I take a look at...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
<li>
|
||||
<a href="#">
|
||||
<img class="contacts-list-img" src="./assets/img/AdminLTELogo.png" alt="User Avatar">
|
||||
|
||||
<div class="contacts-list-info">
|
||||
<span class="contacts-list-name">
|
||||
Kenneth M.
|
||||
<small class="contacts-list-date float-end">1/4/2015</small>
|
||||
</span>
|
||||
<span class="contacts-list-msg">Never mind I found...</span>
|
||||
</div>
|
||||
<!-- /.contacts-list-info -->
|
||||
</a>
|
||||
</li>
|
||||
<!-- End Contact Item -->
|
||||
</ul>
|
||||
<!-- /.contacts-list -->
|
||||
</div>
|
||||
<!-- /.direct-chat-pane -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
<form action="#" method="post">
|
||||
<div class="input-group">
|
||||
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
||||
<span class="input-group-append">
|
||||
<button type="button" class="btn btn-warning">Send</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!--/.direct-chat -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<div class="col-md-6">
|
||||
<!-- USERS LIST -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Latest Members</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<span class="badge bg-danger">8 New Members</span>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<ul class="users-list clearfix">
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Alexander Pierce</a>
|
||||
<span class="users-list-date">Today</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Norman</a>
|
||||
<span class="users-list-date">Yesterday</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Jane</a>
|
||||
<span class="users-list-date">12 Jan</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">John</a>
|
||||
<span class="users-list-date">12 Jan</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Alexander</a>
|
||||
<span class="users-list-date">13 Jan</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Sarah</a>
|
||||
<span class="users-list-date">14 Jan</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Nora</a>
|
||||
<span class="users-list-date">15 Jan</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="./assets/img/AdminLTELogo.png" alt="User Image">
|
||||
<a class="users-list-name" href="#">Nadia</a>
|
||||
<span class="users-list-date">15 Jan</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.users-list -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer text-center">
|
||||
<a href="javascript:">View All Users</a>
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- TABLE: LATEST ORDERS -->
|
||||
<div class="card">
|
||||
<div class="card-header border-transparent">
|
||||
<h3 class="card-title">Latest Orders</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table m-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order ID</th>
|
||||
<th>Item</th>
|
||||
<th>Status</th>
|
||||
<th>Popularity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR9842</a></td>
|
||||
<td>Call of Duty IV</td>
|
||||
<td><span class="badge bg-success">Shipped</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR1848</a></td>
|
||||
<td>Samsung Smart TV</td>
|
||||
<td><span class="badge bg-warning">Pending</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR7429</a></td>
|
||||
<td>iPhone 6 Plus</td>
|
||||
<td><span class="badge bg-danger">Delivered</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR7429</a></td>
|
||||
<td>Samsung Smart TV</td>
|
||||
<td><span class="badge bg-purple">Processing</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR1848</a></td>
|
||||
<td>Samsung Smart TV</td>
|
||||
<td><span class="badge bg-warning">Pending</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR7429</a></td>
|
||||
<td>iPhone 6 Plus</td>
|
||||
<td><span class="badge bg-danger">Delivered</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="pages/examples/invoice.html">OR9842</a></td>
|
||||
<td>Call of Duty IV</td>
|
||||
<td><span class="badge bg-success">Shipped</span></td>
|
||||
<td>
|
||||
<div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.table-responsive -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer clearfix">
|
||||
<a href="javascript:void(0)" class="btn btn-sm btn-primary float-start">Place New Order</a>
|
||||
<a href="javascript:void(0)" class="btn btn-sm btn-secondary float-end">View All Orders</a>
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<div class="col-md-4">
|
||||
<!-- Info Boxes Style 2 -->
|
||||
<div class="info-box mb-3 bg-warning">
|
||||
<span class="info-box-icon"><i class="fas fa-tag"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Inventory</span>
|
||||
<span class="info-box-number">5,200</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
<div class="info-box mb-3 bg-success">
|
||||
<span class="info-box-icon"><i class="far fa-heart"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Mentions</span>
|
||||
<span class="info-box-number">92,050</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
<div class="info-box mb-3 bg-danger">
|
||||
<span class="info-box-icon"><i class="fas fa-cloud-download-alt"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Downloads</span>
|
||||
<span class="info-box-number">114,381</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
<div class="info-box mb-3 bg-purple">
|
||||
<span class="info-box-icon"><i class="far fa-comment"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Direct Messages</span>
|
||||
<span class="info-box-number">163,921</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Browser Usage</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="chart-responsive">
|
||||
<canvas id="pieChart" height="150"></canvas>
|
||||
</div>
|
||||
<!-- ./chart-responsive -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-4">
|
||||
<ul class="chart-legend clearfix">
|
||||
<li><i class="far fa-circle text-danger"></i> Chrome</li>
|
||||
<li><i class="far fa-circle text-success"></i> IE</li>
|
||||
<li><i class="far fa-circle text-warning"></i> FireFox</li>
|
||||
<li><i class="far fa-circle text-info"></i> Safari</li>
|
||||
<li><i class="far fa-circle text-primary"></i> Opera</li>
|
||||
<li><i class="far fa-circle text-secondary"></i> Navigator</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer p-0">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
United States of America
|
||||
<span class="float-end text-danger">
|
||||
<i class="fas fa-arrow-down text-sm"></i>
|
||||
12%</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
India
|
||||
<span class="float-end text-success">
|
||||
<i class="fas fa-arrow-up text-sm"></i> 4%
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
China
|
||||
<span class="float-end text-purple">
|
||||
<i class="fas fa-arrow-left text-sm"></i> 0%
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<!-- PRODUCT LIST -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Recently Added Products</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-card-widget="collapse">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-card-widget="remove">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<ul class="products-list product-list-in-card ps-2 pe-2">
|
||||
<li class="item">
|
||||
<div class="product-img">
|
||||
<img src="./assets/img/AdminLTELogo.png " alt="Product Image" class="img-size-50">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<a href="javascript:void(0)" class="product-title">Samsung TV
|
||||
<span class="badge bg-warning float-end">$1800</span></a>
|
||||
<span class="product-description">
|
||||
Samsung 32" 1080p 60Hz LED Smart HDTV.
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- /.item -->
|
||||
<li class="item">
|
||||
<div class="product-img">
|
||||
<img src="./assets/img/AdminLTELogo.png " alt="Product Image" class="img-size-50">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<a href="javascript:void(0)" class="product-title">Bicycle
|
||||
<span class="badge bg-purple float-end">$700</span></a>
|
||||
<span class="product-description">
|
||||
26" Mongoose Dolomite Men's 7-speed, Navy Blue.
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- /.item -->
|
||||
<li class="item">
|
||||
<div class="product-img">
|
||||
<img src="./assets/img/AdminLTELogo.png " alt="Product Image" class="img-size-50">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<a href="javascript:void(0)" class="product-title">
|
||||
Xbox One <span class="badge bg-danger float-end">
|
||||
$350
|
||||
</span>
|
||||
</a>
|
||||
<span class="product-description">
|
||||
Xbox One Console Bundle with Halo Master Chief Collection.
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- /.item -->
|
||||
<li class="item">
|
||||
<div class="product-img">
|
||||
<img src="./assets/img/AdminLTELogo.png " alt="Product Image" class="img-size-50">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<a href="javascript:void(0)" class="product-title">PlayStation 4
|
||||
<span class="badge bg-success float-end">$399</span></a>
|
||||
<span class="product-description">
|
||||
PlayStation 4 500GB Console (PS4)
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- /.item -->
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer text-center">
|
||||
<a href="javascript:void(0)" class="uppercase">View All Products</a>
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -103,5 +821,10 @@
|
|||
@@include('./_scripts.html', {
|
||||
"path": "."
|
||||
})
|
||||
|
||||
<!-- ChartJS -->
|
||||
<script src="./vendor/chart.js/dist/chart.js"></script>
|
||||
<!-- AdminLTE dashboard2 demo (This is only for demo purposes) -->
|
||||
<script src="./assets/js/dashboard2.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -19,3 +19,6 @@
|
|||
<!-- For dark mode use @@path/css/dark/adminlte-dark-addon.css, do not remove dist/css/adminlte.css or if usinf RTL version do not remove @@path/css/rtl/adminlte.rtl.css-->
|
||||
<!-- ... and then the alternate CSS first as a snap-on for dark color scheme preference -->
|
||||
<!-- <link rel="stylesheet" href="@@path/css/dark/adminlte-dark-addon.css" media="(prefers-color-scheme: dark)""> -->
|
||||
|
||||
<!-- overlayScrollbars -->
|
||||
<link rel="stylesheet" href="@@path/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!-- REQUIRED SCRIPTS -->
|
||||
|
||||
<!-- Bootstrap 5 -->
|
||||
<script src="@@path/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="@@path/js/adminlte.js"></script>
|
||||
<!-- REQUIRED SCRIPTS -->
|
||||
<!-- overlayScrollbars -->
|
||||
<script src="@@path/vendor/overlayscrollbars/js/OverlayScrollbars.min.js"></script>
|
||||
<!-- Bootstrap 5 -->
|
||||
<script src="@@path/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="@@path/js/adminlte.js"></script>
|
||||
|
|
|
|||
|
|
@ -81,11 +81,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.border-right {
|
||||
.border-end {
|
||||
border-right: 1px solid $lte-card-border-color;
|
||||
}
|
||||
|
||||
.border-left {
|
||||
.border-start {
|
||||
border-left: 1px solid $lte-card-border-color;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,224 @@
|
|||
//
|
||||
// Component: Direct Chat
|
||||
//
|
||||
|
||||
.direct-chat {
|
||||
.card-body {
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.chat-pane-open {
|
||||
.direct-chat-contacts {
|
||||
@include translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.timestamp-light {
|
||||
.direct-chat-timestamp {
|
||||
color: tint-color(color-contrast($color-contrast-light), 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.timestamp-dark {
|
||||
.direct-chat-timestamp {
|
||||
color: shade-color(color-contrast($color-contrast-dark), 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-messages {
|
||||
@include translate(0, 0);
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.direct-chat-msg,
|
||||
.direct-chat-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.direct-chat-msg {
|
||||
@include clearfix ();
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.direct-chat-messages,
|
||||
.direct-chat-contacts {
|
||||
transition: transform .5s ease-in-out;
|
||||
}
|
||||
|
||||
.direct-chat-text {
|
||||
@if $enable-rounded {
|
||||
@include border-radius($border-radius-lg);
|
||||
}
|
||||
|
||||
background-color: $lte-direct-chat-default-msg-bg;
|
||||
border: 1px solid $lte-direct-chat-default-msg-border-color;
|
||||
color: $lte-direct-chat-default-font-color;
|
||||
margin: 5px 0 0 50px;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
|
||||
//Create the arrow
|
||||
&::after,
|
||||
&::before {
|
||||
border: solid transparent;
|
||||
border-right-color: $lte-direct-chat-default-msg-border-color;
|
||||
content: " ";
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 15px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-width: 5px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-width: 6px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.end & {
|
||||
margin-left: 0;
|
||||
margin-right: 50px;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-left-color: $lte-direct-chat-default-msg-border-color;
|
||||
border-right-color: transparent;
|
||||
left: 100%;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-img {
|
||||
@include border-radius(50%);
|
||||
float: left;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
|
||||
.end & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-infos {
|
||||
display: block;
|
||||
font-size: $font-size-sm;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.direct-chat-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.direct-chat-timestamp {
|
||||
color: shade-color($gray-500, 25%);
|
||||
}
|
||||
|
||||
//Direct chat contacts pane
|
||||
.direct-chat-contacts-open {
|
||||
.direct-chat-contacts {
|
||||
@include translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-contacts {
|
||||
@include translate(101%, 0);
|
||||
background-color: $dark;
|
||||
bottom: 0;
|
||||
color: $white;
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.direct-chat-contacts-light {
|
||||
background-color: $light;
|
||||
|
||||
.contacts-list-name {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.contacts-list-date {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.contacts-list-msg {
|
||||
color: shade-color($gray-600, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
//Contacts list -- for displaying contacts in direct chat contacts pane
|
||||
.contacts-list {
|
||||
@include list-unstyled ();
|
||||
|
||||
> li {
|
||||
@include clearfix ();
|
||||
border-bottom: 1px solid rgba($black, .2);
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contacts-list-img {
|
||||
@include border-radius(50%);
|
||||
float: left;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.contacts-list-info {
|
||||
color: $white;
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
.contacts-list-name,
|
||||
.contacts-list-status {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contacts-list-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contacts-list-status {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.contacts-list-date {
|
||||
color: $gray-400;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.contacts-list-msg {
|
||||
color: shade-color($gray-400, 10%);
|
||||
}
|
||||
|
||||
// Color variants
|
||||
@each $name, $color in $theme-colors {
|
||||
.direct-chat-#{$name} {
|
||||
@include direct-chat-variant($color);
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
.direct-chat-#{$name} {
|
||||
@include direct-chat-variant($color);
|
||||
}
|
||||
}
|
||||
|
|
@ -10,4 +10,5 @@
|
|||
@import "mixins/nav-treeview-light";
|
||||
@import "mixins/cards";
|
||||
@import "mixins/backgrounds";
|
||||
@import "mixins/direct-chat";
|
||||
@import "mixins/miscellaneous";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
//
|
||||
// Component: Products
|
||||
//
|
||||
|
||||
.products-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@include clearfix ();
|
||||
|
||||
@if $enable-rounded {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
background-color: $white;
|
||||
padding: 10px 0;
|
||||
|
||||
}
|
||||
|
||||
.product-img {
|
||||
float: left;
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
color: $gray-600;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.product-list-in-card > .item {
|
||||
@include border-radius(0);
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
//
|
||||
// Component: Users List
|
||||
//
|
||||
|
||||
.users-list {
|
||||
@include list-unstyled ();
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
|
||||
img {
|
||||
@include border-radius(50%);
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
> a:hover {
|
||||
&,
|
||||
.users-list-name {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.users-list-name,
|
||||
.users-list-date {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.users-list-name {
|
||||
color: $gray-700;
|
||||
font-size: $font-size-sm;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.users-list-date {
|
||||
color: shade-color($gray-500, 20%);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
// Custom AdminLTE Variables
|
||||
|
||||
// COLORS
|
||||
// --------------------------------------------------------
|
||||
$lte-gray-x-light: #d2d6de !default;
|
||||
|
||||
// Dynamic Variables
|
||||
// --------------------------------------------------------
|
||||
:root {
|
||||
|
|
@ -190,6 +194,12 @@ $lte-card-img-size: $lte-img-size-sm !default;
|
|||
// --------------------------------------------------------
|
||||
$lte-progress-bar-border-radius: 1px !default;
|
||||
|
||||
// DIRECT CHAT
|
||||
// --------------------------------------------------------
|
||||
$lte-direct-chat-default-msg-bg: $lte-gray-x-light !default;
|
||||
$lte-direct-chat-default-font-color: #444 !default;
|
||||
$lte-direct-chat-default-msg-border-color: $lte-gray-x-light !default;
|
||||
|
||||
// Z-INDEX
|
||||
// --------------------------------------------------------
|
||||
$lte-zindex-main-header: $zindex-fixed + 4 !default;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@
|
|||
// ---------------------------------------------------
|
||||
@import "mixins";
|
||||
|
||||
// AdiminLTE Parts
|
||||
// ---------------------------------------------------
|
||||
@import "parts/core";
|
||||
@import "parts/components";
|
||||
@import "parts/extra-components";
|
||||
|
|
|
|||
|
|
@ -383,7 +383,7 @@ $navbar-dark-brand-hover-color-alt: $navbar-dark-active-color-alt !def
|
|||
// Dropdown menu container and contents.
|
||||
|
||||
$dropdown-color-alt: $body-color-alt !default;
|
||||
$dropdown-bg-alt: $black-alt !default;
|
||||
$dropdown-bg-alt: $body-bg-alt !default;
|
||||
$dropdown-border-color-alt: rgba($white-alt, .15) !default;
|
||||
$dropdown-divider-bg-alt: $dropdown-border-color-alt !default;
|
||||
$dropdown-box-shadow-alt: $box-shadow-alt !default;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
//
|
||||
// Mixins: Direct Chat
|
||||
//
|
||||
|
||||
// Direct Chat Variant
|
||||
@mixin direct-chat-variant($bg-color, $color: $white) {
|
||||
.end > .direct-chat-text {
|
||||
background-color: $bg-color;
|
||||
border-color: $bg-color;
|
||||
color: color-contrast($bg-color);
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-left-color: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,9 +3,9 @@
|
|||
//
|
||||
|
||||
// ETC
|
||||
// @mixin translate($x, $y) {
|
||||
// transform: translate($x, $y);
|
||||
// }
|
||||
@mixin translate($x, $y) {
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
|
||||
// Different radius each side
|
||||
// @mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
|
||||
|
|
|
|||
|
|
@ -4,3 +4,6 @@
|
|||
|
||||
@import "../small-box";
|
||||
@import "../info-box";
|
||||
@import "../direct-chat";
|
||||
@import "../products";
|
||||
@import "../users-list";
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import {
|
|||
domReady
|
||||
} from './util/index'
|
||||
|
||||
import OverlayScrollbars from 'overlayscrollbars'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
|
|
@ -17,6 +19,13 @@ import {
|
|||
|
||||
const CLASS_NAME_RESIZE_ANIMATION_STOPPER = 'resize-animation-stopper'
|
||||
|
||||
const SELECTOR_SIDEBAR = '.sidebar'
|
||||
|
||||
const Default = {
|
||||
scrollbarTheme: 'os-theme-light',
|
||||
scrollbarAutoHide: 'leave'
|
||||
}
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
|
|
@ -38,6 +47,19 @@ class Layout {
|
|||
domReady(() => {
|
||||
const data = new Layout()
|
||||
data.holdTransition()
|
||||
|
||||
if (typeof OverlayScrollbars !== 'undefined') {
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line new-cap
|
||||
OverlayScrollbars(document.querySelectorAll(SELECTOR_SIDEBAR), {
|
||||
className: Default.scrollbarTheme,
|
||||
sizeAutoCapable: true,
|
||||
scrollbars: {
|
||||
autoHide: Default.scrollbarAutoHide,
|
||||
clickScrolling: true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
export default Layout
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue