Merge pull request #30 from DashboardPack/Bootstrap-5-update

Migrating to bootstrap v5

Changelog.md

@@ -7,4 +7,8 @@
 - Added mapbox-gl plugin
 - Alert Dismissing issue resolved
 - Card image issue resolved
-- Fontawesome icon issue resolved
+- Fontawesome icon issue resolved
+
+## Version 2.0.0 (07 Sep 2021)
+
+- Migrating to Bootstrap v5

README.md

@@ -1,4 +1,4 @@
-# ArchitectUI Bootstrap 4 jQuery/HTML Theme FREE
+# ArchitectUI Bootstrap 5 jQuery/HTML Theme FREE
 ## Made with love by DashboardPack.com
 
 ArchitectUI is a free HTML admin template based on Bootstrap. It is used by thousands of developerd to build SaaS and varios other admin panels for webapps. This version hosted on Github is for preview only. It has a limited functionality in comparison to [Pro version](https://dashboardpack.com/theme-details/architectui-dashboard-html-pro/) yet it comes with unlimited color schemes and flexibility unmatched to most other Premium admin dashboards. 
@@ -7,7 +7,7 @@ ArchitectUI is a free HTML admin template based on Bootstrap. It is used by thou
 
 ## Preview 
 
-![ArchitectUI Bootstrap 4 Free](https://colorlib.com/wp/wp-content/uploads/sites/2/architectui-html-free.jpg)
+![ArchitectUI Bootstrap 5 Free](https://colorlib.com/wp/wp-content/uploads/sites/2/architectui-html-free.jpg)
 ## Installation
 Download and uncompress the theme package archive in your desired folder location.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "architectui-html-free",
-  "version": "1.2.3",
-  "description": "ArchitectUI - Free Bootstrap 4 Admin Dashboard Template",
+  "version": "2.0.0",
+  "description": "ArchitectUI - Free Bootstrap 5 Admin Dashboard Template",
   "author": "DashboardPack.com",
   "homepage": "https://dashboardpack.com",
   "private": false,
@@ -54,10 +54,16 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.6.1",
+    "@fullcalendar/core": "^5.9.0",
+    "@fullcalendar/daygrid": "^5.9.0",
+    "@fullcalendar/interaction": "^5.9.0",
+    "@fullcalendar/list": "^5.9.0",
+    "@fullcalendar/timegrid": "^5.9.0",
+    "@popperjs/core": "^2.10.1",
     "animate.css": "^3.7.0",
-    "bootstrap": "^4.1.3",
+    "bootstrap": "^5.1.0",
     "chart.js": "^2.7.3",
-    "fullcalendar": "3.10.0",
+    "fullcalendar": "^5.9.0",
     "gmaps": "^0.4.24",
     "jquery": "^3.3.1",
     "mapbox-gl": "^2.2.0",

src/DemoPages/charts/chartjs.hbs

@@ -5,12 +5,12 @@
             {{> AppMain/page-title }}
             <ul class="body-tabs body-tabs-layout tabs-animated body-tabs-animated nav">
                 <li class="nav-item">
-                    <a role="tab" class="nav-link active" id="tab-0" data-toggle="tab" href="#tab-content-0">
+                    <a role="tab" class="nav-link active" id="tab-0" data-bs-toggle="tab" href="#tab-content-0">
                         <span>Circular Charts</span>
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a role="tab" class="nav-link" id="tab-1" data-toggle="tab" href="#tab-content-1">
+                    <a role="tab" class="nav-link" id="tab-1" data-bs-toggle="tab" href="#tab-content-1">
                         <span>Lines & Bars Charts</span>
                     </a>
                 </li>

src/DemoPages/components/accordions.hbs

@@ -19,19 +19,19 @@
                                         sagittis elit leo id nisi.</p></div>
                             </div>
                             <div class="card-footer">
-                                <button type="button" data-toggle="collapse" href="#collapseExample123" class="btn btn-primary">Toggle</button>
+                                <button type="button" data-bs-toggle="collapse" href="#collapseExample123" class="btn btn-primary">Toggle</button>
                             </div>
                         </div>
                         <div class="main-card mb-3 card">
                             <div class="card-body"><h5 class="card-title">Simple</h5>
                                 <div id="exampleAccordion" data-children=".item">
                                     <div class="item">
-                                        <button type="button" aria-expanded="true" aria-controls="exampleAccordion1" data-toggle="collapse" href="#collapseExample" class="m-0 p-0 btn btn-link">Toggle item</button>
+                                        <button type="button" aria-expanded="true" aria-controls="exampleAccordion1" data-bs-toggle="collapse" href="#collapseExample" class="m-0 p-0 btn btn-link">Toggle item</button>
                                         <div data-parent="#exampleAccordion" id="collapseExample" class="collapse show"><p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a
                                             vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.</p></div>
                                     </div>
                                     <div class="item">
-                                        <button type="button" aria-expanded="false" aria-controls="exampleAccordion2" data-toggle="collapse" href="#collapseExample2" class="m-0 p-0 btn btn-link">Toggle item 2</button>
+                                        <button type="button" aria-expanded="false" aria-controls="exampleAccordion2" data-bs-toggle="collapse" href="#collapseExample2" class="m-0 p-0 btn btn-link">Toggle item 2</button>
                                         <div data-parent="#exampleAccordion" id="collapseExample2" class="collapse"><p class="mb-3">Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique
                                             senectus
                                             et netus et malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div>
@@ -44,9 +44,11 @@
                         <div id="accordion" class="accordion-wrapper mb-3">
                             <div class="card">
                                 <div id="headingOne" class="card-header">
-                                    <button type="button" data-toggle="collapse" data-target="#collapseOne1" aria-expanded="true" aria-controls="collapseOne" class="text-left m-0 p-0 btn btn-link btn-block">
-                                        <h5 class="m-0 p-0">Collapsible Group Item #1</h5>
-                                    </button>
+                                    <div class="d-grid">
+                                        <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne1" aria-expanded="true" aria-controls="collapseOne" class="text-start m-0 p-0 btn btn-link">
+                                            <h5 class="m-0 p-0">Collapsible Group Item #1</h5>
+                                        </button>
+                                    </div>
                                 </div>
                                 <div data-parent="#accordion" id="collapseOne1" aria-labelledby="headingOne" class="collapse show">
                                     <div class="card-body">1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
@@ -59,8 +61,12 @@
                             </div>
                             <div class="card">
                                 <div id="headingTwo" class="b-radius-0 card-header">
-                                    <button type="button" data-toggle="collapse" data-target="#collapseOne2" aria-expanded="false" aria-controls="collapseTwo" class="text-left m-0 p-0 btn btn-link btn-block"><h5 class="m-0 p-0">Collapsible Group Item
-                                        #2</h5></button>
+                                    <div class="d-grid">
+                                        <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="false" aria-controls="collapseTwo" class="text-start m-0 p-0 btn btn-link">
+                                            <h5 class="m-0 p-0">Collapsible Group Item
+                                            #2</h5>
+                                        </button>   
+                                    </div>
                                 </div>
                                 <div data-parent="#accordion" id="collapseOne2" class="collapse">
                                     <div class="card-body">2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
@@ -73,8 +79,11 @@
                             </div>
                             <div class="card">
                                 <div id="headingThree" class="card-header">
-                                    <button type="button" data-toggle="collapse" data-target="#collapseOne3" aria-expanded="false" aria-controls="collapseThree" class="text-left m-0 p-0 btn btn-link btn-block"><h5 class="m-0 p-0">Collapsible Group
-                                        Item #3</h5></button>
+                                    <div class="d-grid">
+                                        <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne3" aria-expanded="false" aria-controls="collapseThree" class="text-start m-0 p-0 btn btn-link"><h5 class="m-0 p-0">Collapsible Group
+                                            Item #3</h5>
+                                        </button>
+                                    </div>
                                 </div>
                                 <div data-parent="#accordion" id="collapseOne3" class="collapse">
                                     <div class="card-body">3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa

src/DemoPages/components/calendar.hbs

@@ -5,20 +5,10 @@
             {{> AppMain/page-title }}
             <ul class="body-tabs body-tabs-layout tabs-animated body-tabs-animated nav">
                 <li class="nav-item">
-                    <a role="tab" class="nav-link active" id="tab-0" data-toggle="tab" href="#tab-content-0">
+                    <a role="tab" class="nav-link active" id="tab-0" data-bs-toggle="tab" href="#tab-content-0">
                         <span>Basic Calendar</span>
                     </a>
                 </li>
-                <li class="nav-item">
-                    <a role="tab" class="nav-link" id="tab-1" data-toggle="tab" href="#tab-content-1">
-                        <span>List View</span>
-                    </a>
-                </li>
-                <li class="nav-item">
-                    <a role="tab" class="nav-link" id="tab-2" data-toggle="tab" href="#tab-content-2">
-                        <span>Background Events</span>
-                    </a>
-                </li>
             </ul>
             <div class="tab-content">
                 <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
@@ -28,20 +18,6 @@
                         </div>
                     </div>
                 </div>
-                <div class="tab-pane tabs-animation fade" id="tab-content-1" role="tabpanel">
-                    <div class="main-card mb-3 card">
-                        <div class="card-body">
-                            <div id='calendar-list'></div>
-                        </div>
-                    </div>
-                </div>
-                <div class="tab-pane tabs-animation fade" id="tab-content-2" role="tabpanel">
-                    <div class="main-card mb-3 card">
-                        <div class="card-body">
-                            <div id="calendar-bg-events"></div>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
         {{> AppFooter/footer }}

src/DemoPages/components/carousel.hbs

@@ -7,8 +7,8 @@
                 <div class="col-md-6">
                     <div class="main-card mb-3 card">
                         <div class="card-body">
-                            <h5 class="card-title">Basic Bootstrap 4 Carousel</h5>
-                            <div id="carouselExampleControls1" class="carousel slide" data-ride="carousel">
+                            <h5 class="card-title">Basic Bootstrap 5 Carousel</h5>
+                            <div id="carouselExampleControls1" class="carousel slide" data-bs-ride="carousel">
                                 <div class="carousel-inner">
                                     <div class="carousel-item active">
                                         <img class="d-block w-100" src="https://via.placeholder.com/800x400" alt="First slide">
@@ -20,13 +20,13 @@
                                         <img class="d-block w-100" src="https://via.placeholder.com/800x400" alt="Third slide">
                                     </div>
                                 </div>
-                                <a class="carousel-control-prev" href="#carouselExampleControls1" role="button" data-slide="prev">
+                                <a class="carousel-control-prev" data-bs-target="#carouselExampleControls1" role="button" data-bs-slide="prev">
                                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                                    <span class="sr-only">Previous</span>
+                                    <span class="visually-hidden">Previous</span>
                                 </a>
-                                <a class="carousel-control-next" href="#carouselExampleControls1" role="button" data-slide="next">
+                                <a class="carousel-control-next" data-bs-target="#carouselExampleControls1" role="button" data-bs-slide="next">
                                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                                    <span class="sr-only">Next</span>
+                                    <span class="visually-hidden">Next</span>
                                 </a>
                             </div>
                         </div>
@@ -36,7 +36,7 @@
                     <div class="main-card mb-3 card">
                         <div class="card-body">
                             <h5 class="card-title">Carousel with Captions</h5>
-                            <div id="carouselExampleControls2" class="carousel slide carousel-fade" data-ride="carousel">
+                            <div id="carouselExampleControls2" class="carousel slide carousel-fade" data-bs-ride="carousel">
                                 <div class="carousel-inner">
                                     <div class="carousel-item active">
                                         <img class="d-block w-100" src="https://via.placeholder.com/800x400" alt="First slide">
@@ -60,13 +60,13 @@
                                         </div>
                                     </div>
                                 </div>
-                                <a class="carousel-control-prev" href="#carouselExampleControls2" role="button" data-slide="prev">
+                                <a class="carousel-control-prev" data-bs-target="#carouselExampleControls2" role="button" data-bs-slide="prev">
                                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                                    <span class="sr-only">Previous</span>
+                                    <span class="visually-hidden">Previous</span>
                                 </a>
-                                <a class="carousel-control-next" href="#carouselExampleControls2" role="button" data-slide="next">
+                                <a class="carousel-control-next" data-bs-target="#carouselExampleControls2" role="button" data-bs-slide="next">
                                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                                    <span class="sr-only">Next</span>
+                                    <span class="visually-hidden">Next</span>
                                 </a>
                             </div>
                         </div>