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.

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

@kienstra
Copy link
Contributor

@kienstra 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
* 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
Copy link
Contributor Author

@kienstra kienstra commented Sep 24, 2018

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

single-error-styling

As Jill mentioned, this looks narrow,
especially when expanding the details column.
This 30% width might have to change, though.
@kienstra
Copy link
Contributor Author

@kienstra kienstra commented Sep 24, 2018

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

kienstra added 2 commits Sep 25, 2018
Also, apply the monospace font that
this had when it was wrapped in <code>.
This will make it clearer that one can
click to expand this,
just like clicking in the 'Error' column.
@kienstra
Copy link
Contributor Author

@kienstra kienstra commented Sep 25, 2018

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

@kienstra
Copy link
Contributor Author

@kienstra kienstra commented Sep 25, 2018

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

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
Copy link
Contributor Author

@kienstra 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 changed the title [WIP] Improve styling of single error page Improve styling of single error page Sep 25, 2018
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
Copy link
Contributor Author

@kienstra 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

* In single error URL 'Status' box
* On 'Invalid URLs' page in 'Status' column
@kienstra kienstra changed the title Improve styling of single error page Improve styling of Compatibility Tool pages Sep 26, 2018
@kienstra
Copy link
Contributor Author

@kienstra kienstra commented Sep 26, 2018

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

less-space

kienstra added 5 commits Sep 27, 2018
As a result of design discussion,
change this to a darker shade of red.
…ottom

This will give more vertical space between each item,
as a result of design feedback.
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.
As a result of design feedback,
this is now bigger,
to be closer to the font-size of h1.wp-heading-inlin
@kienstra
Copy link
Contributor Author

@kienstra kienstra commented Sep 27, 2018

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

different-color

Applies to:
* Single error taxonomy page
* Invalid URLs page
A result of design feedback.
@kienstra
Copy link
Contributor Author

@kienstra 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 2 commits Sep 27, 2018
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.
Copy link
Member

@westonruter westonruter left a comment

@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
Copy link
Contributor Author

@kienstra 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
Copy link
Member

@westonruter westonruter commented Sep 27, 2018

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

@kienstra
Copy link
Contributor Author

@kienstra 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
@westonruter westonruter deleted the update/styling-single-error-url branch Sep 27, 2018
@kienstra kienstra mentioned this pull request Sep 27, 2018
19 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants