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

Report: header sticks to top #1121

Merged
merged 3 commits into from
Dec 9, 2016
Merged

Report: header sticks to top #1121

merged 3 commits into from
Dec 9, 2016

Conversation

ebidel
Copy link
Contributor

@ebidel ebidel commented Dec 8, 2016

R: all

This sticks the report header to the top of the page as you scroll. I think this is a nice change to make the share/print button always visible (e.g. LH viewer, devtools).

@ebidel
Copy link
Contributor Author

ebidel commented Dec 8, 2016

Don't look at this yet. Not ready.

@ebidel ebidel changed the title Report: header sticks to top (WIP) Report: header sticks to top Dec 8, 2016
@ebidel
Copy link
Contributor Author

ebidel commented Dec 8, 2016

Ready

@ebidel ebidel changed the title (WIP) Report: header sticks to top Report: header sticks to top Dec 8, 2016
Copy link
Member

@paulirish paulirish left a comment

Choose a reason for hiding this comment

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

nice nice. a few things.

@@ -78,6 +82,11 @@ html, body {
height: 100%;
}

/* When deep linking to a section, bump the headind down so it's not covered by the header. */
Copy link
Member

Choose a reason for hiding this comment

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

headind typo

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

background: #FFFFFF;
min-width: 185px;
/*min-width: 185px;*/
Copy link
Member

Choose a reason for hiding this comment

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

^ ^

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
padding: 0 var(--heading-line-height);
position: fixed;
z-index: 1;
Copy link
Member

Choose a reason for hiding this comment

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

do me a solid and add will-change: transform on here as well? for lo-dpi chrome desktop users.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

.report-body__menu-container {
height: 100%;
width: 100%;
min-width: 230px;
max-width: 1280px;
max-width: var(--report-width);
position: fixed;
Copy link
Member

Choose a reason for hiding this comment

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

can u add will-change to this one as well?

Copy link
Contributor Author

@ebidel ebidel Dec 8, 2016

Choose a reason for hiding this comment

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

done.

I was curious about the layout of the app. It seems really funky to use pos fixed, transforms, and negative margins. What's up with that?

Copy link
Member

Choose a reason for hiding this comment

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

the negative margins comes from @paullewis. tbh I've never used that technique and am not sure why we do it like that. :)

@ebidel
Copy link
Contributor Author

ebidel commented Dec 8, 2016

PTAL

Copy link
Member

@paulirish paulirish left a comment

Choose a reason for hiding this comment

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

😍

@paulirish paulirish merged commit 8f7e572 into master Dec 9, 2016
@paulirish paulirish deleted the mobile branch December 9, 2016 01:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants