refactor: update example views

Author: mrholek

src/pug/views/index.pug

@@ -21,10 +21,10 @@ block view
         .card-body.pb-0.d-flex.justify-content-between.align-items-start
           div
             .fs-4.fw-semibold 26K 
-              span.fs-6.fw-normal (
+              span.fs-6.fw-normal (-12.4%
                 svg.icon
                   use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-bottom")
-                | 12.4%)
+                | )
             div Users
           .dropdown
             button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
@@ -43,10 +43,10 @@ block view
         .card-body.pb-0.d-flex.justify-content-between.align-items-start
           div
             .fs-4.fw-semibold $6.200 
-              span.fs-6.fw-normal (
+              span.fs-6.fw-normal (40.9%
                 svg.icon
                   use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-top")
-                | 40.9%)
+                | )
             div Income
           .dropdown
             button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
@@ -64,10 +64,10 @@ block view
         .card-body.pb-0.d-flex.justify-content-between.align-items-start
           div
             .fs-4.fw-semibold 2.49% 
-              span.fs-6.fw-normal (
+              span.fs-6.fw-normal (84.7%
                 svg.icon
                   use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-top")
-                | 84.7%)
+                | )
             div Conversion Rate
           .dropdown
             button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
@@ -85,10 +85,10 @@ block view
         .card-body.pb-0.d-flex.justify-content-between.align-items-start
           div
             .fs-4.fw-semibold 44K 
-              span.fs-6.fw-normal (
+              span.fs-6.fw-normal (-23.6%
                 svg.icon
                   use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-bottom")
-                | 23.6%)
+                | )
             div Sessions
           .dropdown
             button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')

src/pug/views/widgets.pug

@@ -24,10 +24,10 @@ block view
               .card-body.pb-0.d-flex.justify-content-between.align-items-start
                 div
                   .fs-4.fw-semibold 26K 
-                    span.fs-6.fw-normal (
+                    span.fs-6.fw-normal (-12.4%
                       svg.icon
                         use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-bottom")
-                      | 12.4%)
+                      | )
                   div Users
                 .dropdown
                   button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
@@ -46,10 +46,10 @@ block view
               .card-body.pb-0.d-flex.justify-content-between.align-items-start
                 div
                   .fs-4.fw-semibold $6.200 
-                    span.fs-6.fw-normal (
+                    span.fs-6.fw-normal (40.9%
                       svg.icon
                         use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-top")
-                      | 40.9%)
+                      | )
                   div Income
                 .dropdown
                   button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
@@ -67,10 +67,10 @@ block view
               .card-body.pb-0.d-flex.justify-content-between.align-items-start
                 div
                   .fs-4.fw-semibold 2.49% 
-                    span.fs-6.fw-normal (
+                    span.fs-6.fw-normal (84.7%
                       svg.icon
                         use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-top")
-                      | 84.7%)
+                      | )
                   div Conversion Rate
                 .dropdown
                   button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
@@ -88,10 +88,10 @@ block view
               .card-body.pb-0.d-flex.justify-content-between.align-items-start
                 div
                   .fs-4.fw-semibold 44K 
-                    span.fs-6.fw-normal (
+                    span.fs-6.fw-normal (-23.6%
                       svg.icon
                         use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-bottom")
-                      | 23.6%)
+                      | )
                   div Sessions
                 .dropdown
                   button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
@@ -103,8 +103,6 @@ block view
                     a.dropdown-item(href='#') Something else here
               .c-chart-wrapper.mt-3.mx-3(style='height:70px;')
                 canvas#card-chart4.chart(height='70')
-          // /.col
-        // /.row
       +example() 
         .row
           .col-sm-6.col-lg-3

src/views/404.html

@@ -36,6 +36,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css">
     <link rel="stylesheet" href="node_modules/simplebar/dist/simplebar.css">
+    <link rel="stylesheet" href="css/vendors/simplebar.css">
     <!-- Main styles for this application-->
     <link href="css/style.css" rel="stylesheet">
     <!-- Global site tag (gtag.js) - Google Analytics-->

src/views/500.html

@@ -36,6 +36,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css">
     <link rel="stylesheet" href="node_modules/simplebar/dist/simplebar.css">
+    <link rel="stylesheet" href="css/vendors/simplebar.css">
     <!-- Main styles for this application-->
     <link href="css/style.css" rel="stylesheet">
     <!-- Global site tag (gtag.js) - Google Analytics-->

src/views/base/accordion.html

@@ -37,6 +37,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css">
     <link rel="stylesheet" href="node_modules/simplebar/dist/simplebar.css">
+    <link rel="stylesheet" href="css/vendors/simplebar.css">
     <!-- Main styles for this application-->
     <link href="css/style.css" rel="stylesheet">
     <!-- Global site tag (gtag.js) - Google Analytics-->
@@ -178,10 +179,10 @@
                 </svg> Error 500</a></li>
           </ul>
         </li>
-        <li class="nav-item"><a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
+        <li class="nav-item mt-auto"><a class="nav-link" href="docs.html">
             <svg class="nav-icon">
-              <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-cloud-download"></use>
-            </svg> Download CoreUI</a></li>
+              <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-description"></use>
+            </svg> Docs</a></li>
         <li class="nav-item"><a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
             <svg class="nav-icon">
               <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-layers"></use>
@@ -193,7 +194,7 @@
     <div class="wrapper d-flex flex-column min-vh-100 bg-light">
       <header class="header header-sticky mb-4">
         <div class="container-fluid">
-          <button class="header-toggler px-md-0 me-md-3 d-xxl-none" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
+          <button class="header-toggler px-md-0 me-md-3" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
             <svg class="icon icon-lg">
               <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-menu"></use>
             </svg>
@@ -296,17 +297,17 @@
                   <p class="text-medium-emphasis small">Click the accordions below to expand/collapse the accordion content.</p>
                   <div class="example">
                     <ul class="nav nav-tabs" role="tablist">
-                      <li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1071" role="tab">
+                      <li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-810" role="tab">
                           <svg class="icon me-2">
                             <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
                           </svg>Preview</a></li>
-                      <li class="nav-item"><a class="nav-link" data-coreui-toggle="tab" href="#code-1071" role="tab">
+                      <li class="nav-item"><a class="nav-link" data-coreui-toggle="tab" href="#code-810" role="tab">
                           <svg class="icon me-2">
                             <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
                           </svg>Code</a></li>
                     </ul>
                     <div class="tab-content rounded-bottom">
-                      <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1071">
+                      <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-810">
                         <div class="accordion" id="accordionExample">
                           <div class="accordion-item">
                             <h2 class="accordion-header" id="headingOne">
@@ -334,7 +335,7 @@ <h2 class="accordion-header" id="headingThree">
                           </div>
                         </div>
                       </div>
-                      <div class="tab-pane pt-1" role="tabpanel" id="code-1071">
+                      <div class="tab-pane pt-1" role="tabpanel" id="code-810">
                         <script class="language-markup" type="text/plain">
                           <div class="accordion" id="accordionExample">
                             <div class="accordion-item">
@@ -376,17 +377,17 @@ <h2 class="accordion-header" id="headingThree">
                   <p class="text-medium-emphasis small">Add <code>.accordion-flush</code> to remove the default <code>background-color</code>, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>
                   <div class="example">
                     <ul class="nav nav-tabs" role="tablist">
-                      <li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1075" role="tab">
+                      <li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-1046" role="tab">
                           <svg class="icon me-2">
                             <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
                           </svg>Preview</a></li>
-                      <li class="nav-item"><a class="nav-link" data-coreui-toggle="tab" href="#code-1075" role="tab">
+                      <li class="nav-item"><a class="nav-link" data-coreui-toggle="tab" href="#code-1046" role="tab">
                           <svg class="icon me-2">
                             <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
                           </svg>Code</a></li>
                     </ul>
                     <div class="tab-content rounded-bottom">
-                      <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1075">
+                      <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1046">
                         <div class="accordion accordion-flush" id="accordionFlushExample">
                           <div class="accordion-item">
                             <h2 class="accordion-header" id="flush-headingOne">
@@ -414,7 +415,7 @@ <h2 class="accordion-header" id="flush-headingThree">
                           </div>
                         </div>
                       </div>
-                      <div class="tab-pane pt-1" role="tabpanel" id="code-1075">
+                      <div class="tab-pane pt-1" role="tabpanel" id="code-1046">
                         <script class="language-markup" type="text/plain">
                           <div class="accordion accordion-flush" id="accordionFlushExample">
                             <div class="accordion-item">

src/views/base/breadcrumb.html

@@ -37,6 +37,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css">
     <link rel="stylesheet" href="node_modules/simplebar/dist/simplebar.css">
+    <link rel="stylesheet" href="css/vendors/simplebar.css">
     <!-- Main styles for this application-->
     <link href="css/style.css" rel="stylesheet">
     <!-- Global site tag (gtag.js) - Google Analytics-->
@@ -178,10 +179,10 @@
                 </svg> Error 500</a></li>
           </ul>
         </li>
-        <li class="nav-item"><a class="nav-link nav-link-success" href="https://coreui.io" target="_top">
+        <li class="nav-item mt-auto"><a class="nav-link" href="docs.html">
             <svg class="nav-icon">
-              <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-cloud-download"></use>
-            </svg> Download CoreUI</a></li>
+              <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-description"></use>
+            </svg> Docs</a></li>
         <li class="nav-item"><a class="nav-link nav-link-danger" href="https://coreui.io/pro/" target="_top">
             <svg class="nav-icon">
               <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-layers"></use>
@@ -193,7 +194,7 @@
     <div class="wrapper d-flex flex-column min-vh-100 bg-light">
       <header class="header header-sticky mb-4">
         <div class="container-fluid">
-          <button class="header-toggler px-md-0 me-md-3 d-xxl-none" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
+          <button class="header-toggler px-md-0 me-md-3" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
             <svg class="icon icon-lg">
               <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-menu"></use>
             </svg>
@@ -296,17 +297,17 @@
                   <p class="text-medium-emphasis small">The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"> <code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"> <code>content</code></a>.</p>
                   <div class="example">
                     <ul class="nav nav-tabs" role="tablist">
-                      <li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-510" role="tab">
+                      <li class="nav-item"><a class="nav-link active" data-coreui-toggle="tab" href="#preview-304" role="tab">
                           <svg class="icon me-2">
                             <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play"></use>
                           </svg>Preview</a></li>
-                      <li class="nav-item"><a class="nav-link" data-coreui-toggle="tab" href="#code-510" role="tab">
+                      <li class="nav-item"><a class="nav-link" data-coreui-toggle="tab" href="#code-304" role="tab">
                           <svg class="icon me-2">
                             <use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code"></use>
                           </svg>Code</a></li>
                     </ul>
                     <div class="tab-content rounded-bottom">
-                      <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-510">
+                      <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-304">
                         <nav aria-label="breadcrumb" role="navigation">
                           <ol class="breadcrumb">
                             <li class="breadcrumb-item active" aria-current="page">Home</li>
@@ -327,7 +328,7 @@
                         </nav>
                         <nav class="breadcrumb"><a class="breadcrumb-item" href="#">Home</a><a class="breadcrumb-item" href="#">Library</a><a class="breadcrumb-item" href="#">Data</a><span class="breadcrumb-item active">Bootstrap</span></nav>
                       </div>
-                      <div class="tab-pane pt-1" role="tabpanel" id="code-510">
+                      <div class="tab-pane pt-1" role="tabpanel" id="code-304">
                         <script class="language-markup" type="text/plain">
                           <nav aria-label="breadcrumb" role="navigation">
                             <ol class="breadcrumb">