responsive subtotle

restarone · Jan 29, 2023 · eedbfa4 · eedbfa4
1 parent f920fe3
commit eedbfa4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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 } } } }  }