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

Jump to bottom

fix(report): align table headings & columns left & right #6063

Merged
merged 3 commits into from
Sep 20, 2018
Merged

fix(report): align table headings & columns left & right #6063

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d3436e4
fix(report): align table headings & columns left & right
wardpeet Sep 19, 2018
ad3c88c
nuke whiteline
wardpeet Sep 19, 2018
c10b7aa
add all possible column items to the list
wardpeet Sep 20, 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
7 changes: 6 additions & 1 deletion lighthouse-core/report/html/report-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -907,18 +907,23 @@ summary.lh-passed-audits-summary {
}

.lh-table-column--text,
.lh-table-column--url,
.lh-table-column--node {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you write a lil script that goes over an LHR and pulls out all these itemTypes? it'll be easier to assert we've accounted for all of them. :)
you could just add in a css comment here.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do

Copy link
Collaborator Author

@wardpeet wardpeet Sep 20, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Array.from(new Set($$('[class*="lh-table-column--"]').map(el => el.className)))

  • lh-table-column--thumbnail
  • lh-table-column--url
  • lh-table-column--bytes
  • lh-table-column--timespanMs
  • lh-table-column--ms
  • lh-table-column--text
  • lh-table-column--empty
  • lh-table-column--code
  • lh-table-column--node

Copy link
Member

@exterkamp exterkamp Sep 20, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does .lh-table-column--code belong in this list?

In this table, the heading is centered, but the lh-code is left aligned:
--code

text-align: left;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need to write this, or is it the default?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

or i guess for 'td' this'll be redundant but neccessary for the 'th's?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes th center by default I could override the default th behavior

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sg. lets add a comment of /* Looks unnecessary, but mostly for keeping the <th>s left-aligned */

}

.lh-table-column--bytes,
.lh-table-column--timespanMs,
.lh-table-column--ms {
text-align: right;
}


.lh-table-column--thumbnail {
width: calc(var(--image-preview-size) * 2);
}

.lh-table-column--url {
text-align: left;
min-width: 250px;
white-space: nowrap;
max-width: 0;
Expand Down