From 8a7baa6670a5dc28115858f95b85864b3fccfb6d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 13 Jun 2023 20:35:08 +0200
Subject: [PATCH] refactor: improve responsive behavior

---
 src/views/dashboard/Dashboard.vue       | 15 ++---
 src/views/widgets/Widgets.vue           | 76 ++++++++++++-------------
 src/views/widgets/WidgetsStatsTypeA.vue |  8 +--
 src/views/widgets/WidgetsStatsTypeD.vue |  8 +--
 4 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 91421320..a9cfe60a 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -178,7 +178,7 @@
                 >
                   <div class="progress-group-header">
                     <CIcon :icon="item.icon" class="me-2" size="lg" />
-                    <span class="title">Organic Search</span>
+                    <span class="title">{{ item.title }}</span>
                     <span class="ms-auto fw-semibold">
                       {{ item.value }}
                       <span class="text-medium-emphasis small"
@@ -221,7 +221,7 @@
                   </CTableDataCell>
                   <CTableDataCell>
                     <div>{{ item.user.name }}</div>
-                    <div class="small text-medium-emphasis">
+                    <div class="small text-medium-emphasis text-nowrap">
                       <span>{{ item.user.new ? 'New' : 'Recurring' }}</span> |
                       {{ item.user.registered }}
                     </div>
@@ -234,11 +234,11 @@
                     />
                   </CTableDataCell>
                   <CTableDataCell>
-                    <div class="clearfix">
-                      <div class="float-start">
+                    <div class="d-flex justify-content-between text-nowrap">
+                      <div>
                         <strong>{{ item.usage.value }}%</strong>
                       </div>
-                      <div class="float-end">
+                      <div class="ms-1">
                         <small class="text-medium-emphasis">
                           {{ item.usage.period }}
                         </small>
@@ -255,10 +255,11 @@
                   </CTableDataCell>
                   <CTableDataCell>
                     <div class="small text-medium-emphasis">Last login</div>
-                    <strong>{{ item.activity }}</strong>
+                    <div class="fw-semibold text-nowrap">
+                      {{ item.activity }}
+                    </div>
                   </CTableDataCell>
                 </CTableRow>
-                <CTableRow> </CTableRow>
               </CTableBody>
             </CTable>
           </CCardBody>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 6bcf26f5..c58759dc 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -11,7 +11,7 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   :progress="{ color: 'success', value: 75 }"
@@ -21,7 +21,7 @@
                   <template #value>89.9%</template>
                 </CWidgetStatsB>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   :progress="{ color: 'info', value: 75 }"
@@ -30,7 +30,7 @@
                   value="12.124"
                 />
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   :progress="{ color: 'warning', value: 75 }"
@@ -39,7 +39,7 @@
                   value="$98.111,00"
                 />
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   :progress="{ color: 'primary', value: 75 }"
@@ -52,7 +52,7 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   color="success"
@@ -64,7 +64,7 @@
                   <template #value>89.9%</template>
                 </CWidgetStatsB>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   color="info"
@@ -75,7 +75,7 @@
                   value="12.124"
                 />
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   color="warning"
@@ -86,7 +86,7 @@
                   value="$98.111,00"
                 />
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3">
                 <CWidgetStatsB
                   class="mb-3"
                   color="primary"
@@ -102,7 +102,7 @@
 
           <DocsExample href="">
             <CRow>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
                 <CWidgetStatsE title="title" value="1,123">
                   <CChart
                     class="mx-auto"
@@ -126,7 +126,7 @@
                   />
                 </CWidgetStatsE>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
                 <CWidgetStatsE title="title" value="1,123">
                   <CChart
                     class="mx-auto"
@@ -150,7 +150,7 @@
                   />
                 </CWidgetStatsE>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
                 <CWidgetStatsE title="title" value="1,123">
                   <CChart
                     class="mx-auto"
@@ -174,7 +174,7 @@
                   />
                 </CWidgetStatsE>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
                 <CWidgetStatsE title="title" value="1,123">
                   <CChart
                     class="mx-auto"
@@ -198,7 +198,7 @@
                   />
                 </CWidgetStatsE>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
                 <CWidgetStatsE title="title" value="1,123">
                   <CChart
                     class="mx-auto"
@@ -222,7 +222,7 @@
                   />
                 </CWidgetStatsE>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
                 <CWidgetStatsE title="title" value="1,123">
                   <CChart
                     class="mx-auto"
@@ -250,28 +250,28 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-settings" size="xl" />
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="info" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-user" size="xl" />
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-moon" size="xl" />
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-bell" size="xl" />
@@ -282,7 +282,7 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-settings" size="xl" />
@@ -304,7 +304,7 @@
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="info" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-user" size="xl" />
@@ -326,7 +326,7 @@
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-moon" size="xl" />
@@ -348,7 +348,7 @@
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
                   <template #icon>
                     <CIcon icon="cil-bell" size="xl" />
@@ -374,7 +374,7 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF
                   color="primary"
                   :padding="false"
@@ -386,7 +386,7 @@
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF
                   color="info"
                   :padding="false"
@@ -398,7 +398,7 @@
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF
                   color="warning"
                   :padding="false"
@@ -410,7 +410,7 @@
                   </template>
                 </CWidgetStatsF>
               </CCol>
-              <CCol :xs="3">
+              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
                 <CWidgetStatsF
                   color="danger"
                   :padding="false"
@@ -483,7 +483,7 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   :progress="{ color: 'info', value: 75 }"
@@ -495,7 +495,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   :progress="{ color: 'success', value: 75 }"
@@ -507,7 +507,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   :progress="{ color: 'warning', value: 75 }"
@@ -519,7 +519,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   :progress="{ color: 'primary', value: 75 }"
@@ -531,7 +531,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   :progress="{ color: 'danger', value: 75 }"
@@ -543,7 +543,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   :progress="{ color: 'info', value: 75 }"
@@ -559,7 +559,7 @@
           </DocsExample>
           <DocsExample href="">
             <CRow>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   color="info"
@@ -573,7 +573,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   color="success"
@@ -587,7 +587,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   color="warning"
@@ -601,7 +601,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   color="primary"
@@ -615,7 +615,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   color="danger"
@@ -629,7 +629,7 @@
                   /></template>
                 </CWidgetStatsC>
               </CCol>
-              <CCol :xs="2">
+              <CCol :sm="4" :md="3" :lg="2">
                 <CWidgetStatsC
                   class="mb-3"
                   color="info"
diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 4f663f50..9dd5fbe7 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -1,6 +1,6 @@
 <template>
   <CRow>
-    <CCol :xs="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsA class="mb-4" color="primary">
         <template #value
           >26K
@@ -96,7 +96,7 @@
         </template>
       </CWidgetStatsA>
     </CCol>
-    <CCol :xs="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsA class="mb-4" color="info">
         <template #value
           >$6.200
@@ -191,7 +191,7 @@
         </template>
       </CWidgetStatsA>
     </CCol>
-    <CCol :xs="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsA class="mb-4" color="warning">
         <template #value
           >2.49%
@@ -272,7 +272,7 @@
         </template>
       </CWidgetStatsA>
     </CCol>
-    <CCol :xs="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsA class="mb-4" color="danger">
         <template #value
           >44K
diff --git a/src/views/widgets/WidgetsStatsTypeD.vue b/src/views/widgets/WidgetsStatsTypeD.vue
index b4bbd57f..d4f36973 100644
--- a/src/views/widgets/WidgetsStatsTypeD.vue
+++ b/src/views/widgets/WidgetsStatsTypeD.vue
@@ -1,6 +1,6 @@
 <template>
   <CRow>
-    <CCol :sm="6" :lg="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsD
         class="mb-4"
         style="--cui-card-cap-bg: #3b5998"
@@ -42,7 +42,7 @@
         </template>
       </CWidgetStatsD>
     </CCol>
-    <CCol :sm="6" :lg="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsD
         class="mb-4"
         style="--cui-card-cap-bg: #00aced"
@@ -84,7 +84,7 @@
         </template>
       </CWidgetStatsD>
     </CCol>
-    <CCol :sm="6" :lg="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsD
         class="mb-4"
         style="--cui-card-cap-bg: #4875b4"
@@ -126,7 +126,7 @@
         </template>
       </CWidgetStatsD>
     </CCol>
-    <CCol :sm="6" :lg="3">
+    <CCol :xs="12" :sm="6" :lg="3">
       <CWidgetStatsD
         class="mb-4"
         color="warning"