Merge pull request #261 from puikinsh/Bootstrap5-Update

Bootstrap5 update

CHANGELOG.md

@@ -6,4 +6,8 @@
 
 #### 1.1.0
 
-- Upgrade to webpack 5
+- Upgrade to webpack 5
+
+#### 2.0.0
+
+- Upgrade to Bootstrap 5

README.md

@@ -1,5 +1,5 @@
 # Adminator HTML5 Admin Template
-**Adminator** is a responsive Bootstrap 4 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets. Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
+**Adminator** is a responsive Bootstrap 5 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets. Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
 
 # Preview
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminator",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "private": true,
   "description": "HTML Admin Template",
   "scripts": {
@@ -20,6 +20,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
     "@babel/plugin-transform-runtime": "^7.13.9",
     "@babel/runtime": "^7.13.9",
+    "@popperjs/core": "^2.9.2",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.2.2",
     "babel-preset-env": "^1.7.0",
@@ -30,16 +31,16 @@
     "css-loader": "^5.2.6",
     "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-import": "^2.23.4",
     "extract-text-webpack-plugin": "^3.0.2",
     "html-webpack-plugin": "^5.3.1",
     "imagemin-webpack-plugin": "^2.4.2",
     "mini-css-extract-plugin": "^1.6.0",
     "node-sass": "^4.14.1",
-    "postcss": "^8.3.0",
-    "postcss-loader": "^5.3.0",
+    "postcss": "^8.3.4",
+    "postcss-loader": "^6.1.0",
     "postcss-preset-env": "^6.7.0",
-    "sass-loader": "^11.1.1",
+    "sass-loader": "^12.1.0",
     "shx": "^0.3.3",
     "style-loader": "^2.0.0",
     "stylelint": "^13.13.1",
@@ -50,30 +51,28 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
-    "@fullcalendar/core": "^5.7.0",
-    "@fullcalendar/daygrid": "^5.7.0",
-    "@fullcalendar/interaction": "^5.7.0",
-    "@fullcalendar/list": "^5.7.0",
-    "@fullcalendar/timegrid": "^5.7.0",
-    "@popperjs/core": "^2.9.2",
+    "@fullcalendar/core": "^5.7.2",
+    "@fullcalendar/daygrid": "^5.7.2",
+    "@fullcalendar/interaction": "^5.7.2",
+    "@fullcalendar/list": "^5.7.2",
+    "@fullcalendar/timegrid": "^5.7.2",
     "babel-polyfill": "^6.26.0",
-    "bootstrap": "^4.6.0",
+    "bootstrap": "^5.0.1",
     "bootstrap-datepicker": "^1.9.0",
     "brand-colors": "^2.1.1",
     "chart.js": "^2.9.4",
     "datatables": "^1.10.18",
     "easy-pie-chart": "^2.1.7",
     "file-loader": "^6.2.0",
-    "fullcalendar": "^5.7.0",
+    "fullcalendar": "^5.7.2",
     "jquery": "^3.6.0",
     "jquery-sparkline": "^2.4.0",
     "jvectormap": "^2.0.4",
     "load-google-maps-api": "^2.0.2",
     "lodash": "^4.17.21",
     "masonry-layout": "^4.2.2",
     "moment": "^2.29.1",
-    "perfect-scrollbar": "^1.5.0",
-    "popper.js": "^1.16.1",
+    "perfect-scrollbar": "^1.5.1",
     "skycons": "^1.0.0"
   }
 }

src/assets/scripts/fullcalendar/index.js

@@ -1,4 +1,3 @@
-import * as $ from 'jquery';
 import { Calendar } from '@fullcalendar/core';
 import interactionPlugin from '@fullcalendar/interaction';
 import dayGridPlugin from '@fullcalendar/daygrid';

src/assets/scripts/index.js

@@ -1,5 +1,8 @@
-import '../styles/index.scss';
+// import "@popperjs/core";
+import bootstrap from 'bootstrap';
 
+import '../styles/index.scss';
+import './fullcalendar';
 import './masonry';
 import './charts';
 import './popover';
@@ -12,6 +15,5 @@ import './chat';
 import './datatable';
 import './datepicker';
 import './email';
-import './fullcalendar';
 import './googleMaps';
 import './utils';

src/assets/scripts/popover/index.js

@@ -1,16 +1,22 @@
-import * as $ from 'jquery';
-import 'bootstrap';
+// import * as $ from 'jquery';
+import * as bootstrap from 'bootstrap'
 
 export default (function () {
   // ------------------------------------------------------
   // @Popover
   // ------------------------------------------------------
 
-  $('[data-toggle="popover"]').popover();
+  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+  return new bootstrap.Popover(popoverTriggerEl)
+})
 
   // ------------------------------------------------------
   // @Tooltips
   // ------------------------------------------------------
 
-  $('[data-toggle="tooltip"]').tooltip();
+  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+  return new bootstrap.Tooltip(tooltipTriggerEl)
+})
 }());

src/assets/styles/spec/components/topbar.scss

@@ -93,10 +93,10 @@
     }
 
     .dropdown-menu {
-      display: block;
+      // display: block;
       margin: 0;
       transform-origin: top right;
-      transform: scale(0, 0);
+      // transform: scale(0, 0);
       transition: transform 0.15s ease-out;
 
       .divider {

src/assets/styles/spec/generic/base.scss

@@ -4,6 +4,7 @@ html, html a, body {
 
 a {
   transition: all 0.3s ease-in-out;
+  text-decoration: none;
 }
 
 body {
@@ -77,3 +78,20 @@ a {
 hr {
   border-top: 1px solid $border-color;
 }
+
+
+a.btn {
+    color:#fff;
+  }
+
+a.btn:hover {
+  color:#fff;
+}
+
+.btn-color {
+  color:#fff;
+}
+
+.btn-color:hover {
+  color:#fff;
+}

src/basic-table.html

@@ -312,7 +312,7 @@ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -385,7 +385,7 @@ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -466,13 +466,13 @@ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
                   </li>
                   <li class="pX-20 pY-15 ta-c bdT">
                     <span>
-                      <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
+                      <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right ms-10"></i></a>
                     </span>
                   </li>
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
@@ -521,7 +521,7 @@ <h4 class="c-grey-900 mT-10 mB-30">Basic Tables</h4>
                 <div class="col-md-12">
                   <div class="bgc-white bd bdrs-3 p-20 mB-20">
                     <h4 class="c-grey-900 mB-20">Simple Table</h4>
-                    <p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 4</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
+                    <p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 5</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
                     <table class="table">
                       <thead>
                         <tr>
@@ -559,9 +559,9 @@ <h4 class="c-grey-900 mB-20">Simple Table</h4>
                 <div class="col-md-12">
                   <div class="bgc-white bd bdrs-3 p-20 mB-20">
                     <h4 class="c-grey-900 mB-20">Table head options</h4>
-                    <p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.thead-light</code> or <code class="highlighter-rouge">.thead-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
+                    <p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.table-light</code> or <code class="highlighter-rouge">.table-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
                     <table class="table">
-                      <thead class="thead-dark">
+                      <thead class="table-dark">
                         <tr>
                           <th scope="col">#</th>
                           <th scope="col">First Name</th>
@@ -717,7 +717,7 @@ <h4 class="c-grey-900 mB-20">Hoverable rows</h4>
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/blank.html

@@ -176,7 +176,7 @@ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
                 <span class="title">Forms</span>
               </a>
             </li>
-            <li class="nav-item dropdown">
+            <li class="nav-item">
               <a class="sidebar-link" href="ui.html">
                 <span class="icon-holder">
                     <i class="c-pink-500 ti-palette"></i>
@@ -312,11 +312,11 @@ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                   <i class="ti-bell"></i>
                 </a>
 
-                <ul class="dropdown-menu">
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                   <li class="pX-20 pY-15 bdB">
                     <i class="ti-bell pR-10"></i>
                     <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
@@ -385,11 +385,11 @@ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                   <i class="ti-email"></i>
                 </a>
 
-                <ul class="dropdown-menu">
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                   <li class="pX-20 pY-15 bdB">
                     <i class="ti-email pR-10"></i>
                     <span class="fsz-sm fw-600 c-grey-900">Emails</span>
@@ -472,15 +472,15 @@ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                   <div class="peer mR-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
                   <div class="peer">
                     <span class="fsz-sm c-grey-900">John Doe</span>
                   </div>
                 </a>
-                <ul class="dropdown-menu fsz-sm">
+                <ul class="dropdown-menu fsz-sm" aria-labelledby="dropdownMenuLink">
                   <li>
                     <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
                       <i class="ti-settings mR-10"></i>
@@ -524,7 +524,7 @@ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>

src/buttons.html

@@ -262,7 +262,7 @@ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
             <ul class="nav-right">
               <li class="notifications dropdown">
                 <span class="counter bgc-red">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-bell"></i>
                 </a>
 
@@ -335,7 +335,7 @@ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
               </li>
               <li class="notifications dropdown">
                 <span class="counter bgc-blue">3</span>
-                <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+                <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
                   <i class="ti-email"></i>
                 </a>
 
@@ -422,8 +422,8 @@ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
                 </ul>
               </li>
               <li class="dropdown">
-                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
-                  <div class="peer mR-10">
+                <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
+                  <div class="peer me-10">
                     <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
                   </div>
                   <div class="peer">
@@ -469,7 +469,7 @@ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
 
         <!-- ### $App Screen Footer ### -->
         <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
-          <span>Copyright © 2019 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
+          <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
         </footer>
       </div>
     </div>