Dashboard widget style fixes.

Author: Michiel Verkoijen

src/css/admin.css

@@ -62,7 +62,7 @@ div.tiny-account-status div.status-loading:before {
 
 @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
 	div.tiny-account-status div.status-loading:before {
-		background-image: url(../images/spinner-2x.gif);
+		background-image: url("../images/spinner-2x.gif");
 	}
 }
 
@@ -162,7 +162,7 @@ div.tiny-account-status.wide div.create button.loading, div.tiny-account-status.
 
 @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
 	div.tiny-account-status.wide div.create button.loading, div.tiny-account-status.wide div.update button.loading {
-		background-image: url(../images/button-spinner-2x.gif) !important;
+		background-image: url("../images/button-spinner-2x.gif") !important;
 	}
 }
 

src/css/dashboard-widget.css

@@ -1,17 +1,7 @@
-#optimization-chart {
-	margin: 12px 0 40px;
-	min-width: 180px;
-}
-
-#optimization-chart .value .percentage,
-#optimization-chart .value .label {
-	color: #40444F;
-}
-
 div.tiny_dashboard_widget .inside {
 	margin: 0;
 	min-height: 200px;
-	padding-bottom: 0px;
+	padding-bottom: 0;
 	overflow: hidden;
 }
 
@@ -36,8 +26,8 @@ div.tiny_dashboard_widget .inside .sky-background {
 	height: 100%;
 	width: 100%;
 	opacity: 0.33;
-  background: linear-gradient(180deg, #C6DDE4 0%, #FEFEFF 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33C6DDE4', endColorstr='#33FEFEFF',GradientType=0 ); /* IE6-9 */
+	background: linear-gradient(180deg, #c6dde4 0%, #fefeff 100%);
+	/* ie6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33C6DDE4', endColorstr='#33FEFEFF',GradientType=0 );
 }
 
 div.tiny_dashboard_widget .inside .cloud,
@@ -127,9 +117,9 @@ div.tiny_dashboard_widget.full-optimized .inside.mobile div#optimization-chart {
 }
 
 div.tiny_dashboard_widget .inside .media-library-optimized {
-  display: none;
+	display: none;
 	position: relative;
-  z-index: 1;
+	z-index: 1;
 }
 
 div.tiny_dashboard_widget.full-optimized .inside #widget-full-optimized,
@@ -139,8 +129,9 @@ div.tiny_dashboard_widget.half-optimized .inside #widget-half-optimized {
 	display: block;
 }
 
-div.tiny_dashboard_widget .widget-percentage, div.tiny_dashboard_widget .widget-label {
-	color: #40444F;
+div.tiny_dashboard_widget .widget-percentage,
+div.tiny_dashboard_widget .widget-label {
+	color: #40444f;
 }
 
 div.tiny_dashboard_widget .widget-label {
@@ -153,14 +144,24 @@ div.tiny_dashboard_widget .widget-percentage {
 }
 
 div.tiny_dashboard_widget .media-library-optimized {
-	padding:10px 20px;
+	padding: 10px 20px;
 	padding-bottom: 0px;
 }
 
 div.tiny_dashboard_widget .media-library-optimized p {
 	margin-bottom: 0;
 }
 
+div.tiny_dashboard_widget div#optimization-chart {
+	margin: 12px 0 40px;
+	min-width: 160px;
+}
+
+div.tiny_dashboard_widget div#optimization-chart div.value div.percentage,
+div.tiny_dashboard_widget div#optimization-chart div.value div.label {
+	color: #40444f;
+}
+
 .ie8 div.tiny_dashboard_widget .inside .panda-background {
 	background: none;
 }
@@ -176,7 +177,7 @@ div.tiny_dashboard_widget .media-library-optimized p {
 }
 
 .ie8 div.tiny_dashboard_widget .inside .grass {
-	background:  url('../images/grass-ie8.png');
+	background-image: url("../images/grass-ie8.png");
 	background-repeat: no-repeat !important;
 	background-position: bottom !important;
 	width: 100%;

src/views/dashboard-widget.php

@@ -1,14 +1,10 @@
-<?php $link = "<a href='" . admin_url( 'upload.php?page=tiny-bulk-optimization' ) . "'>" .  esc_html__( 'bulk optimization', 'tiny-compress-images' ) . '</a>'; ?>
+<?php $link = "<a href='" . admin_url( 'upload.php?page=tiny-bulk-optimization' ) . "'>" . esc_html__( 'bulk optimization', 'tiny-compress-images' ) . '</a>'; ?>
+
 <style type="text/css" >
-	.media-library-optimized,
-	#optimization-chart  {
-		display: none;
-	}
-	.ie8 #optimization-chart  {
-		display: none !important;
-	}
+	div.media-library-optimized { display: none; }
+	div#optimization-chart { display: none; }
+	.ie8 #optimization-chart { display: none !important; }
 </style>
-
 <div id="widget-spinner" class=""></div>
 <div class="sky-background"></div>
 <div class="cloud"></div>
@@ -30,7 +26,7 @@
 <div class="media-library-optimized" id="widget-half-optimized">
 	<p>
 		<?php printf( esc_html__( '%s, you are doing good.', 'tiny-compress-images' ), $this->friendly_user_name() ) ?>
-		<?php printf( esc_html__( 'With your current settings you can still optimize %s image sizes from your %s uploaded JPEG and PNG images.', 'tiny-compress-images' ), '<span id="unoptimised-sizes"></span>', '<span id="uploaded-images"></span>' ) ?>
+		<?php printf( esc_html__( 'With your current settings you can still optimize %1$s image sizes from your %2$s uploaded JPEG and PNG images.', 'tiny-compress-images' ), '<span id="unoptimised-sizes"></span>', '<span id="uploaded-images"></span>' ) ?>
 		<?php printf( wp_kses( __( 'Start the %s to optimize the remainder of your library.', 'tiny-compress-images' ), array( 'a' => array( 'href' => array() ) ) ), $link )?>
 	</p>
 </div>