refactor: improve resposive behavior

Author: mrholek

src/pug/_partials/sidebar.pug

@@ -6,7 +6,7 @@
         |
       svg.sidebar-brand-narrow(width="32" height="32" alt="CoreUI Logo")
         use(xlink:href="assets/brand/coreui.svg#signet")
-    button.btn-close.d-md-none(type='button' data-coreui-dismiss='offcanvas' data-coreui-theme="dark" aria-label='Close' onclick='coreui.Sidebar.getInstance(document.querySelector("#sidebar")).toggle()')
+    button.btn-close.d-lg-none(type='button' data-coreui-dismiss='offcanvas' data-coreui-theme="dark" aria-label='Close' onclick='coreui.Sidebar.getInstance(document.querySelector("#sidebar")).toggle()')
   ul.sidebar-nav(data-coreui="navigation" data-simplebar)
     li.nav-item
       a.nav-link(href='index.html')

src/pug/views/index.pug

@@ -21,7 +21,7 @@ block breadcrumb
 
 block view
   .row
-    .col-sm-6.col-lg-3
+    .col-sm-6.col-xl-3
       .card.mb-4.text-white.bg-primary
         .card-body.pb-0.d-flex.justify-content-between.align-items-start
           div
@@ -43,7 +43,7 @@ block view
         .c-chart-wrapper.mt-3.mx-3(style='height:70px;')
           canvas#card-chart1.chart(height='70')
     // /.col
-    .col-sm-6.col-lg-3
+    .col-sm-6.col-xl-3
       .card.mb-4.text-white.bg-info
         .card-body.pb-0.d-flex.justify-content-between.align-items-start
           div
@@ -64,7 +64,7 @@ block view
         .c-chart-wrapper.mt-3.mx-3(style='height:70px;')
           canvas#card-chart2.chart(height='70')
     // /.col
-    .col-sm-6.col-lg-3
+    .col-sm-6.col-xl-3
       .card.mb-4.text-white.bg-warning
         .card-body.pb-0.d-flex.justify-content-between.align-items-start
           div
@@ -85,7 +85,7 @@ block view
         .c-chart-wrapper.mt-3(style='height:70px;')
           canvas#card-chart3.chart(height='70')
     // /.col
-    .col-sm-6.col-lg-3
+    .col-sm-6.col-xl-3
       .card.mb-4.text-white.bg-danger
         .card-body.pb-0.d-flex.justify-content-between.align-items-start
           div
@@ -130,30 +130,30 @@ block view
       .c-chart-wrapper(style='height:300px;margin-top:40px;')
         canvas#main-chart.chart(height='300')
     .card-footer
-      .row.row-cols-1.row-cols-md-5.text-center
-        .col.mb-sm-2.mb-0
+      .row.row-cols-1.row-cols-sm-2.row-cols-lg-4.row-cols-xl-5.text-center
+        .col.mb-2
           .text-body-secondary Visits
-          .fw-semibold 29.703 Users (40%)
+          .fw-semibold.text-truncate 29.703 Users (40%)
           .progress.progress-thin.mt-2
             .progress-bar.bg-success(role='progressbar', style='width: 40%', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100')
-        .col.mb-sm-2.mb-0
+        .col.mb-2
           .text-body-secondary Unique
-          .fw-semibold 24.093 Users (20%)
+          .fw-semibold.text-truncate 24.093 Users (20%)
           .progress.progress-thin.mt-2
             .progress-bar.bg-info(role='progressbar', style='width: 20%', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100')
-        .col.mb-sm-2.mb-0
+        .col.mb-2
           .text-body-secondary Pageviews
-          .fw-semibold 78.706 Views (60%)
+          .fw-semibold.text-truncate 78.706 Views (60%)
           .progress.progress-thin.mt-2
             .progress-bar.bg-warning(role='progressbar', style='width: 60%', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100')
-        .col.mb-sm-2.mb-0
+        .col.mb-2
           .text-body-secondary New Users
-          .fw-semibold 22.123 Users (80%)
+          .fw-semibold.text-truncate 22.123 Users (80%)
           .progress.progress-thin.mt-2
             .progress-bar.bg-danger(role='progressbar', style='width: 80%', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100')
-        .col.mb-sm-2.mb-0
+        .col.mb-2.d-none.d-xl-block
           .text-body-secondary Bounce Rate
-          .fw-semibold 40.15%
+          .fw-semibold.text-truncate 40.15%
           .progress.progress-thin.mt-2
             .progress-bar(role='progressbar', style='width: 40%', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100')
   // /.card.mb-4
@@ -218,13 +218,13 @@ block view
               .row
                 .col-6
                   .border-start.border-start-4.border-start-info.px-3.mb-3
-                    small.text-body-secondary New Clients
-                    div.fs-5.fw-semibold 9.123
+                    .small.text-body-secondary.text-truncate New Clients
+                    .fs-5.fw-semibold 9.123
                 // /.col
                 .col-6
                   .border-start.border-start-4.border-start-danger.px-3.mb-3
-                    small.text-body-secondary Recuring Clients
-                    div.fs-5.fw-semibold 22.643
+                    .small.text-body-secondary.text-truncate Recuring Clients
+                    .fs-5.fw-semibold 22.643
                 // /.col
               // /.row
               hr.mt-0
@@ -296,13 +296,13 @@ block view
               .row
                 .col-6
                   .border-start.border-start-4.border-start-warning.px-3.mb-3
-                    small.text-body-secondary Pageviews
-                    div.fs-5.fw-semibold 78.623
+                    .small.text-body-secondary.text-truncate Pageviews
+                    .fs-5.fw-semibold 78.623
                 // /.col
                 .col-6
                   .border-start.border-start-4.border-start-success.px-3.mb-3
-                    small.text-body-secondary Organic
-                    div.fs-5.fw-semibold 49.123
+                    .small.text-body-secondary.text-truncate Organic
+                    .fs-5.fw-semibold 49.123
                 // /.col
               // /.row
               hr.mt-0
@@ -369,7 +369,7 @@ block view
           br
           .table-responsive
             table.table.border.mb-0
-              thead.fw-semibold
+              thead.fw-semibold.text-nowrap
                 tr.align-middle
                   th.bg-body-secondary.text-center
                     svg.icon
@@ -397,7 +397,7 @@ block view
                   td
                     .d-flex.justify-content-between.align-items-baseline
                       .fw-semibold 50%
-                      .ms-1.text-nowrap.small.text-body-secondary Jun 11, 2020 - Jul 10, 2020
+                      .text-nowrap.small.text-body-secondary.ms-3 Jun 11, 2020 - Jul 10, 2020
                     .progress.progress-thin
                       .progress-bar.bg-success(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
                   td.text-center
@@ -431,7 +431,7 @@ block view
                   td
                     .d-flex.justify-content-between.align-items-baseline
                       .fw-semibold 10%
-                      .ms-1.text-nowrap.small.text-body-secondary Jun 11, 2020 - Jul 10, 2020
+                      .text-nowrap.small.text-body-secondary.ms-3 Jun 11, 2020 - Jul 10, 2020
                     .progress.progress-thin
                       .progress-bar.bg-info(role='progressbar', style='width: 10%', aria-valuenow='10', aria-valuemin='0', aria-valuemax='100')
                   td.text-center
@@ -465,7 +465,7 @@ block view
                   td
                     .d-flex.justify-content-between.align-items-baseline
                       .fw-semibold 74%
-                      .ms-1.text-nowrap.small.text-body-secondary Jun 11, 2020 - Jul 10, 2020
+                      .text-nowrap.small.text-body-secondary.ms-3 Jun 11, 2020 - Jul 10, 2020
                     .progress.progress-thin
                       .progress-bar.bg-warning(role='progressbar', style='width: 74%', aria-valuenow='74', aria-valuemin='0', aria-valuemax='100')
                   td.text-center
@@ -499,7 +499,7 @@ block view
                   td
                     .d-flex.justify-content-between.align-items-baseline
                       .fw-semibold 98%
-                      .ms-1.text-nowrap.small.text-body-secondary Jun 11, 2020 - Jul 10, 2020
+                      .text-nowrap.small.text-body-secondary.ms-3 Jun 11, 2020 - Jul 10, 2020
                     .progress.progress-thin
                       .progress-bar.bg-danger(role='progressbar', style='width: 98%', aria-valuenow='98', aria-valuemin='0', aria-valuemax='100')
                   td.text-center
@@ -533,7 +533,7 @@ block view
                   td
                     .d-flex.justify-content-between.align-items-baseline
                       .fw-semibold 22%
-                      .ms-1.text-nowrap.small.text-body-secondary Jun 11, 2020 - Jul 10, 2020
+                      .text-nowrap.small.text-body-secondary.ms-3 Jun 11, 2020 - Jul 10, 2020
                     .progress.progress-thin
                       .progress-bar.bg-info(role='progressbar', style='width: 22%', aria-valuenow='22', aria-valuemin='0', aria-valuemax='100')
                   td.text-center
@@ -567,7 +567,7 @@ block view
                   td
                     .d-flex.justify-content-between.align-items-baseline
                       .fw-semibold 43%
-                      .ms-1.text-nowrap.small.text-body-secondary Jun 11, 2020 - Jul 10, 2020
+                      .text-nowrap.small.text-body-secondary.ms-3 Jun 11, 2020 - Jul 10, 2020
                     .progress.progress-thin
                       .progress-bar.bg-success(role='progressbar', style='width: 43%', aria-valuenow='43', aria-valuemin='0', aria-valuemax='100')
                   td.text-center