initial
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
@import "@wordpress/base-styles/colors.native"; // stylelint-disable-line scss/at-import-partial-extension
|
||||
@import "@wordpress/base-styles/mixins";
|
||||
@import "@wordpress/base-styles/breakpoints";
|
||||
@import "@wordpress/base-styles/variables";
|
||||
@import "@wordpress/base-styles/default-custom-properties";
|
||||
|
||||
.vrts-test-run-wrap {
|
||||
|
||||
#wpfooter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wpbody-content {
|
||||
padding-bottom: 0;
|
||||
|
||||
@media (min-width: 851px) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vrts-test-run-page {
|
||||
--vrts-test-run-page-offset: 54px; // our header height
|
||||
|
||||
display: flex;
|
||||
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;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: linear-gradient(to right, #{$gray-10} 1px, transparent 1px);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $gray-20;
|
||||
}
|
||||
|
||||
@media (min-width: 851px) {
|
||||
order: -1;
|
||||
width: 280px;
|
||||
position: sticky;
|
||||
top: var(--wp-admin--admin-bar--height);
|
||||
height: calc(100vh - var(--wp-admin--admin-bar--height) - var(--vrts-test-run-page-offset));
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
&[data-vrts-fullscreen="true"] {
|
||||
overflow: auto;
|
||||
padding: 0 20px 20px 20px;
|
||||
background-color: #f0f0f1;
|
||||
}
|
||||
|
||||
@media (min-width: 851px) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&-heading {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
column-gap: 2rem;
|
||||
row-gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid $gray-10;
|
||||
|
||||
@media (min-width: 851px) {
|
||||
box-sizing: border-box;
|
||||
flex-wrap: nowrap;
|
||||
position: sticky;
|
||||
top: var(--wp-admin--admin-bar--height);
|
||||
height: 62px;
|
||||
padding: 0;
|
||||
background: #f0f0f1;
|
||||
z-index: 1;
|
||||
|
||||
[data-vrts-fullscreen="true"] & {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-navigation-info {
|
||||
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;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
<vrts-test-run-page class="vrts-test-run-page">
|
||||
<div class="vrts-test-run-page__sidebar">
|
||||
<?php vrts()->component( 'test-run-alerts', $data ); ?>
|
||||
</div>
|
||||
<div class="vrts-test-run-page__content" data-vrts-fullscreen="false">
|
||||
<div class="vrts-test-run-page__content-heading">
|
||||
<?php vrts()->component( 'test-run-info', $data['run'] ); ?>
|
||||
<?php
|
||||
vrts()->component( 'test-run-pagination', [
|
||||
'run' => $data['run'],
|
||||
'pagination' => $data['pagination'],
|
||||
'is_receipt' => $data['is_receipt'],
|
||||
] );
|
||||
?>
|
||||
</div>
|
||||
<?php if ( $data['alerts'] && ! $data['is_receipt'] ) : ?>
|
||||
<?php
|
||||
vrts()->component( 'comparisons', [
|
||||
'alert' => $data['alert'],
|
||||
'test_settings' => $data['test_settings'],
|
||||
] );
|
||||
?>
|
||||
<div class="vrts-test-run-page__content-navigation-info">
|
||||
<?php esc_html_e( 'Navigate with arrow keys', 'visual-regression-tests' ); ?>
|
||||
<?php vrts()->icon( 'arrow-up' ); ?>
|
||||
<?php vrts()->icon( 'arrow-down' ); ?>
|
||||
</div>
|
||||
<?php else : ?>
|
||||
<?php
|
||||
vrts()->component( 'test-run-success', [
|
||||
'run' => $data['run'],
|
||||
'is_receipt' => $data['is_receipt'],
|
||||
] );
|
||||
?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</vrts-test-run-page>
|
||||
@@ -0,0 +1,50 @@
|
||||
class VrtsTestRunPage extends window.HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.bindFunctions();
|
||||
this.bindEvents();
|
||||
this.isScrolling = false;
|
||||
}
|
||||
|
||||
bindFunctions() {
|
||||
this.onScroll = this.onScroll.bind( this );
|
||||
this.setOffset = this.setOffset.bind( this );
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
document.addEventListener( 'scroll', this.onScroll );
|
||||
}
|
||||
|
||||
onScroll() {
|
||||
if ( ! this.isScrolling ) {
|
||||
this.isScrolling = true;
|
||||
window.requestAnimationFrame( this.setOffset );
|
||||
}
|
||||
}
|
||||
|
||||
setOffset() {
|
||||
const offset = Math.max( 0, this.offset - window.scrollY );
|
||||
|
||||
this.style.setProperty(
|
||||
'--vrts-test-run-page-offset',
|
||||
`${ offset }px`
|
||||
);
|
||||
|
||||
this.isScrolling = false;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const rect = this.getBoundingClientRect();
|
||||
const adminBarHeight =
|
||||
document.getElementById( 'wpadminbar' ).offsetHeight;
|
||||
this.offset = rect.top + window.scrollY - adminBarHeight;
|
||||
|
||||
this.setOffset();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
document.removeEventListener( 'scroll', this.onScroll );
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define( 'vrts-test-run-page', VrtsTestRunPage );
|
||||
Reference in New Issue
Block a user