diff --git a/assets/css/admin-tables.css b/assets/css/admin-tables.css index 40f1ef39b85..aa72566453f 100644 --- a/assets/css/admin-tables.css +++ b/assets/css/admin-tables.css @@ -33,7 +33,10 @@ margin-left: 10px; } td.column-found_elements_and_attributes { - color: #c06e60; + color: #970010; +} +td.column-found_elements_and_attributes div { + margin-bottom: 0.6rem; } .column-error_status .dashicons-flag.new { color: #d98501; diff --git a/assets/css/amp-validation-error-taxonomy.css b/assets/css/amp-validation-error-taxonomy.css index ffd3b6c58b8..ed56caf5a35 100644 --- a/assets/css/amp-validation-error-taxonomy.css +++ b/assets/css/amp-validation-error-taxonomy.css @@ -6,6 +6,11 @@ width: auto; } +/* Move the 'All dates' filter to the right of the new status and type filters */ +#filter-by-date { + float: none; +} + /* Improve column widths */ td.column-details pre, td.column-sources pre { @@ -17,6 +22,10 @@ th.column-error_type { width: 15%; } +td.column-error .error-code { + font-family: Consolas, Monaco, monospace; +} + th.column-status { width: 15%; } @@ -115,6 +124,7 @@ details.single-error-detail[open] .single-error-detail-summary::after { flex-direction: column; height: 14px; padding: 0; + margin-top: 4px; background: none; border: none; cursor: pointer; @@ -138,6 +148,7 @@ details.single-error-detail[open] .single-error-detail-summary::after { .status-text { display: flex; align-items: center; + padding-bottom: 0.6rem; } .status-text::before { @@ -217,6 +228,7 @@ body.taxonomy-amp_validation_error .wp-list-table .new th.check-column input { .notice.accept-reject-error { display: flex; + margin-bottom: 0; } .notice.accept-reject-error > p { @@ -239,10 +251,19 @@ body.taxonomy-amp_validation_error .wp-list-table .new th.check-column input { /* @todo Add red colors */ } +.notice.error-details { + margin-top: 1px; +} + .wp-heading-inline .status-text { display: inline-flex; margin-left: 10px; vertical-align: middle; + padding-bottom: 0; +} + +.wp-heading-inline code { + font-size: 1rem; } /** Details post action. */ diff --git a/assets/css/amp-validation-single-error-url.css b/assets/css/amp-validation-single-error-url.css index b2ce80d67fa..aad67726cf1 100644 --- a/assets/css/amp-validation-single-error-url.css +++ b/assets/css/amp-validation-single-error-url.css @@ -20,6 +20,7 @@ justify-content: center; width: 12px; height: 18px; + margin-top: 5px; background-image: url("../images/down-triangle.svg"); background-size: contain; background-repeat: no-repeat; @@ -58,6 +59,10 @@ table.striped > tbody > tr.even { } /** Details row styles. */ +.details details.details-attributes:hover { + cursor: pointer; +} + .details ul.detailed { padding: 0 32px; margin-top: 0; @@ -65,6 +70,7 @@ table.striped > tbody > tr.even { .details div.detailed { padding-left: 30px; + margin-top: 10px; font-family: Consolas, Monaco, monospace; } @@ -88,10 +94,6 @@ table.striped > tbody > tr.even { margin-top: 0.2rem; } -#amp_validation_status #amp-enabled-icon { - margin-bottom: 1.2rem; -} - #number-errors { text-align: center; background-color: #d3d3d3b8; @@ -119,3 +121,31 @@ table.striped > tbody > tr.even { .wp-list-table th.column-status { width: 20%; } + +.wp-list-table th.column-error { + width: 30%; +} + +/** Add space between list table and the filter and search box above it. */ +#post-body-content button.action, +#post-body-content #url-post-filter, +#post-body-content .search-box { + margin-bottom: 4px; +} + +#post-body-content button.reject { + margin-left: 4px; +} + +#accept-reject-buttons:not(.hidden) { + display: inline-block; +} + +#vertical-divider { + display: inline-block; + vertical-align: middle; + width: 15px; + margin-right: 15px; + height: 30px; + border-right: 1px solid #a0a5aa; +} diff --git a/assets/js/amp-invalid-url-post-edit-screen.js b/assets/js/amp-invalid-url-post-edit-screen.js index 4a56afeb0a1..f0d4f5130af 100644 --- a/assets/js/amp-invalid-url-post-edit-screen.js +++ b/assets/js/amp-invalid-url-post-edit-screen.js @@ -323,6 +323,7 @@ const ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unu component.handleBulkActions = function handleBulkActions() { const acceptButton = document.querySelector( 'button.action.accept' ); const rejectButton = document.querySelector( 'button.action.reject' ); + const acceptAndRejectContainer = document.getElementById( 'accept-reject-buttons' ); const onChange = function( event ) { let areThereCheckedBoxes; @@ -333,8 +334,7 @@ const ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unu if ( event.target.checked ) { // This checkbox was checked, so ensure the buttons display. - acceptButton.classList.remove( 'hidden' ); - rejectButton.classList.remove( 'hidden' ); + acceptAndRejectContainer.classList.remove( 'hidden' ); } else { /* * This checkbox was unchecked. @@ -348,8 +348,7 @@ const ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unu } } ); if ( ! areThereCheckedBoxes ) { - acceptButton.classList.add( 'hidden' ); - rejectButton.classList.add( 'hidden' ); + acceptAndRejectContainer.classList.add( 'hidden' ); } } }; diff --git a/includes/validation/class-amp-invalid-url-post-type.php b/includes/validation/class-amp-invalid-url-post-type.php index 5aecab49cda..d5bdd96809e 100644 --- a/includes/validation/class-amp-invalid-url-post-type.php +++ b/includes/validation/class-amp-invalid-url-post-type.php @@ -475,7 +475,7 @@ public static function display_invalid_url_validation_error_counts_summary( $pos ', $result ); // WPCS: xss ok. + echo implode( '', $result ); // WPCS: xss ok. } /** @@ -904,7 +904,8 @@ public static function output_custom_column( $column_name, $post_id ) { } } if ( ! empty( $items ) ) { - echo implode( ',
', $items ); // WPCS: XSS OK. + $imploded_items = implode( ',
', $items ); + echo sprintf( '
%s
', $imploded_items ); // WPCS: XSS OK. } else { esc_html_e( '--', 'amp' ); } @@ -1210,15 +1211,7 @@ public static function print_admin_notice() { $error_code = isset( $description['code'] ) ? $description['code'] : 'error'; $error_title = \AMP_Validation_Error_Taxonomy::get_error_title_from_code( $error_code ); $validation_error = json_decode( $error->description, true ); - ?> -
- -
- - AMP_Validation_Error_Taxonomy::VALIDATION_ERROR_ACCEPT_ACTION, @@ -1227,7 +1220,7 @@ public static function print_admin_notice() { ), AMP_Validation_Error_Taxonomy::VALIDATION_ERROR_ACCEPT_ACTION ); - $reject_all_url = wp_nonce_url( + $reject_all_url = wp_nonce_url( add_query_arg( array( 'action' => AMP_Validation_Error_Taxonomy::VALIDATION_ERROR_REJECT_ACTION, @@ -1282,6 +1275,14 @@ public static function print_admin_notice() { echo '
'; } + ?> +
+ +
+ %s%s', esc_html( $error_title ), @@ -1772,8 +1773,11 @@ public static function render_single_url_list_table( $post ) { search_box( esc_html__( 'Search Errors', 'amp' ), 'invalid-url-search' ); ?> - - +
diff --git a/includes/validation/class-amp-validation-error-taxonomy.php b/includes/validation/class-amp-validation-error-taxonomy.php index 453c03b9216..8e7d0cd2f51 100644 --- a/includes/validation/class-amp-validation-error-taxonomy.php +++ b/includes/validation/class-amp-validation-error-taxonomy.php @@ -1662,7 +1662,7 @@ public static function filter_manage_custom_columns( $content, $column_name, $te } else { $content .= '

'; $content .= sprintf( - '%s', + '%s', admin_url( add_query_arg( array( self::TAXONOMY_SLUG => $term->name, 'post_type' => AMP_Invalid_URL_Post_Type::POST_TYPE_SLUG, diff --git a/tests/validation/test-class-amp-invalid-url-post-type.php b/tests/validation/test-class-amp-invalid-url-post-type.php index 6c979526001..486cae2220e 100644 --- a/tests/validation/test-class-amp-invalid-url-post-type.php +++ b/tests/validation/test-class-amp-invalid-url-post-type.php @@ -1237,8 +1237,9 @@ public function test_render_single_url_list_table() { AMP_Invalid_URL_Post_Type::render_single_url_list_table( $post_correct_post_type ); $output = ob_get_clean(); $this->assertContains( '

', $output ); - $this->assertContains( '