Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve styling of Compatibility Tool pages #1462

Merged
merged 15 commits into from
Sep 27, 2018
Merged

Improve styling of Compatibility Tool pages #1462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
501f28f
Improve styling of single error page
kienstra Sep 24, 2018
7df5837
Single URL page: widen the 'Error' column
kienstra Sep 24, 2018
9fdd697
On error index page, remove the <code> wrapper from error code
kienstra Sep 25, 2018
e69d2f1
On hovering over <details>, set cursor to pointer
kienstra Sep 25, 2018
c714c21
Add vertical 'divider' next to the 'Accept' and 'Reject' buttons
kienstra Sep 25, 2018
22c654d
On single Error URL page, change 'Accepted icon to green checkmark
kienstra Sep 25, 2018
b204f46
Reduce vertical space between status icons
kienstra Sep 26, 2018
aa26420
Merge branch 'develop' into update/styling-single-error-url
kienstra Sep 27, 2018
e4b00e7
Use a darker red for the 'Invalid' column, for better Accessibility
kienstra Sep 27, 2018
5ac6ed9
In the 'Invalid' column, wrap each item in a <div> and apply margin-b…
kienstra Sep 27, 2018
0d1e255
Single error term: move notice above error details
kienstra Sep 27, 2018
d52dfea
Single error term page: increase font-size of <code> in heading
kienstra Sep 27, 2018
b07bdbe
Move the date filter to the right of the status and type filter
kienstra Sep 27, 2018
2f492b2
Correct an issue in the heading of the single error term page
kienstra Sep 27, 2018
862cbb3
Merge branch 'develop' into update/styling-single-error-url
kienstra Sep 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion assets/css/admin-tables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
21 changes: 21 additions & 0 deletions assets/css/amp-validation-error-taxonomy.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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%;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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. */
Expand Down
38 changes: 34 additions & 4 deletions assets/css/amp-validation-single-error-url.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -58,13 +59,18 @@ table.striped > tbody > tr.even {
}

/** Details row styles. */
.details details.details-attributes:hover {
cursor: pointer;
}

.details ul.detailed {
padding: 0 32px;
margin-top: 0;
}

.details div.detailed {
padding-left: 30px;
margin-top: 10px;
font-family: Consolas, Monaco, monospace;
}

Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
7 changes: 3 additions & 4 deletions assets/js/amp-invalid-url-post-edit-screen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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.
Expand All @@ -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' );
}
}
};
Expand Down
32 changes: 18 additions & 14 deletions includes/validation/class-amp-invalid-url-post-type.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,7 +475,7 @@ public static function display_invalid_url_validation_error_counts_summary( $pos
</span>
<?php
}
echo implode( '<br>', $result ); // WPCS: xss ok.
echo implode( '', $result ); // WPCS: xss ok.
}

/**
Expand Down Expand Up @@ -904,7 +904,8 @@ public static function output_custom_column( $column_name, $post_id ) {
}
}
if ( ! empty( $items ) ) {
echo implode( ',<br/>', $items ); // WPCS: XSS OK.
$imploded_items = implode( ',</div><div>', $items );
echo sprintf( '<div>%s</div>', $imploded_items ); // WPCS: XSS OK.
} else {
esc_html_e( '--', 'amp' );
}
Expand Down Expand Up @@ -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 );
?>
<div class="notice">
<ul>
<?php echo AMP_Validation_Error_Taxonomy::render_single_url_error_details( $validation_error, $error ); // WPCS : XSS OK. ?>
</ul>
</div>

<?php
$accept_all_url = wp_nonce_url(
$accept_all_url = wp_nonce_url(
add_query_arg(
array(
'action' => AMP_Validation_Error_Taxonomy::VALIDATION_ERROR_ACCEPT_ACTION,
Expand All @@ -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,
Expand Down Expand Up @@ -1282,6 +1275,14 @@ public static function print_admin_notice() {
echo '</div>';
}

?>
<div class="notice error-details">
<ul>
<?php echo AMP_Validation_Error_Taxonomy::render_single_url_error_details( $validation_error, $error ); // WPCS : XSS OK. ?>
</ul>
</div>
<?php

$heading = sprintf(
'%s: <code>%s</code>%s',
esc_html( $error_title ),
Expand Down Expand Up @@ -1772,8 +1773,11 @@ public static function render_single_url_list_table( $post ) {
<?php $wp_list_table->search_box( esc_html__( 'Search Errors', 'amp' ), 'invalid-url-search' ); ?>
</form>

<button type="button" class="hidden button action accept"><?php esc_html_e( 'Accept', 'amp' ); ?></button>
<button type="button" class="hidden button action reject"><?php esc_html_e( 'Reject', 'amp' ); ?></button>
<div id="accept-reject-buttons" class="hidden">
<button type="button" class="button action accept"><?php esc_html_e( 'Accept', 'amp' ); ?></button>
<button type="button" class="button action reject"><?php esc_html_e( 'Reject', 'amp' ); ?></button>
<div id="vertical-divider"></div>
</div>
<div id="url-post-filter" class="alignleft actions">
<?php AMP_Validation_Error_Taxonomy::render_error_type_filter(); ?>
</div>
Expand Down
2 changes: 1 addition & 1 deletion includes/validation/class-amp-validation-error-taxonomy.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1662,7 +1662,7 @@ public static function filter_manage_custom_columns( $content, $column_name, $te
} else {
$content .= '<p>';
$content .= sprintf(
'<a href="%s"><code>%s</code></a>',
'<a href="%s" class="error-code">%s</a>',
admin_url( add_query_arg( array(
self::TAXONOMY_SLUG => $term->name,
'post_type' => AMP_Invalid_URL_Post_Type::POST_TYPE_SLUG,
Expand Down
5 changes: 3 additions & 2 deletions tests/validation/test-class-amp-invalid-url-post-type.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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( '<form class="search-form wp-clearfix" method="get">', $output );
$this->assertContains( '<button type="button" class="hidden button action accept">', $output );
$this->assertContains( '<button type="button" class="hidden button action reject">', $output );
$this->assertContains( '<div id="accept-reject-buttons" class="hidden">', $output );
$this->assertContains( '<button type="button" class="button action accept">', $output );
$this->assertContains( '<button type="button" class="button action reject">', $output );
}

/**
Expand Down