report: support narrow screens #6857
Conversation
| @@ -118,6 +118,8 @@ class ReportUIFeatures { | |||
| onMediaQueryChange(mql) { | |||
| const root = this._dom.find('.lh-root', this._document); | |||
| root.classList.toggle('lh-narrow', mql.matches); | |||
| // Reset animations for the narrow view header height change. | |||
| @@ -226,8 +228,8 @@ class ReportUIFeatures { | |||
| this.headerSticky.style.transform = `translateY(${heightDiff * scrollPct * -1}px)`; | |||
| this.headerBackground.style.transform = `translateY(${scrollPct * this.headerOverlap}px)`; | |||
| this.lighthouseIcon.style.transform = | |||
| `translate3d(var(--report-width-half),` + | |||
| ` calc(-100% - ${scrollPct * this.headerOverlap * -1}px), 0) scale(${1 - scrollPct})`; | |||
| `translate3d(0,` + | |||
There was a problem hiding this comment.
you might have to explain this one to me :)
There was a problem hiding this comment.
Since the lh-lighthouse element is inside the header container now it doesn't need to be translated on the x axis since it is positioned absolutely to the bottom right corner.
There was a problem hiding this comment.
and the 100% is gone because of the bottom right corner position too?
There was a problem hiding this comment.
Yup, it had -100% on in the .lh-lighthouse class to position it before, so the new anchoring doesn't need it.
| @@ -728,6 +731,7 @@ | |||
|
|
|||
| .lh-report { | |||
| background-color: #fff; | |||
| min-width: var(--report-min-width); | |||
There was a problem hiding this comment.
this used to be only @media screen do we still want to keep that or doesn't matter?
There was a problem hiding this comment.
Hm, I don't think it really matters. I moved it here because I felt like it was always true for every screen not just max-width: 964px but I'm not sure it matters?
| top: var(--report-header-height); | ||
| right: 50%; | ||
| transform: translate3d(var(--report-width-half), -100%, 0); | ||
| bottom: -4px; |
There was a problem hiding this comment.
The lighthouse SVG element is 4px above the bottom of the svg's wrapper div (which in this screenshot is set to 0px bottom) so I moved it 4px down to match the header height exactly. I tried to fix the SVG but hand editing an SVG proved a bit difficult. So I moved the whole thing 4 px down.
| .lh-lighthouse { | ||
| position: absolute; | ||
| top: var(--report-header-height); | ||
| right: 50%; | ||
| transform: translate3d(var(--report-width-half), -100%, 0); |
There was a problem hiding this comment.
seems like these all changed because lh-lighthouse moved inside the header. what does that get us and do we know if there's a reason it was outside it to begin with? :)
There was a problem hiding this comment.
Should have included a screenshot of the current UI:
Since the lighthouse isn't tied to the bottom right of the header container it doesn't scale correctly on small screens and clips off the edge like so!
| @@ -164,11 +164,13 @@ | |||
| width: 100%; | |||
| will-change: transform; | |||
| } | |||
| .lh-narrow .lh-header-bg { | |||
| height: var(--report-header-height-narrow); | |||
There was a problem hiding this comment.
eh. i dont think we need this. the jump is a bit awkward and putting the LH behind the text isn't terrible:
but if you wanted to avoid that.. we could do max-width: 60%; on .lh-config
Transition from full width to >500px
minimum width without horizontal scroll (400px):
minimum width without horizontal scroll (1 category):
Related Issues/PRs
fixes #6645