From eedbfa49c3706357155d7a6d60bc3268cbc2be56 Mon Sep 17 00:00:00 2001
From: Pralish Kayastha <pralishkayastha@gmail.com>
Date: Sun, 29 Jan 2023 21:29:54 +0545
Subject: [PATCH] responsive subtotle

---
 app/assets/stylesheets/dashboard.scss           |  5 ++++-
 .../comfy/admin/v2/dashboard/_events.html.haml  | 17 +++++++++--------
 .../admin/v2/dashboard/dashboard.html.haml      | 17 +++++++++--------
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index 84cc0a590..d6f102422 100755
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -27,7 +27,10 @@
 
   &-count {
     margin-right: 10px;
-    margin-left: 24px;;
+
+    @media (min-width: 768px) {
+      margin-left: 24px;
+    }
   }
 
   &-count-lg {
diff --git a/app/views/comfy/admin/v2/dashboard/_events.html.haml b/app/views/comfy/admin/v2/dashboard/_events.html.haml
index 16e5b6cf2..5e1d2617e 100644
--- a/app/views/comfy/admin/v2/dashboard/_events.html.haml
+++ b/app/views/comfy/admin/v2/dashboard/_events.html.haml
@@ -1,16 +1,17 @@
 %section.vr-analytics-section.vr-analytics-events
   .vr-analytics-section-header
-    .d-flex.align-items-center
+    .d-md-flex.align-items-center
       .vr-analytics-sub-title
         = title
       - if events.present?
-        .vr-analytics-count
-          = events.count 
-          = "total #{type}"
-        .vr-analytics-percent-change
-          = display_percent_change(events.count, previous_period_events.count)
-        .vr-analytics-tooltips{ data: { toggle: "tooltip", placement: "right" }, title: tooltip_content(events.count, previous_period_events.count, params[:interval], @start_date, @end_date) }
-          ?
+        .d-flex.align-items-center.mt-2.mt-md-0
+          .vr-analytics-count
+            = events.count 
+            = "total #{type}"
+          .vr-analytics-percent-change
+            = display_percent_change(events.count, previous_period_events.count)
+          .vr-analytics-tooltips{ data: { toggle: "tooltip", placement: "right" }, title: tooltip_content(events.count, previous_period_events.count, params[:interval], @start_date, @end_date) }
+            ?
 
   - if events.present?
     .vr-analytics-section-body.d-flex.align-items-center
diff --git a/app/views/comfy/admin/v2/dashboard/dashboard.html.haml b/app/views/comfy/admin/v2/dashboard/dashboard.html.haml
index cbafcbd01..5af220bab 100644
--- a/app/views/comfy/admin/v2/dashboard/dashboard.html.haml
+++ b/app/views/comfy/admin/v2/dashboard/dashboard.html.haml
@@ -24,17 +24,18 @@
     %section.row.vr-analytics-section.vr-analytics-page-visit-events
       .col{ class: @page_visit_events.present? ? "col-lg-9 mb-4" : "col-12" }
         .d-flex.justify-content-between
-          .vr-analytics-section-header.d-flex.justify-content-between.align-items-center
+          .vr-analytics-section-header.d-md-flex.justify-content-between.align-items-center
             .vr-analytics-sub-title
               = "#{page_name(params[:page])} visits"
             - if @page_visit_events.present?
-              .vr-analytics-count
-                = @page_visit_events.count 
-                total visits
-              .vr-analytics-percent-change
-                = display_percent_change(@page_visit_events.count, @previous_period_page_visit_events.count)
-              .vr-analytics-tooltips{ data: { toggle: "tooltip", placement: "right" }, title: tooltip_content(@page_visit_events.count, @previous_period_page_visit_events.count, params[:interval], @start_date, @end_date) }
-                ?
+              .d-flex.justify-content-between.align-items-center.mt-2.mt-md-0
+                .vr-analytics-count
+                  = @page_visit_events.count 
+                  total visits
+                .vr-analytics-percent-change
+                  = display_percent_change(@page_visit_events.count, @previous_period_page_visit_events.count)
+                .vr-analytics-tooltips{ data: { toggle: "tooltip", placement: "right" }, title: tooltip_content(@page_visit_events.count, @previous_period_page_visit_events.count, params[:interval], @start_date, @end_date) }
+                  ?
         .vr-analytics-section-body
           - if @page_visit_events.present?
             = column_chart page_visit_chart_data(@page_visit_events, @start_date, @end_date), colors: ["#88DAE3FF", "#D785E3FF", "#F7C85CFF"], library: { plugins: { legend: { position: "top", align: "end", labels: { padding: 24, boxWidth: 8, usePointStyle: true, font: { size: 16 } } } }  }