diff --git a/components/test-run-alerts/index.php b/components/test-run-alerts/index.php index 490aa33..741e51d 100644 --- a/components/test-run-alerts/index.php +++ b/components/test-run-alerts/index.php @@ -63,27 +63,35 @@ class="vrts-test-run-alerts__card-link" - component( 'test-run-receipt', $data ); ?> + diff --git a/components/test-run-alerts/script.js b/components/test-run-alerts/script.js index 22aa982..553663e 100644 --- a/components/test-run-alerts/script.js +++ b/components/test-run-alerts/script.js @@ -150,7 +150,9 @@ class VrtsTestRunAlerts extends window.HTMLElement { } const href = $el.getAttribute( 'href' ); - const $comparisons = document.querySelector( 'vrts-comparisons' ); + const $content = + document.querySelector( 'vrts-comparisons' ) || + document.querySelector( 'vrts-test-run-success' ); const $pagination = document.querySelector( 'vrts-test-run-pagination' ); @@ -162,7 +164,7 @@ class VrtsTestRunAlerts extends window.HTMLElement { $el.setAttribute( 'data-vrts-current', 'true' ); const timeout = setTimeout( () => { - $comparisons.setAttribute( 'data-vrts-loading', 'true' ); + $content.setAttribute( 'data-vrts-loading', 'true' ); }, 200 ); fetch( href ) @@ -173,8 +175,9 @@ class VrtsTestRunAlerts extends window.HTMLElement { const parser = new window.DOMParser(); const $html = parser.parseFromString( data, 'text/html' ); - const $newComparisons = - $html.querySelector( 'vrts-comparisons' ); + const $newContent = + $html.querySelector( 'vrts-comparisons' ) || + $html.querySelector( 'vrts-test-run-success' ); const $newPagination = $html.querySelector( 'vrts-test-run-pagination' ); @@ -182,12 +185,12 @@ class VrtsTestRunAlerts extends window.HTMLElement { window.history.replaceState( {}, '', href ); window.scrollTo( { - top: $comparisons.offsetTop - 62, + top: $content.offsetTop - 62, behavior: 'smooth', } ); - if ( $newComparisons ) { - $comparisons.replaceWith( $newComparisons ); + if ( $newContent ) { + $content.replaceWith( $newContent ); } if ( $newPagination ) { diff --git a/components/test-run-page/index.php b/components/test-run-page/index.php index 7767002..4dc330a 100644 --- a/components/test-run-page/index.php +++ b/components/test-run-page/index.php @@ -5,9 +5,15 @@
component( 'test-run-info', $data['run'] ); ?> - component( 'test-run-pagination', $data['pagination'] ); ?> + component( 'test-run-pagination', [ + 'run' => $data['run'], + 'pagination' => $data['pagination'], + 'is_receipt' => $data['is_receipt'], + ] ); + ?>
- + component( 'comparisons', [ 'alert' => $data['alert'], @@ -20,7 +26,11 @@ icon( 'arrow-down' ); ?>
- component( 'test-run-success' ); ?> + component( 'test-run-success', [ + 'is_receipt' => $data['is_receipt'], + ] ); + ?> diff --git a/components/test-run-pagination/index.php b/components/test-run-pagination/index.php index 2618c36..3eb7be8 100644 --- a/components/test-run-pagination/index.php +++ b/components/test-run-pagination/index.php @@ -1,7 +1,9 @@ - > + > - > + > diff --git a/components/test-run-pagination/script.js b/components/test-run-pagination/script.js index e95e29f..416b363 100644 --- a/components/test-run-pagination/script.js +++ b/components/test-run-pagination/script.js @@ -28,7 +28,7 @@ class VrtsTestRunPagination extends window.HTMLElement { e.preventDefault(); const $el = e.currentTarget; const nextAlertId = $el.getAttribute( 'data-vrts-alert-id' ); - const $nextAlert = document.getElementById( + let $nextAlert = document.getElementById( `vrts-alert-${ nextAlertId }` ); @@ -37,7 +37,9 @@ class VrtsTestRunPagination extends window.HTMLElement { } const href = $el.getAttribute( 'href' ); - const $comparisons = document.querySelector( 'vrts-comparisons' ); + const $content = + document.querySelector( 'vrts-comparisons' ) || + document.querySelector( 'vrts-test-run-success' ); const $sidebar = document.querySelector( '.vrts-test-run-page__sidebar' ); @@ -52,15 +54,22 @@ class VrtsTestRunPagination extends window.HTMLElement { let interval = null; const timeout = setTimeout( () => { - $comparisons.setAttribute( 'data-vrts-loading', 'true' ); + $content.setAttribute( 'data-vrts-loading', 'true' ); const loadingStartTime = window.Date.now(); interval = setInterval( () => { loadingElapsedTime = window.Date.now() - loadingStartTime; }, 50 ); }, 200 ); + let offsetTop = 0; + + while ( $nextAlert && $nextAlert !== $sidebar ) { + offsetTop += $nextAlert.offsetTop; + $nextAlert = $nextAlert.offsetParent; + } + $sidebar.scrollTo( { - top: $nextAlert.offsetTop - 100, + top: offsetTop - 82, behavior: 'smooth', } ); @@ -72,8 +81,9 @@ class VrtsTestRunPagination extends window.HTMLElement { const parser = new window.DOMParser(); const $html = parser.parseFromString( data, 'text/html' ); - const $newComparisons = - $html.querySelector( 'vrts-comparisons' ); + const $newContent = + $html.querySelector( 'vrts-comparisons' ) || + $html.querySelector( 'vrts-test-run-success' ); const $newPagination = $html.querySelector( 'vrts-test-run-pagination' ); @@ -81,7 +91,7 @@ class VrtsTestRunPagination extends window.HTMLElement { window.history.replaceState( {}, '', href ); window.scrollTo( { - top: $comparisons.offsetTop - 62, + top: $content.offsetTop - 62, behavior: 'smooth', } ); @@ -91,8 +101,8 @@ class VrtsTestRunPagination extends window.HTMLElement { : 0; setTimeout( () => { - if ( $newComparisons ) { - $comparisons.replaceWith( $newComparisons ); + if ( $newContent ) { + $content.replaceWith( $newContent ); } if ( $newPagination ) { diff --git a/components/test-run-receipt/_style.scss b/components/test-run-receipt/_style.scss index 6b56b0c..782c32a 100644 --- a/components/test-run-receipt/_style.scss +++ b/components/test-run-receipt/_style.scss @@ -5,37 +5,43 @@ padding: 0 12px; margin: 30px auto 30px auto; background-color: #f6f7fb; - box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.07); max-width: 280px; + transition: box-shadow 0.2s; @media (min-width: 851px) { max-width: 100%; margin: 8px 20px 20px; } + &:hover, + &:has(:focus-within) { + box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.15); + } + &::before, &::after { - --mask: radial-gradient(10px at top, #0000 97%, #000) 50% / 18.5px 100%; + --vrts-test-run-receipt-mask: radial-gradient(10px at top, #0000 97%, #000) 50% / 18.5px 100%; position: absolute; left: 0; right: 0; bottom: 100%; content: ""; - mask: var(--mask); + mask: var(--vrts-test-run-receipt-mask); display: block; height: 10px; background: inherit; } &::after { - --mask: radial-gradient(10px at bottom, #0000 97%, #000) 50% / 18.5px 100%; + --vrts-test-run-receipt-mask: radial-gradient(10px at bottom, #0000 97%, #000) 50% / 18.5px 100%; bottom: -10px; } > * { padding: 12px 0; - &:not(:last-child) { + &:where(:not(:last-child)) { border-bottom: 1px dashed #c3c4c7; } } @@ -48,6 +54,22 @@ left: 0; } + a { + z-index: 2; + } + + &__link { + display: block; + border: none; + position: absolute; + inset: 0; + + &:focus { + outline: 0; + box-shadow: none; + } + } + &__header { display: flex; flex-direction: column; diff --git a/components/test-run-receipt/index.php b/components/test-run-receipt/index.php index 7c05c95..9fcf72c 100644 --- a/components/test-run-receipt/index.php +++ b/components/test-run-receipt/index.php @@ -12,6 +12,7 @@ ?>
+