Better scoped the widget styles. Made more use of existing CSS within…

… Matomo instead of using custom styles.
AMPERAGE-Marketing · Dec 16, 2019 · 596a610 · 596a610
1 parent 27b6c8a
commit 596a610
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.0.3
+
+- Better scoped the widget styles.
+- Made more use of existing CSS within Matomo instead of using custom styles.
+
 ## 1.0.2
 
 - Added API keys as a user-specific setting.

diff --git a/Widgets/GetCrazyEggInfo.php b/Widgets/GetCrazyEggInfo.php
@@ -160,7 +160,7 @@ public function render(){
 				$snapshotCount = 0;
 				foreach($snapshots as $snapshot){
 					if (strpos($snapshot->source_url, $siteurl) !== false) { // Only snapshot info if it's for the current site's URL
-						$output.= '<a href="https://app.crazyegg.com/v2/snapshots/'.$snapshot->id.'" target="_blank" class="crazyegg-snapshot"><h4 class="name">'.$snapshot->name.'</h4><img src="'.$snapshot->thumbnail_url.'" class="thumbnail" alt="Thumbnail" width="154" height="102" /><span class="total_visits">'.number_format($snapshot->total_visits).'</span><span class="total_clicks">'.number_format($snapshot->total_clicks).'</span><span class="status">'.ucfirst($snapshot->status).'</span><span class="heatmap-preview"><img src="'.$snapshot->heatmap_url.'" class="heatmap" alt="Heatmap" width="100%" /><img src="'.$snapshot->screenshot_url.'" class="screenshot" alt="Screenshot" width="100%" /></span></a><!-- .crazyegg-snapshot -->';
+						$output.= '<a href="https://app.crazyegg.com/v2/snapshots/'.$snapshot->id.'" target="_blank" class="crazyegg-snapshot alert alert-info"><h4 class="name">'.$snapshot->name.'</h4><img src="'.$snapshot->thumbnail_url.'" class="thumbnail" alt="Thumbnail" width="154" height="102" /><span class="total_visits">'.number_format($snapshot->total_visits).'</span><span class="total_clicks">'.number_format($snapshot->total_clicks).'</span><span class="status">'.ucfirst($snapshot->status).'</span><span class="heatmap-preview"><img src="'.$snapshot->heatmap_url.'" class="heatmap" alt="Heatmap" width="100%" /><img src="'.$snapshot->screenshot_url.'" class="screenshot" alt="Screenshot" width="100%" /></span></a><!-- .crazyegg-snapshot -->';
 						$snapshotCount++;
 					}
 				}

diff --git a/plugin.json b/plugin.json
@@ -1,6 +1,6 @@
 {
     "name": "CrazyEggWidgetByAmperage",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "description": "Show Crazy Egg snapshots for the current site as a dashboard widget.",
     "theme": false,
     "keywords": [

diff --git a/stylesheets/crazyegg.less b/stylesheets/crazyegg.less
@@ -1,21 +1,24 @@
-.widget-body { padding:10px 15px; font-size:1.1em; overflow:auto; }
-.crazyegg-snapshot { margin:0 -15px; padding:1em 15px; display:block;
-	.name { margin:0 0 0.4em; font-weight:bold; }
-	img.thumbnail { float:left; margin:0 1em 0 0; max-width:30%; height:auto; }
-	span { display:block; }
-	.total_visits:before { content:'Visits: '; display:inline; }
-	.total_clicks:before { content:'Clicks: '; display:inline; }
-	.status:before { content:'Status: '; display:inline; }
-	.heatmap-preview { display:none; position:relative; padding:1em 0 0;
-		img.screenshot,img.heatmap { display:block; width:100%; height:auto; }
-		img.heatmap { position:absolute; opacity:0.94; transition-duration:0.8s; }
+#widgetCrazyEggWidgetByAmperagegetCrazyEggInfo {
+	.widget-body { padding:10px 15px; font-size:1.1em; overflow:auto; }
+	.crazyegg-snapshot { margin:0 -15px; padding:1em 15px; display:block;
+		.name { margin:0 0 0.4em; font-weight:bold; }
+		img.thumbnail { float:left; margin:0 1em 0 0; max-width:30%; height:auto; }
+		span { display:block; }
+		.total_visits:before { content:'Visits: '; display:inline; }
+		.total_clicks:before { content:'Clicks: '; display:inline; }
+		.status:before { content:'Status: '; display:inline; }
+		.heatmap-preview { display:none; position:relative; padding:1em 0 0;
+			img.screenshot,img.heatmap { display:block; width:100%; height:auto; }
+			img.heatmap { position:absolute; opacity:0.94; transition-duration:0.8s; }
+		}
+		.heatmap-preview:hover,.heatmap-preview:focus {
+			img.heatmap { opacity:0.3; }
+		}
 	}
-	.heatmap-preview:hover,.heatmap-preview:focus {
-		img.heatmap { opacity:0.3; }
+	.crazyegg-snapshot:before { display:none; }
+	.crazyegg-snapshot:after { content:''; display:block; clear:both; }
+	.crazyegg-snapshot:hover,.crazyegg-snapshot:focus { text-decoration:none!important; filter:brightness(1.1);
+		.heatmap-preview { display:block; }
 	}
-}
-.crazyegg-snapshot:after { content:''; display:block; clear:both; }
-.crazyegg-snapshot:hover,.crazyegg-snapshot:focus { text-decoration:none!important; background:#eee;
-	.heatmap-preview { display:block; }
-}
-.crazyegg-snapshot:active { text-decoration:none!important; background:#ddd; }
+	.crazyegg-snapshot:active { text-decoration:none!important; filter:invert(20%); }
+}