feat(TestRun): adjust layout and styling

bleech · Oct 17, 2024 · ffb659a · ffb659a
1 parent 4e7d79d
commit ffb659a
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 20 deletions.
diff --git a/components/comparisons/_style.scss b/components/comparisons/_style.scss
@@ -4,6 +4,7 @@
 .vrts-comparisons {
 	--vrts-comparisons-slider-position: 50%;
 
+	container-type: inline-size;
 	display: block;
 	box-sizing: border-box;
 	border-top: 0;
@@ -152,12 +153,16 @@
 	}
 
 	&__content {
-		container-type: inline-size;
 		display: grid;
 		grid-template-columns: repeat(3, minmax(0, max-content));
 		justify-content: center;
 		gap: 0.25rem;
 		padding: 15px;
+
+		@container (max-width: 600px) {
+			gap: 0;
+			grid-template-columns: repeat(2, minmax(0, max-content));
+		}
 	}
 
 	&__figure {
@@ -190,7 +195,7 @@
 		width: 4px;
 
 		@container (max-width: 600px) {
-			margin-left: -7.5px;
+			margin-left: -9.5px;
 		}
 	}
 
@@ -212,6 +217,10 @@
 			width: 100%;
 		}
 
+		[data-vrts-comparisons-slot="base"] {
+			clip-path: inset(0 calc(100% - var(--vrts-comparisons-slider-position)) 0 0);
+		}
+
 		[data-vrts-comparisons-slot="target"] {
 			clip-path: inset(0 0 0 var(--vrts-comparisons-slider-position));
 		}
@@ -302,7 +311,7 @@
 		&::-webkit-slider-thumb {
 			appearance: none;
 			height: 100%;
-			width: 42px;
+			width: 56px;
 		}
 	}
 }
diff --git a/components/test-run-alerts/_style.scss b/components/test-run-alerts/_style.scss
@@ -9,6 +9,7 @@
 		background: #f0f0f1;
 		padding: 0;
 		height: 62px;
+		overflow: hidden;
 		transition: box-shadow 0.2s;
 
 		&[data-is-sticky="true"] {
@@ -63,15 +64,16 @@
 	&__list {
 		display: flex;
 		gap: 10px;
-		padding-bottom: 10px;
+		padding: 0 10px 10px 10px;
+		margin: 0 -10px;
 		overflow-x: scroll;
 		-webkit-overflow-scrolling: touch;
 
 		@media (min-width: 851px) {
 			flex-direction: column;
 			overflow: visible;
 			padding: 0 20px;
-			margin-bottom: 21px;
+			margin: 0 0 20px 0;
 		}
 	}
 

diff --git a/components/test-run-page/_style.scss b/components/test-run-page/_style.scss
@@ -19,20 +19,19 @@
 	--vrts-test-run-page-offset: 54px; // our header height
 
 	display: flex;
-	gap: 20px;
 	margin-right: 10px;
 	flex-direction: column;
 	min-height: 100vh;
 
 	@media (min-width: 851px) {
+		gap: 20px;
 		flex-direction: row;
 		margin-left: -20px;
 		margin-right: 20px;
 	}
 
 	&__sidebar {
 		order: 2;
-		overflow: hidden;
 
 		&::-webkit-scrollbar {
 			width: 2px;
@@ -100,13 +99,17 @@
 		}
 
 		&-navigation-info {
-			display: flex;
+			display: none;
 			align-items: center;
 			justify-content: center;
 			gap: 0.25rem;
 			margin-top: 1rem;
 			color: #757575;
 
+			@media (min-width: 851px) {
+				display: flex;
+			}
+
 			svg {
 				color: $gray-70;
 				background: $gray-5;

diff --git a/components/test-run-receipt/_style.scss b/components/test-run-receipt/_style.scss
@@ -3,11 +3,13 @@
 .vrts-test-run-receipt {
 	position: relative;
 	padding: 0 12px;
-	margin: 30px 0 30px 0;
+	margin: 30px auto 30px auto;
 	background-color: #f6f7fb;
 	box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
+	max-width: 280px;
 
 	@media (min-width: 851px) {
+		max-width: 100%;
 		margin: 8px 20px 20px;
 	}
 
@@ -84,7 +86,9 @@
 	}
 
 	&__info {
-		text-align: center;
+		display: flex;
+		gap: 10px;
+		justify-content: center;
 		font-size: 11px;
 	}
 
@@ -105,6 +109,7 @@
 		&-heading {
 			font-size: 12px;
 			font-weight: 700;
+			line-height: 1.6;
 		}
 
 		&-row {
@@ -135,6 +140,10 @@
 
 		&-heading {
 			font-size: 14px;
+
+			& > :first-child {
+				text-transform: uppercase;
+			}
 		}
 
 		&-row {
@@ -156,6 +165,8 @@
 
 		.vrts-test-run-trigger {
 			font-size: inherit;
+			margin-left: 5px;
+			margin-right: 5px;
 		}
 
 		&-notes {

diff --git a/components/test-run-receipt/index.php b/components/test-run-receipt/index.php
@@ -1,6 +1,7 @@
 <?php
 
 use Vrts\Core\Utilities\Date_Time_Helpers;
+use Vrts\Core\Utilities\Url_Helpers;
 use Vrts\Models\Test_Run;
 
 $alerts_post_ids = wp_list_pluck( $data['alerts'], 'post_id' );
@@ -30,22 +31,28 @@
 	</div>
 	<div class="vrts-test-run-receipt__pages-status">
 		<div class="vrts-test-run-receipt__pages-status-heading">
-			<span><?php esc_html_e( 'Pages', 'visual-regression-tests' ); ?></span>
+			<span><?php esc_html_e( 'Page', 'visual-regression-tests' ); ?></span>
 			<span><?php esc_html_e( 'Difference', 'visual-regression-tests' ); ?></span>
 		</div>
 		<?php
 		foreach ( $data['tests'] as $test ) :
-			$parsed_tested_url = wp_parse_url( get_permalink( $test->post_id ) );
-			$tested_url = $parsed_tested_url['path'];
 			$alert = array_values( array_filter( $data['alerts'], static function( $alert ) use ( $test ) {
 				return $alert->post_id === $test->post_id;
 			} ) );
 			$difference = $alert ? ceil( $alert[0]->differences / 4 ) : 0;
 			?>
 			<div class="vrts-test-run-receipt__pages-status-row">
-				<a href="<?php echo esc_url( get_permalink( $test->post_id ) ); ?>"><?php echo esc_html( $tested_url ); ?></a>
-				<span><?php echo $alert ? esc_html( sprintf( /* translators: %s. Test run receipt diff in pixels */ _x( '%spx', 'test run receipt difference', 'visual-regression-tests' ), esc_html( number_format_i18n( $difference ) ) ) ) : '-'; ?></span>
-				</div>
+				<a href="<?php echo esc_url( get_permalink( $test->post_id ) ); ?>"><?php echo esc_html( Url_Helpers::get_relative_permalink( $test->post_id ) ); ?></a>
+				<span>
+					<?php
+					printf(
+						/* translators: %s. Test run receipt diff in pixels */
+						esc_html_x( '%spx', 'test run receipt difference', 'visual-regression-tests' ),
+						esc_html( number_format_i18n( $difference ) )
+					);
+					?>
+				</span>
+			</div>
 		<?php endforeach; ?>
 	</div>
 	<div class="vrts-test-run-receipt__total">
@@ -62,11 +69,27 @@
 		</div>
 		<div class="vrts-test-run-receipt__total-row vrts-test-run-receipt__total-row--success">
 			<span><?php esc_html_e( 'Passed', 'visual-regression-tests' ); ?></span>
-			<span><?php echo esc_html( count( $tests_post_ids ) - count( $alerts_post_ids ) ); ?></span>
+			<span>
+				<?php
+				$passed_tests_count = count( $tests_post_ids ) - count( $alerts_post_ids );
+				printf(
+					/* translators: %s. Number of tests */
+					esc_html( _n( '%s Test', '%s Tests', $passed_tests_count, 'visual-regression-tests' ) ), esc_html( $passed_tests_count )
+				);
+				?>
+			</span>
 		</div>
 		<div class="vrts-test-run-receipt__total-row vrts-test-run-receipt__total-row--failed">
-			<span><?php esc_html_e( 'Changes Detected', 'visual-regression-tests' ); ?></span>
-			<span><?php echo esc_html( count( $alerts_post_ids ) ); ?></span>
+			<span><?php esc_html_e( 'Changes detected', 'visual-regression-tests' ); ?></span>
+			<span>
+			<?php
+				$changed_detected_count = count( $alerts_post_ids );
+				printf(
+					/* translators: %s. Number of tests */
+					esc_html( _n( '%s Test', '%s Tests', $changed_detected_count, 'visual-regression-tests' ) ), esc_html( $changed_detected_count )
+				);
+				?>
+			</span>
 		</div>
 	</div>
 	<div class="vrts-test-run-receipt__trigger">

diff --git a/includes/core/utilities/class-image-helpers.php b/includes/core/utilities/class-image-helpers.php
@@ -32,7 +32,7 @@ public static function alert_image_aspect_ratio( $alert ) {
 			return round( $meta['width'] / $meta['height'], 2 );
 		}
 
-		return 0;
+		return 0.5;
 	}
 
 	/**
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,7 +32,7 @@ public static function alert_image_aspect_ratio( $alert ) { @@
     			return round( $meta['width'] / $meta['height'], 2 );
     		}
-    		return 0;
+    		return 0.5;
     	}
     	/**
@@ Expand Down @@