dashboard: dim realtime component if page filter active

Author: dannyvankooten

assets/css/dashboard.css

@@ -171,6 +171,10 @@ body.koko-analytics {
 .page-filter-active tr.page-filter-active  {
   opacity: 1;
 }
+/* realtime totals are always site-wide, so dim them when a page filter is active */
+#ka-realtime.page-filter-active {
+  opacity: 0.5;
+}
 
 /* drag-and-drop sorting */
 .ka-col[data-sortable] th { cursor: grab; }

src/Resources/views/dashboard-page.php

@@ -169,7 +169,7 @@
             </div>
         </div>
         <div class="ka-col">
-            <div class="ka-box p-3" id="ka-realtime">
+            <div class="ka-box p-3 <?= $page !== 0 ? 'page-filter-active' : ''; ?>" id="ka-realtime">
                 <div class="text-muted mb-1"><span class="ka-realtime-dot"></span><?php esc_html_e('Realtime pageviews', 'koko-analytics'); ?></div>
                 <div class="ka-totals-number mb-1"><?= esc_html(number_format_i18n($realtime)); ?></div>
                 <div class="text-muted">