From 8bbd4bad9481ee35e987f467f5d731337cc8b206 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 4 Jul 2022 14:19:06 +0430 Subject: [PATCH] Update to v2.0.1 --- .env | 1 + CHANGELOG.md | 142 +++-- Documentation/css/demo.css | 96 +-- Documentation/css/documentation.css | 317 +++++----- Documentation/tutorial-components.html | 6 +- README.md | 46 +- gulpfile.js | 6 +- package.json | 37 +- public/index.html | 4 +- src/assets/css/demo.css | 713 +++++++++++----------- src/components/FixedPlugin/FixedPlugin.js | 6 +- src/components/Footer/Footer.js | 4 +- src/components/Navbars/AdminNavbar.js | 4 +- src/components/Sidebar/Sidebar.js | 11 +- src/index.js | 13 +- src/layouts/Admin.js | 4 +- src/routes.js | 22 +- src/views/UserProfile.js | 9 +- 18 files changed, 751 insertions(+), 690 deletions(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 00000000..4f79a0f8 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +GENERATE_SOURCEMAP=false \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index f77e1b0f..c6c93954 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,20 +1,34 @@ # Change Log +## [2.0.1] 2022-07-04 + +- Update dependencies +- Migration to React 18 +- Migration to sass from node-sass + ## [2.0.0] 2021-01-21 + ### IMPORTANT + - We have updated this product from Bootstrap 3 to Bootstrap 4, so in essence, this is a new product - For this, we have followed the guidelines from [here](https://react-bootstrap.github.io/migrating/) and [here](https://getbootstrap.com/docs/4.0/migration/) - We also did not add Bootstrap variables as part of our styles (we will do so in one of our next updates, probably in version 3.0.0 when we'll add Bootstrap 5) + ### Bug fixing + - Renamed all files to `.js`, instead of `.jsx` - Refactor all files from class components to functional ones, so now, you can use React Hooks - https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/62 - https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/58 - https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/52 - https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/50 + ### Major style changes + - Since the update from Bootstrap 3 to Bootstrap 4, all styles have been changed + ### Deleted components + - src/components/Card/Card.jsx (we'll use the simple React Bootstrap tags instead) - src/components/CustomButton/CustomButton.jsx (we'll use the simple React Bootstrap tags instead) - src/components/CustomCheckbox/CustomCheckbox.jsx (we'll use the simple React Bootstrap tags instead) @@ -23,22 +37,29 @@ - src/components/StatsCard/StatsCard.jsx (we'll use the simple React Bootstrap tags instead) - src/components/Tasks/Tasks.jsx (we'll use the simple React Bootstrap tags instead) - src/components/UserCard/UserCard.jsx (we'll use the simple React Bootstrap tags instead) + ### Added components + ### Deleted dependencies + - react-notification-system (we'll use react-notification-alert from now on) - @types/googlemaps - @types/markerclustererplus - @types/react - react-google-maps (we'll use simple Google Maps API with Vanilla JS) - react-toggle (we'll use the simple React-Bootstrap Form.Check as a switch instead) + ### Added dependencies -+ react-notification-alert@0.0.13 (instead of the react-notification-system) -+ reactstrap@8.9.0 (as part of the react-notification-alert) -+ jquery@3.5.1 (since Bootstrap requires it) -+ @fortawesome/fontawesome-free@5.15.2 (For easier update of the package - instead of a link inside public/index.html) -+ gulp-append-prepend@1.0.8 (For Creative Tim licenses) -+ gulp@4.0.2 (For Creative Tim licenses) + +- react-notification-alert@0.0.13 (instead of the react-notification-system) +- reactstrap@8.9.0 (as part of the react-notification-alert) +- jquery@3.5.1 (since Bootstrap requires it) +- @fortawesome/fontawesome-free@5.15.2 (For easier update of the package - instead of a link inside public/index.html) +- gulp-append-prepend@1.0.8 (For Creative Tim licenses) +- gulp@4.0.2 (For Creative Tim licenses) + ### Updated dependencies + ``` bootstrap 3.3.7 → 4.6.0 node-sass 4.12.0 → 4.14.1 @@ -51,59 +72,75 @@ react-router-dom 5.0.0 → 5.2.0 react-scripts 3.0.0 → 4.0.1 typescript 3.4.3 → 4.1.3 ``` + ### Warning + **The TypeScript and jQuery dependencies are installed only to stop console warnings on install. They are not actually used in our product. So the product is not based on TypeScript or jQuery!** _The following warnings will appear when running the installation command, but they do not affect the UI or the functionality of the product (they will be solved in our next update):_ + ``` npm WARN react-chartist@0.14.3 requires a peer of react@^0.14.9 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself. npm WARN react-popper@1.3.7 requires a peer of react@0.14.x || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself. npm WARN create-react-context@0.3.0 requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself. ``` -_If they will persist in our 2.4.* version, we will drop their usages and replace them with other plugins._ -_In development mode, some of the above plugins will throw a warning because they still use React v16 syntax. If the error will persist in our 2.4.* version, we will drop their usage and replace them with other plugins._ + +_If they will persist in our 2.4.\* version, we will drop their usages and replace them with other plugins._ +_In development mode, some of the above plugins will throw a warning because they still use React v16 syntax. If the error will persist in our 2.4.\* version, we will drop their usage and replace them with other plugins._ + ### Upgrade details -* Updated all packages from `package.json` using `npm-upgrade`, link here: https://www.npmjs.com/package/npm-upgrade -* Renamed all `ControlLabel` components to `FormLabel` (this refers to the react-bootstrap components) -* Renamed all `Grid` components to `Container` (this refers to the react-bootstrap components) -* Rename all `HelpBlock` components to `FormText` -* Rename all `MenuItem` components to `Dropdown.Item` and `NavDropdown.Item` -* Rename all Panel components to Card -* Deleted variables folder -* Change the usage of `React Big Calendar` to the new API, so instead of + +- Updated all packages from `package.json` using `npm-upgrade`, link here: https://www.npmjs.com/package/npm-upgrade +- Renamed all `ControlLabel` components to `FormLabel` (this refers to the react-bootstrap components) +- Renamed all `Grid` components to `Container` (this refers to the react-bootstrap components) +- Rename all `HelpBlock` components to `FormText` +- Rename all `MenuItem` components to `Dropdown.Item` and `NavDropdown.Item` +- Rename all Panel components to Card +- Deleted variables folder +- Change the usage of `React Big Calendar` to the new API, so instead of + ``` import BigCalendar from "react-big-calendar"; ``` -* And + +- And + ``` const localizer = BigCalendar.momentLocalizer(moment); ``` -* We will have: + +- We will have: + ``` import { Calendar as BigCalendar, momentLocalizer } from "react-big-calendar"; ``` -* And + +- And + ``` const localizer = momentLocalizer(moment); ``` -* Change Panels with new react-bootstrap components -* For Col componets, replaced `size={number1} sizeOffest={number2}` with `size={{span: number1, offset: number2}}` where size can be `xs`, `sm`, `md`, `lg` -* Changed `bsStyle` to `variant` -* Changed `bsSize` to `size` -* Replace `` with `
` -* Replace `` with `
` -* Replace `` with `` -* Replace `` with `` and `` -* All required images have a default prop at the end now, example: `const us_flag = require("../assets/img/flags/US.png");` was changed to `const us_flag = require("../assets/img/flags/US.png").default;` -* Rename all .jsx files to .js -* Added Row and Col inside StatsCard -* Delete eventKey from NavDropdown components -* Deleted noCaret from NavDropdown components -* Replace Navbar fluid with Navbar → Container fluid -* Add fontawesome as dependencie instead of font link insde public/index.html, it is now imported insde src/index.js -* In addition to these changes, we’ve chaned the structure of the pages and components as well to match those from the HTML version of the product: https://www.creative-tim.com/product/light-bootstrap-dashboard + +- Change Panels with new react-bootstrap components +- For Col componets, replaced `size={number1} sizeOffest={number2}` with `size={{span: number1, offset: number2}}` where size can be `xs`, `sm`, `md`, `lg` +- Changed `bsStyle` to `variant` +- Changed `bsSize` to `size` +- Replace `` with `
` +- Replace `` with `
` +- Replace `` with `` +- Replace `` with `` and `` +- All required images have a default prop at the end now, example: `const us_flag = require("../assets/img/flags/US.png");` was changed to `const us_flag = require("../assets/img/flags/US.png");` +- Rename all .jsx files to .js +- Added Row and Col inside StatsCard +- Delete eventKey from NavDropdown components +- Deleted noCaret from NavDropdown components +- Replace Navbar fluid with Navbar → Container fluid +- Add fontawesome as dependencie instead of font link insde public/index.html, it is now imported insde src/index.js +- In addition to these changes, we’ve chaned the structure of the pages and components as well to match those from the HTML version of the product: https://www.creative-tim.com/product/light-bootstrap-dashboard ## [1.3.0] 2019-05-03 + ### Bug fixing + - Renamed `src/layouts/Dashboard/Dashboard.jsx` to `src/layouts/Admin.jsx` - Renamed `src/views/Dashboard/Dashboard.jsx` to `src/views/Dashboard.jsx` - Renamed `src/views/Dashboard/Dashboard.jsx` to `src/views/Icons.jsx` @@ -116,7 +153,7 @@ const localizer = momentLocalizer(moment); - Renamed `src/components/Header` to `src/components/Navbars` - Renamed `src/components/Navbars/Header.jsx` to `src/components/Navbars/AdminNavbar.jsx` - Renamed `src/components/Navbars/HeaderLinks.jsx` to `src/components/Navbars/AdminNavbarLinks.jsx` -- Changes caused by running [the prettier command](https://prettier.io/docs/en/install.html) for *.jsx*, *.js*, *.html* and *.css* files +- Changes caused by running [the prettier command](https://prettier.io/docs/en/install.html) for _.jsx_, _.js_, _.html_ and _.css_ files - Changed our buggy routing system, now it should work flawlessly, for more info, please refer to our [live docs here](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/documentation/routing-system) - Solved - https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/48 @@ -128,11 +165,15 @@ const localizer = momentLocalizer(moment); - https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/15 - Removed `.env` file and replaced it with `jsconfig.json` - Small bug fixes + ### Removed dependencies/components + - Deleted `src/routes/*` folder - node-sass-chokidar - npm-run-all + ### Added dependencies/components + - Added `src/routes.js` file (instead of the three files from `src/routes/*`) - @types/markerclustererplus@2.1.33 (to stop install warnings) - @types/googlemaps@3.30.19 (to stop install warnings) @@ -140,17 +181,21 @@ const localizer = momentLocalizer(moment); - typescript@3.4.3 (to stop install warnings) - react-router@5.0.0 (react-router-dom auto-installs this package, but it is better to have them both inside package.json) - react-toggle@4.0.2 + ### Update dependencies -- node-sass 4.6.1 → 4.12.0 -- react 16.2.0 → 16.8.6 -- react-bootstrap 0.32.1 → 0.32.4 -- react-chartist 0.13.1 → 0.13.3 -- react-dom 16.2.0 → 16.8.6 -- react-router-dom 4.2.2 → 5.0.0 -- react-scripts 1.1.1 → 3.0.0 + +- node-sass 4.6.1 → 4.12.0 +- react 16.2.0 → 16.8.6 +- react-bootstrap 0.32.1 → 0.32.4 +- react-chartist 0.13.1 → 0.13.3 +- react-dom 16.2.0 → 16.8.6 +- react-router-dom 4.2.2 → 5.0.0 +- react-scripts 1.1.1 → 3.0.0 ## [1.2.0] 2018-04-12 + ### Bug fixing + - Added `fluid` prop on `Grid` component in `Footer` - Moved all the contents of `elements` folder to `components` folder and delete it - Renamed `containers` folder to `layouts` @@ -158,14 +203,20 @@ const localizer = momentLocalizer(moment); - Renamed `src/routes/app.jsx` to `src/routes/dashboard.jsx` - Renamed `appRoutes` to `dashboardRoutes` - Added `src/routes/index.jsx` and made the routes in `src/index.js` dynamically based on `indexRoutes` from `src/routes/index.jsx` (users can now make new layouts and routes for them easier) + ### Removed dependencies/components + - `google-maps-react@1.1.0` - `react-router@4.1.2` + ### Added dependencies/components + - `node-sass@4.6.1` - `react-google-maps@9.4.5` (insted of `google-maps-react@1.1.0`) - `bootstrap@3.3.7` (and deleted `src/assets/bootstrap.min.css?v=3.3.5`) + ### Update dependencies + - `npm-run-all@4.1.1` to `npm-run-all@4.1.2` - `react@15.6.1` to `react@16.2.0` - `react-bootstrap@0.31.1` to `react-bootstrap@0.32.1` @@ -176,7 +227,9 @@ const localizer = momentLocalizer(moment); - `react-scripts@1.0.10` to `react-scripts@1.1.1` ## [1.1.0] 2017-10-30 + ### Bug fixing + - Changed property of `isChecked` in `CustomCheckbox` - Removed hover state for checkboxes and radios - Moved `NotificationSystem` outside of `.main-panel` (for responsive issues) @@ -185,8 +238,9 @@ const localizer = momentLocalizer(moment); - Added property `round` in `CustomButton` (for the button class `.btn-round`) - Added dynamic routes - ## [1.0.0] 2017-09-20 + ### Original Release + - Added React-Bootstrap as base framework - Added design from Light Bootstrap Dashboard by Creative Tim diff --git a/Documentation/css/demo.css b/Documentation/css/demo.css index adaae85d..64335772 100644 --- a/Documentation/css/demo.css +++ b/Documentation/css/demo.css @@ -1,11 +1,11 @@ /*! ========================================================= -* Light Bootstrap Dashboard React - v2.0.0 +* Light Bootstrap Dashboard React - v2.0.1 ========================================================= * Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react -* Copyright 2020 Creative Tim (https://www.creative-tim.com) +* Copyright 2022 Creative Tim (https://www.creative-tim.com) * Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md) * Coded by Creative Tim @@ -15,76 +15,76 @@ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ -@media (min-width: 992px){ - .typo-line{ - padding-left: 140px; - margin-bottom: 40px; - position: relative; - } +@media (min-width: 992px) { + .typo-line { + padding-left: 140px; + margin-bottom: 40px; + position: relative; + } - .typo-line .category{ - transform: translateY(-50%); - top: 50%; - left: 0px; - position: absolute; - } + .typo-line .category { + transform: translateY(-50%); + top: 50%; + left: 0px; + position: absolute; + } } .icon-section { - margin: 0 0 3em; - clear: both; - overflow: hidden; + margin: 0 0 3em; + clear: both; + overflow: hidden; } .icon-container { - width: 240px; - padding: .7em 0; - float: left; - position: relative; - text-align: left; + width: 240px; + padding: 0.7em 0; + float: left; + position: relative; + text-align: left; } .icon-container [class^="ti-"], .icon-container [class*=" ti-"] { - color: #000; - position: absolute; - margin-top: 3px; - transition: .3s; + color: #000; + position: absolute; + margin-top: 3px; + transition: 0.3s; } .icon-container:hover [class^="ti-"], .icon-container:hover [class*=" ti-"] { - font-size: 2.2em; - margin-top: -5px; + font-size: 2.2em; + margin-top: -5px; } .icon-container:hover .icon-name { - color: #000; + color: #000; } .icon-name { - color: #aaa; - margin-left: 35px; - font-size: .8em; - transition: .3s; + color: #aaa; + margin-left: 35px; + font-size: 0.8em; + transition: 0.3s; } .icon-container:hover .icon-name { - margin-left: 45px; + margin-left: 45px; } -.places-buttons .btn{ - margin-bottom: 30px +.places-buttons .btn { + margin-bottom: 30px; } -.sidebar .nav > li.active-pro{ - position: absolute; - width: 100%; - bottom: 10px; +.sidebar .nav > li.active-pro { + position: absolute; + width: 100%; + bottom: 10px; } -.sidebar .nav > li.active-pro a{ - background: rgba(255, 255, 255, 0.14); - opacity: 1; - color: #FFFFFF; +.sidebar .nav > li.active-pro a { + background: rgba(255, 255, 255, 0.14); + opacity: 1; + color: #ffffff; } .table-upgrade td:nth-child(2), -.table-upgrade td:nth-child(3){ - text-align: center; +.table-upgrade td:nth-child(3) { + text-align: center; } -body.nude{ - background-color: #f4f3ef; +body.nude { + background-color: #f4f3ef; } diff --git a/Documentation/css/documentation.css b/Documentation/css/documentation.css index 2b43f0a5..18ed8fe1 100644 --- a/Documentation/css/documentation.css +++ b/Documentation/css/documentation.css @@ -1,11 +1,11 @@ /*! ========================================================= -* Light Bootstrap Dashboard React - v2.0.0 +* Light Bootstrap Dashboard React - v2.0.1 ========================================================= * Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react -* Copyright 2020 Creative Tim (https://www.creative-tim.com) +* Copyright 2022 Creative Tim (https://www.creative-tim.com) * Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md) * Coded by Creative Tim @@ -15,62 +15,65 @@ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ -.tim-row{ - padding-top: 60px; -} -pre.prettyprint{ - background-color: #eee; - border: 0px; - margin-bottom: 0; - margin-top: 20px; - padding: 20px; - text-align: left; -} -.atv, .str{ - color: #05AE0E; -} -.tag, .pln, .kwd{ - color: #3472F7; -} -.atn{ - color: #2C93FF; -} -.pln{ - color: #333; -} -.com{ - color: #999; -} -.space-top{ - margin-top: 50px; -} -.btn-primary .caret{ - border-top-color: #3472F7; - color: #3472F7; -} -.area-line{ - border: 1px solid #999; - border-left: 0; - border-right: 0; - color: #666; - display: block; - margin-top: 20px; - padding: 8px 0; - text-align: center; -} -.area-line a{ - color: #666; -} -.container-fluid{ - padding-right: 15px; - padding-left: 15px; -} -.logo-container .logo{ - overflow: hidden; - border-radius: 50%; - border: 1px solid #333333; - width: 50px; - float: left; +.tim-row { + padding-top: 60px; +} +pre.prettyprint { + background-color: #eee; + border: 0px; + margin-bottom: 0; + margin-top: 20px; + padding: 20px; + text-align: left; +} +.atv, +.str { + color: #05ae0e; +} +.tag, +.pln, +.kwd { + color: #3472f7; +} +.atn { + color: #2c93ff; +} +.pln { + color: #333; +} +.com { + color: #999; +} +.space-top { + margin-top: 50px; +} +.btn-primary .caret { + border-top-color: #3472f7; + color: #3472f7; +} +.area-line { + border: 1px solid #999; + border-left: 0; + border-right: 0; + color: #666; + display: block; + margin-top: 20px; + padding: 8px 0; + text-align: center; +} +.area-line a { + color: #666; +} +.container-fluid { + padding-right: 15px; + padding-left: 15px; +} +.logo-container .logo { + overflow: hidden; + border-radius: 50%; + border: 1px solid #333333; + width: 50px; + float: left; } .header-wrapper { position: relative; @@ -78,91 +81,90 @@ pre.prettyprint{ } .header-wrapper .navbar { - border-radius: 0; - position: absolute; - width: 100%; - z-index: 3; + border-radius: 0; + position: absolute; + width: 100%; + z-index: 3; } .header-wrapper .header { - background-color: #ff8f5e; - background-position: center center; - background-size: cover; - height: 100%; - overflow: hidden; - position: absolute; - width: 100%; - z-index: 1; + background-color: #ff8f5e; + background-position: center center; + background-size: cover; + height: 100%; + overflow: hidden; + position: absolute; + width: 100%; + z-index: 1; } .header-wrapper .header .filter::after { - content: ""; - display: block; - height: 100%; - left: 0; - opacity: 0.77; - position: absolute; - top: 0; - width: 100%; - z-index: 2; -} -.header-wrapper .title-container{ - color: #fff; - position: relative; - top: 30%; - z-index: 3; - + content: ""; + display: block; + height: 100%; + left: 0; + opacity: 0.77; + position: absolute; + top: 0; + width: 100%; + z-index: 2; +} +.header-wrapper .title-container { + color: #fff; + position: relative; + top: 30%; + z-index: 3; } -.logo-container .brand{ - font-size: 18px; - color: #FFFFFF; - line-height: 20px; - float: left; - margin-left: 10px; - margin-top: 5px; - width: 50px; - height: 50px; +.logo-container .brand { + font-size: 18px; + color: #ffffff; + line-height: 20px; + float: left; + margin-left: 10px; + margin-top: 5px; + width: 50px; + height: 50px; } -.logo-container{ - margin-top: 10px; - margin-left: 15px; +.logo-container { + margin-top: 10px; + margin-left: 15px; } -.logo-container .logo img{ - width: 100%; +.logo-container .logo img { + width: 100%; } -.navbar-small .logo-container .brand{ - color: #333333; +.navbar-small .logo-container .brand { + color: #333333; } -.fixed-section{ - top: 90px; - max-height: 493px; - overflow: scroll; - border-bottom: 1px solid rgba(220,220,220, .6); +.fixed-section { + top: 90px; + max-height: 493px; + overflow: scroll; + border-bottom: 1px solid rgba(220, 220, 220, 0.6); } -.fixed-section ul{ - padding: 0; +.fixed-section ul { + padding: 0; } -.fixed-section.affix-top{ - margin-top: 90px; +.fixed-section.affix-top { + margin-top: 90px; } -.fixed-section ul li{ - list-style: none; +.fixed-section ul li { + list-style: none; } -.fixed-section li a{ - font-size: 14px; - padding: 2px; - display: block; - color: #666666; +.fixed-section li a { + font-size: 14px; + padding: 2px; + display: block; + color: #666666; } -.fixed-section li a.active{ - color: #00bbff; +.fixed-section li a.active { + color: #00bbff; } -.fixed-section.float{ - position: fixed; - top: 100px; - width: 200px; - margin-top: 0; +.fixed-section.float { + position: fixed; + top: 100px; + width: 200px; + margin-top: 0; } .copyright { color: #777777; @@ -173,48 +175,49 @@ pre.prettyprint{ text-align: center; } -.table-bigboy .img-container{ - width: 130px; - height: 85px; +.table-bigboy .img-container { + width: 130px; + height: 85px; } -.table-bigboy .td-name{ - min-width: 170px; +.table-bigboy .td-name { + min-width: 170px; } -#buttons-row .btn{ - margin-bottom: 15px; +#buttons-row .btn { + margin-bottom: 15px; } .navbar .navbar-nav > li > a.btn.btn-white, .navbar .navbar-nav > li > a.btn.btn-white:hover, -.navbar .navbar-nav > li > a.btn.btn-white:focus{ - color: #FFFFFF; +.navbar .navbar-nav > li > a.btn.btn-white:focus { + color: #ffffff; } -@media (min-width: 992px){ - .navbar { - min-height: 70px; - } +@media (min-width: 992px) { + .navbar { + min-height: 70px; + } } -.header-full{ - min-height: 100vh; - height: auto; - max-height: 999px; -} -.filter{ - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - width: 100%; - height: 100%; - z-index: 0; - +.header-full { + min-height: 100vh; + height: auto; + max-height: 999px; } -.filter:after{ - background: #1dc7ea; - background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #058faa 0%, #058faa 100%) repeat scroll 0 0 / 150% 150%; - height: 100% !important; +.filter { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: 0; +} +.filter:after { + background: #1dc7ea; + background: rgba(0, 0, 0, 0) + linear-gradient(to bottom, #058faa 0%, #058faa 100%) repeat scroll 0 0 / + 150% 150%; + height: 100% !important; } diff --git a/Documentation/tutorial-components.html b/Documentation/tutorial-components.html index 47ce0aa7..fd9326d2 100644 --- a/Documentation/tutorial-components.html +++ b/Documentation/tutorial-components.html @@ -2,11 +2,11 @@ /*! ========================================================= -* Light Bootstrap Dashboard React - v2.0.0 +* Light Bootstrap Dashboard React - v2.0.1 ========================================================= * Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react -* Copyright 2020 Creative Tim (https://www.creative-tim.com) +* Copyright 2022 Creative Tim (https://www.creative-tim.com) * Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md) * Coded by Creative Tim @@ -97,7 +97,7 @@
-
+

Light Bootstrap Dashboard React Free

diff --git a/README.md b/README.md index 298aef07..96c46b96 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,9 @@ # [Light Bootstrap Dashboard React](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/?ref=lbdr-readme) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fcreativetimofficial.github.io%2Flight-bootstrap-dashboard-react&text=Light%20Bootstrap%20Dashboard%20React%20-%20Free%20Bootstrap%20Admin%20Template&original_referer=https%3A%2F%2Fdemos.creative-tim.com%2Flight-bootstrap-dashboard-react%2F&via=creativetim&hashtags=react%2Cbootstrap%2Creact-bootstrap%2Ccreativetim%2Ccreative-tim) - - -![version](https://img.shields.io/badge/version-2.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/light-bootstrap-dashboard-react.svg?maxAge=2592000)]() [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/light-bootstrap-dashboard-react.svg?maxAge=2592000)]() [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy) +![version](https://img.shields.io/badge/version-2.0.1-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/light-bootstrap-dashboard-react.svg?maxAge=2592000)]() [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/light-bootstrap-dashboard-react.svg?maxAge=2592000)]() [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy) ![Product Gif](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/light-bootstrap-dashboard-react/light-bootstrap-dashboard-react.gif) - **[Light Bootstrap Dashboard React](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/?ref=lbdr-readme)** is an admin dashboard template designed to be beautiful and simple. It is built on top of [React Bootstrap](https://5c507d49471426000887a6a7--react-bootstrap.netlify.com/), using [Light Bootstrap Dashboard](https://www.creative-tim.com/product/light-bootstrap?ref=lbdr-readme) and it is fully responsive. It comes with a big collections of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS or CRM. The product represents a big suite of front-end developer tools that can help you jump start your project. We have created it thinking about things you actually need in a dashboard. Light Bootstrap Dashboard React contains multiple handpicked and optimized plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customization of this product. @@ -15,37 +12,34 @@ It comes with 6 filter colors for the sidebar (`black`, `azure`,`green`,`orange` ## Table of Contents -* [Versions](#versions) -* [Demo](#demo) -* [Quick Start](#quick-start) -* [Documentation](#documentation) -* [File Structure](#file-structure) -* [Browser Support](#browser-support) -* [Resources](#resources) -* [Reporting Issues](#reporting-issues) -* [Technical Support or Questions](#technical-support-or-questions) -* [Licensing](#licensing) -* [Useful Links](#useful-links) - +- [Versions](#versions) +- [Demo](#demo) +- [Quick Start](#quick-start) +- [Documentation](#documentation) +- [File Structure](#file-structure) +- [Browser Support](#browser-support) +- [Resources](#resources) +- [Reporting Issues](#reporting-issues) +- [Technical Support or Questions](#technical-support-or-questions) +- [Licensing](#licensing) +- [Useful Links](#useful-links) ## Versions [](https://www.creative-tim.com/product/light-bootstrap-dashboard?ref=lbdr-readme)[](https://www.creative-tim.com/product/light-bootstrap-dashboard-react?ref=lbdr-readme)[](https://www.creative-tim.com/product/vue-light-bootstrap-dashboard?ref=lbdr-readme)[](https://www.creative-tim.com/product/light-bootstrap-dashboard-angular2?ref=lbdr-readme) - -| HTML | React | Vue | Angular | -| --- | --- | --- | --- | +| HTML | React | Vue | Angular | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [![Light Bootstrap Dashboard HTML](https://github.com/creativetimofficial/public-assets/blob/master/light-bootstrap-dashboard/light-bootstrap-dashboard.jpg?raw=true)](https://www.creative-tim.com/product/light-bootstrap-dashboard?ref=lbdr-readme) | [![Light Bootstrap Dashboard React](https://github.com/creativetimofficial/public-assets/blob/master/light-bootstrap-dashboard-react/light-bootstrap-dashboard-react.jpg?raw=true)](https://www.creative-tim.com/product/light-bootstrap-dashboard-react?ref=lbdr-readme) | [![Vue Light Bootstrap Dashboard](https://github.com/creativetimofficial/public-assets/blob/master/vue-light-bootstrap-dashboard/vue-light-bootstrap-dashboard.jpg?raw=true)](https://www.creative-tim.com/product/vue-light-bootstrap-dashboard?ref=lbdr-readme) | [![Light Bootstrap Dashboard Angular](https://github.com/creativetimofficial/public-assets/blob/master/light-bootstrap-dashboard-angular/light-bootstrap-dashboard-angular.jpg?raw=true)](https://www.creative-tim.com/product/light-bootstrap-dashboard-angular2?ref=lbdr-readme) | ## Demo -| Dashboard | User Profile | Tables | Maps | -| --- | --- | --- | --- | --- | +| Dashboard | User Profile | Tables | Maps | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [![Start page](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/light-bootstrap-dashboard-react/dashboard-page.png)](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/dashboard?ref=lbdr-readme) | [![User profile page](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/light-bootstrap-dashboard-react/user-page.png)](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/user-page?ref=lbdr-readme) | [![Tables page ](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/light-bootstrap-dashboard-react/tables-page.png)](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/table-list?ref=lbdr-readme) | [![Notifications Page](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/light-bootstrap-dashboard-react/notifications-page.png)](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/notifications?ref=lbdr-readme) | [View More](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/dashboard?ref=lbdr-readme). - ## Quick start Quick start options: @@ -54,10 +48,9 @@ Quick start options: - [Download from Github](https://github.com/creativetimofficial/light-bootstrap-dashboard-react/archive/master.zip). - [Download from Creative Tim](https://www.creative-tim.com/product/light-bootstrap-dashboard-react?ref=lbdr-readme). - ## Documentation -The documentation for the Light Bootstrap Dashboard React is hosted at our [website](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/documentation/?ref=lbdr-readme). +The documentation for the Light Bootstrap Dashboard React is hosted at our [website](https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/documentation/?ref=lbdr-readme). ## File Structure @@ -139,8 +132,8 @@ At present, we officially aim to support the last two versions of the following - ## Resources + - Demo: https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/admin/dashboard?ref=lbdr-readme - Download Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react?ref=lbdr-readme - Documentation: https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/documentation/tutorial?ref=lbdr-readme @@ -149,6 +142,7 @@ At present, we officially aim to support the last two versions of the following - Issues: [Github Issues Page](https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues) ## Reporting Issues + We use GitHub Issues as the official bug tracker for the Light Bootstrap Dashboard React. Here are some advices for our users that want to report an issue: 1. Make sure that you are using the latest version of the Light Bootstrap Dashboard React. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/?ref=lbdr-readme). @@ -161,7 +155,7 @@ If you have questions or need help integrating the product please [contact us](h ## Licensing -- Copyright 2018 Creative Tim (https://www.creative-tim.com?ref=lbdr-readme) +- Copyright 2022 Creative Tim (https://www.creative-tim.com?ref=lbdr-readme) - Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md) ## Useful Links diff --git a/gulpfile.js b/gulpfile.js index d4755efc..65a4c06b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -9,7 +9,7 @@ gulp.task("licenses", async function () { gap.prependText(`/*! ========================================================= -* Light Bootstrap Dashboard React - v2.0.0 +* Light Bootstrap Dashboard React - v2.0.1 ========================================================= * Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react @@ -32,7 +32,7 @@ gulp.task("licenses", async function () { gap.prependText(`