Addons-frontend: Update primary hero gradient to be full-width of viewport

[muffinresearch]

Via feedback from Emanuela:

The primary hero gradient should be updated to be full width across the viewport. The swoosh will also move left, which means on a wider page it won't overlay the image. Update: Swooshes are being deprecated so this can be removed.

The content of the primary hero will stay centred and limited to the max-width as per the rest of the content currently.

The padding/margin above the gradient will need to be removed.

Special consideration will need to be given to where notifications should appear. They should be above the hero content but on top of the full-width gradient.

This mock shows what it looks like albeit without demonstrating the gutter that will appear on a larger screen:

[bobsilverberg]

Thanks @muffinresearch. This looks like the original mocks, and at some point it was decided that doing this was out of scope at this time. I guess that has changed?

[muffinresearch]

Thanks @muffinresearch. This looks like the original mocks, and at some point it was decided that doing this was out of scope at this time. I guess that has changed?

Yeah, the intent to have this full-width wasn't obvious initially back when we were trying to pull this together quickly as a static version. Based on how Emanuela has described it I think it should work, it just will require some refactoring of markup to allow for it.

[muffinresearch]

@bobsilverberg note the update to the issue - based on the frontend review call the swoosh (aka noodles) are now deprecated so that can just be removed. Let me know if you'd like a new issue for that.

[bobsilverberg]

@muffinresearch I just want to clarify: we're removing the decorations/swooshes entirely now?

[muffinresearch]

@muffinresearch I just want to clarify: we're removing the decorations/swooshes entirely now?

Yes.

[bobsilverberg]

@brassy- Looking at the mock, it looks like the gradient now starts at the very top of the page, so the nav bar is included in the gradient, as opposed to just having a black background as it does in the current site. Is that accurate? Or will the nav bar remain solid black and only the hero area will include the gradient?

[bobsilverberg]

@brassy- More on the above: If the gradient from the hero is meant to start at the top of the screen, and therefore span across both the nav bar and the hero, how will this work on pages without the hero (which is every page other than the home page)? The colours for the gradient are currently based on data we get back from the hero API, but we shouldn't be required to call the hero API on every page in order to get a gradient. We could just use a default gradient on pages that are not the home page, but this would mean that when navigating both from and to the home page the gradient for the nav bar could change, which seems like it would be very distracting to me.

[jvillalobos]

The mock seems to be combining the hero area and the Skyline rebranding, which is out of scope for this project. The header shouldn't change for now.

[bobsilverberg]

Thanks @jvillalobos

[bobsilverberg]

@brassy- @muffinresearch had come concerns about the width of the content in the "full-width" primary hero. Looking at this screenshot, you can see that the content, not just the gradient, occupies the full width. Should this be changed so that the content (and also the site notification, which is the yellow message bar) are constrained to the width of the other shelves on the home page, such as the secondary hero and the Recommended extensions shelf?

[bobsilverberg]

@brassy- Here's an example where the width is constrained, and I think it looks better. Maybe this is what you were after all along, but it wasn't clear from the mocks.

[brassy-]

Yes, the second screen is what we want to achieve!

Thank you for keeping me in the loop!

Il giorno mer 2 ott 2019 alle 20:48 Bob Silverberg [e-mail]
ha scritto:

@brassy- https://github.com/brassy- Here's an example where the width
is constrained, and I think it looks better. Maybe this is what you were
after all along, but it wasn't clear from the mocks.

[image: Screenshot 2019-10-02 13 56 17]
https://user-images.githubusercontent.com/142755/66072752-a49ed700-e523-11e9-8d32-35051b3c6192.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mozilla/addons-frontend/issues/8623?email_source=notifications&email_token=ABQEPQ6NUGGUAAIPVGAJAJTQMTUH5A5CNFSM4IYI7XBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAFZC4Q#issuecomment-537629042,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABQEPQYBARPDKLOAMQUKUY3QMTUH5ANCNFSM4IYI7XBA
.

[AlexandraMoga]

Verified fixed on -dev:

[large screen]

[mobile]

[AlexandraMoga]

@bobsilverberg forgot to ask if the default header color to be used across the site should be #20123a (ink-80) now?

Previously, the header color was #0f1126

[bobsilverberg]

@bobsilverberg forgot to ask if the default header color to be used across the site should be #20123a (ink-80) now?

Previously, the header color was #0f1126

Yes, if the new hero elements are enabled, then the default background colour for the header, on every page, should be #20123a.