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.

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

Conversation

Projects
None yet
2 participants
@kienstra
Collaborator

kienstra commented Sep 24, 2018

  • Add more space between the list table and the filter and search box
  • Vertically center the 'double-caret' in the 'Details' column
  • Add space between 'Accept' and 'Reject' buttons.
  • In expandable 'Details' section, add space between <summary> and div.detailed
Improve styling of single error page
* Add more space between the list table and the fiter and search box
* Vertically center the 'double-caret' in the 'Details' column
* Add space between 'Accept' and 'Reject' buttons.
In expandable 'Details' section,
add space between <summary> and div.detailed
@kienstra

This comment has been minimized.

Collaborator

kienstra commented Sep 24, 2018

501f28f makes these changes to the single error URL page (#1365):

single-error-styling

Single URL page: widen the 'Error' column
As Jill mentioned, this looks narrow,
especially when expanding the details column.
This 30% width might have to change, though.
@kienstra

This comment has been minimized.

Collaborator

kienstra commented Sep 24, 2018

7df5837 widens the 'Error' column:
single-error-url-wider

kienstra added some commits Sep 25, 2018

On error index page, remove the <code> wrapper from error code
Also, apply the monospace font that
this had when it was wrapped in <code>.
On hovering over <details>, set cursor to pointer
This will make it clearer that one can
click to expand this,
just like clicking in the 'Error' column.
@kienstra

This comment has been minimized.

Collaborator

kienstra commented Sep 25, 2018

9fdd697 removes the <code> wrapper (with the gray background):
code-wrapper

@kienstra

This comment has been minimized.

Collaborator

kienstra commented Sep 25, 2018

e69d2f1 adds cursor: pointer when hovering over the <details> in the 'Summary' column:
single-error-page-cursor-pointer

Add vertical 'divider' next to the 'Accept' and 'Reject' buttons
Per the designs, this applies the 'divider.'
There are about 20px on either side of it,
per a design decision to make this space similar
to that on /wp-admin/edit.php?post_type=page,
between 'Apply' and 'All dates.'
@kienstra

This comment has been minimized.

Collaborator

kienstra commented Sep 25, 2018

c714c21 adds the 'divider' to the single error URL page, per the design:

single-error-horizontal-divider

@kienstra kienstra self-assigned this Sep 25, 2018

@kienstra kienstra referenced this pull request Sep 25, 2018

Closed

Improved “single error” by URL view #1365

10 of 10 tasks complete

@kienstra kienstra changed the title from [WIP] Improve styling of single error page to Improve styling of single error page Sep 25, 2018

On single Error URL page, change 'Accepted icon to green checkmark
Before, this was the AMP icon.
This was requested to change,
to be like the green checkmark on the
AMP Validation Error Index page.
@kienstra

This comment has been minimized.

Collaborator

kienstra commented Sep 25, 2018

22c654d changes the 'Accepted' icon on the single error URL page to be the green checkmark, like on the AMP Validation Error Index page:

single-error-url-page

Reduce vertical space between status icons
* In single error URL 'Status' box
* On 'Invalid URLs' page in 'Status' column

@kienstra kienstra changed the title from Improve styling of single error page to Improve styling of Compatibility Tool pages Sep 26, 2018

@kienstra

This comment has been minimized.

Collaborator

kienstra commented Sep 26, 2018

b204f46 reduces the space between these items in the 'Status' box:

less-space

kienstra added some commits Sep 27, 2018

Use a darker red for the 'Invalid' column, for better Accessibility
As a result of design discussion,
change this to a darker shade of red.
In the 'Invalid' column, wrap each item in a <div> and apply margin-b…
…ottom

This will give more vertical space between each item,
as a result of design feedback.
Single error term: move notice above error details
To match the design,
the 'Reject this validation error' notice
is now moved from below the details box to above it.
Also, there is less space between the boxes.
Single error term page: increase font-size of <code> in heading
As a result of design feedback,
this is now bigger,
to be closer to the font-size of h1.wp-heading-inlin
@kienstra

This comment has been minimized.

Collaborator

kienstra commented Sep 27, 2018

e4b00e7 uses a darker version of red for the 'Invalid' column, to improve accessibility:

different-color

Move the date filter to the right of the status and type filter
Applies to:
* Single error taxonomy page
* Invalid URLs page
A result of design feedback.
@kienstra

This comment has been minimized.

Collaborator

kienstra commented Sep 27, 2018

b07bdbe moves the dates filter to the right on the 'Invalid URLs' page and the single error term page:

dates-filter-moved

kienstra added some commits Sep 27, 2018

Correct an issue in the heading of the single error term page
Before, there was a padding-bottom that applied to the icon
But this isn't needed here.
So add a style rule to set it to 0.
@westonruter

@kienstra This looked good based on the demo you gave. Is there anything else here prior to merge?

@westonruter westonruter added this to the v1.0 milestone Sep 27, 2018

@kienstra

This comment has been minimized.

Collaborator

kienstra commented Sep 27, 2018

Hi @westonruter, this is ready for review.

There still might be more styling changes much later today or tomorrow, but there's no reason this can't be reviewed now.

@westonruter

This comment has been minimized.

Member

westonruter commented Sep 27, 2018

@kienstra The code looks good. So let me know when it's ready to merge.

@kienstra

This comment has been minimized.

Collaborator

kienstra commented Sep 27, 2018

Thanks, @westonruter. I think it's ready to merge now.

Any new styling changes much later today or tomorrow could be in a new PR.

@westonruter westonruter merged commit f9b3933 into develop Sep 27, 2018

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@westonruter westonruter deleted the update/styling-single-error-url branch Sep 27, 2018

@kienstra kienstra referenced this pull request Sep 27, 2018

Closed

Implement improved URL listing view #1362

1 of 19 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment