refactor: update example views

Author: mrholek

src/pug/_mixins/example.pug

@@ -6,21 +6,27 @@ mixin example(script)
         a.nav-link.active(data-coreui-toggle="tab" href="#preview-"+id role="tab")
           svg.icon.me-2
             use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-media-play")
+            |
           | Preview
       li.nav-item
         a.nav-link(data-coreui-toggle="tab" href="#code-"+id role="tab")
           svg.icon.me-2
             use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-code")
+            |
           | Code
       if script
         li.nav-item
           a.nav-link(data-coreui-toggle="tab" href="#js-"+id role="tab")
             svg.icon.me-2
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-cog")
+              |
             | JavaScript
     .tab-content.rounded-bottom
       .tab-pane.p-3.active.preview(role="tabpanel" id="preview-"+id )
-        block
+        if script
+          block html 
+        else 
+          block
       .tab-pane.pt-1(role="tabpanel" id="code-"+id )
         script.language-markup(type='text/plain')
           if script

src/pug/_partials/banner.pug

@@ -1,6 +1,6 @@
 //
    * CoreUI - Free Bootstrap Admin Template
-   * @version v4.0.0-alpha.2
+   * @version v4.0.0-beta.0
    * @link https://coreui.io
    * Copyright (c) 2021 creativeLabs Łukasz Holeczek
    * Licensed under MIT (https://coreui.io/license)

src/pug/_partials/head.pug

@@ -25,6 +25,8 @@ meta(name='msapplication-TileImage', content='assets/favicon/ms-icon-144x144.png
 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')
+
 
 // Main styles for this application
 link(href='css/style.css', rel='stylesheet')

src/pug/_partials/header.pug

@@ -3,31 +3,36 @@ header.header.header-sticky.mb-4
     button.header-toggler.px-md-0.me-md-3.d-xxl-none(type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()")
       svg.icon.icon-lg
         use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-menu")
-    a.header-brand.d-xl-none(href="#")
+        |
+    a.header-brand.d-md-none(href="#")
       svg(width="118" height="46" alt="CoreUI Logo")
         use(xlink:href="assets/brand/coreui.svg#full")
-    ul.header-nav.d-md-down-none
+        |
+    ul.header-nav.d-none.d-md-flex
       li.nav-item
         a.nav-link(href="#") Dashboard
       li.nav-item
         a.nav-link(href="#") Users
       li.nav-item
         a.nav-link(href="#") Settings
     ul.header-nav.ms-auto
-      li.nav-item.d-md-down-none
+      li.nav-item
         a.nav-link(href="#")
           svg.icon.icon-lg
             use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
-      li.nav-item.d-md-down-none
+            |
+      li.nav-item
         a.nav-link(href="#")
           svg.icon.icon-lg
             use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-list-rich")
-      li.nav-item.d-md-down-none
+            |
+      li.nav-item
         a.nav-link(href="#")
           svg.icon.icon-lg
             use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open")
+            |
     ul.header-nav.ms-3
-      li.nav-item.dropdown.d-flex.align-items-center
+      li.nav-item.dropdown
         a.nav-link.py-0(data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false")
           .avatar.avatar-md
             img.avatar-img(src="assets/img/avatars/8.jpg" alt="[email protected]")
@@ -37,51 +42,61 @@ header.header.header-sticky.mb-4
           a.dropdown-item(href="#")
             svg.icon.me-2
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
+              |
             |  Updates
             span.badge.badge-sm.bg-info.ms-2 42
           a.dropdown-item(href="#")
             svg.icon.me-2
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open")
+              |
             |  Messages
             span.badge.badge-sm.bg-success.ms-2 42
           a.dropdown-item(href="#")
             svg.icon.me-2
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-task")
+              |
             |  Tasks
             span.badge.badge-sm.bg-danger.ms-2 42
           a.dropdown-item(href="#")
             svg.icon.me-2
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-comment-square")
+              |
             |  Comments
             span.badge.badge-sm.bg-warning.ms-2 42
           .dropdown-header.bg-light.py-2
             .fw-semibold Settings
           a.dropdown-item(href="#")
             svg.icon.me-2
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-user")
+              |
             |  Profile
           a.dropdown-item(href="#")
             svg.icon.me-2
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings")
+              |
             |  Settings
           a.dropdown-item(href="#")
             svg.icon.me-2
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-credit-card")
+              |
             |  Payments
             span.badge.badge-sm.bg-secondary.ms-2 42
           a.dropdown-item(href="#")
             svg.icon.me-2
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-file")
+              |
             |  Projects
             span.badge.badge-sm.bg-primary.ms-2 42
           .dropdown-divider
           a.dropdown-item(href="#")
             svg.icon.me-2
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-lock-locked")
+              |
             |  Lock Account
           a.dropdown-item(href="#")
             svg.icon.me-2
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout")
+              |
             |  Logout
   .header-divider
   .container-fluid

src/pug/_partials/scripts.pug

@@ -1,8 +1,14 @@
 // CoreUI and necessary plugins
 script(src='node_modules/@coreui/coreui/dist/js/coreui.bundle.min.js')
+script(src='node_modules/simplebar/dist/simplebar.min.js')
+
 script(src='https://cdn.jsdelivr.net/npm/[email protected]/prism.js')
 script(src='https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js')
 script(src='https://cdn.jsdelivr.net/npm/[email protected]/plugins/unescaped-markup/prism-unescaped-markup.min.js')
 script(src='https://cdn.jsdelivr.net/npm/[email protected]/plugins/normalize-whitespace/prism-normalize-whitespace.js')
 
 block scripts
+
+script 
+  block js
+

src/pug/_partials/sidebar.pug

@@ -1,12 +1,13 @@
 .sidebar.sidebar-dark.sidebar-fixed.sidebar-self-hiding-xl#sidebar
-  .sidebar-brand.d-lg-down-none
+  .sidebar-brand.d-none.d-md-flex
     svg.sidebar-brand-full(width="118" height="46" alt="CoreUI Logo")
       use(xlink:href="assets/brand/coreui.svg#full")
+      |
     svg.sidebar-brand-narrow(width="46" height="46" alt="CoreUI Logo")
       use(xlink:href="assets/brand/coreui.svg#signet")
-  ul.sidebar-nav(data-coreui="navigation")
+  ul.sidebar-nav(data-coreui="navigation" data-simplebar)
     li.nav-item
-      a.nav-link(href=ajax ? 'main.html' : 'index.html')
+      a.nav-link(href='index.html')
         svg.nav-icon
           use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speedometer")
         |  Dashboard

src/pug/views/404.pug

@@ -12,5 +12,6 @@ block view
           span.input-group-text
             svg.icon
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-magnifying-glass")
+              |
           input#prependedInput.form-control(size='16', type='text', placeholder='What are you looking for?')
           button.btn.btn-info(type='button') Search

src/pug/views/500.pug

@@ -12,5 +12,6 @@ block view
           span.input-group-text
             svg.icon
               use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-magnifying-glass")
+              |
           input#prependedInput.form-control(size='16', type='text', placeholder='What are you looking for?')
           button.btn.btn-info(type='button') Search

src/pug/views/base/cards.pug

@@ -76,7 +76,7 @@ block view
         .card(style='width: 18rem;')
           .card-body
             h5.card-title Card title
-            h6.card-subtitle.mb-2.text-muted Card subtitle
+            h6.card-subtitle.mb-2.text-medium-emphasis Card subtitle
             p.card-text
               | Some quick example text to build on the card title and make up the bulk of the card's content.
             a.card-link(href='#') Card link
@@ -196,7 +196,7 @@ block view
             h5.card-title Special title treatment
             p.card-text With supporting text below as a natural lead-in to additional content.
             a.btn.btn-primary(href='#') Go somewhere
-          .card-footer.text-muted
+          .card-footer.text-medium-emphasis
             | 2 days ago
 
   .card.mb-4
@@ -331,15 +331,15 @@ block view
                 p.card-text
                   | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                 p.card-text
-                  small.text-muted Last updated 3 mins ago
+                  small.text-medium-emphasis Last updated 3 mins ago
           .col-md-6
             .card
               .card-body
                 h5.card-title Card title
                 p.card-text
                   | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                 p.card-text
-                  small.text-muted Last updated 3 mins ago
+                  small.text-medium-emphasis Last updated 3 mins ago
               img.card-img-bottom(src='assets/img/full.jpg' alt='')
   .card.mb-4
     .card-header
@@ -380,7 +380,7 @@ block view
                 p.card-text
                   | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                 p.card-text
-                  small.text-muted Last updated 3 mins ago
+                  small.text-medium-emphasis Last updated 3 mins ago
   .card.mb-4
     .card-header
       strong Card
@@ -637,22 +637,22 @@ block view
               p.card-text
                 | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
               p.card-text
-                small.text-muted Last updated 3 mins ago
+                small.text-medium-emphasis Last updated 3 mins ago
           .card
             img.card-img-top(src='assets/img/full.jpg' alt='')
             .card-body
               h5.card-title Card title
               p.card-text This card has supporting text below as a natural lead-in to additional content.
               p.card-text
-                small.text-muted Last updated 3 mins ago
+                small.text-medium-emphasis Last updated 3 mins ago
           .card
             img.card-img-top(src='assets/img/full.jpg' alt='')
             .card-body
               h5.card-title Card title
               p.card-text
                 | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
               p.card-text
-                small.text-muted Last updated 3 mins ago
+                small.text-medium-emphasis Last updated 3 mins ago
       p.text-medium-emphasis.small When using card groups with footers, their content will automatically line up.
       +example()
         .card-group
@@ -663,22 +663,22 @@ block view
               p.card-text
                 | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
             .card-footer
-              small.text-muted Last updated 3 mins ago
+              small.text-medium-emphasis Last updated 3 mins ago
           .card
             img.card-img-top(src='assets/img/full.jpg' alt='')
             .card-body
               h5.card-title Card title
               p.card-text This card has supporting text below as a natural lead-in to additional content.
             .card-footer
-              small.text-muted Last updated 3 mins ago
+              small.text-medium-emphasis Last updated 3 mins ago
           .card
             img.card-img-top(src='assets/img/full.jpg' alt='')
             .card-body
               h5.card-title Card title
               p.card-text
                 | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
             .card-footer
-              small.text-muted Last updated 3 mins ago
+              small.text-medium-emphasis Last updated 3 mins ago
   .card.mb-4
     .card-header
       strong Card
@@ -804,15 +804,15 @@ block view
                 p.card-text
                   | This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
               .card-footer
-                small.text-muted Last updated 3 mins ago
+                small.text-medium-emphasis Last updated 3 mins ago
           .col
             .card.h-100
               img.card-img-top(src='assets/img/full.jpg' alt='')
               .card-body
                 h5.card-title Card title
                 p.card-text This card has supporting text below as a natural lead-in to additional content.
               .card-footer
-                small.text-muted Last updated 3 mins ago
+                small.text-medium-emphasis Last updated 3 mins ago
           .col
             .card.h-100
               img.card-img-top(src='assets/img/full.jpg' alt='')
@@ -821,4 +821,4 @@ block view
                 p.card-text
                   | This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
               .card-footer
-                small.text-muted Last updated 3 mins ago
+                small.text-medium-emphasis Last updated 3 mins ago

src/pug/views/base/navs.pug

@@ -201,7 +201,8 @@ block view
             |  as only 
             code .nav-link
             |  is required for styling 
-            code <a>
+            code 
+              = '<a>'
             |  elements.
           +example()
             nav.nav.nav-pills.nav-fill