[FxA] Header behavior at smaller widths?

[jaredhirsch]

Not sure if the FxA spec was intended to capture behavior for narrower screens, but it seems that the basic shot info should probably be visible, while the logo and blue upsell bar could be smaller or hidden, and the tools could be collapsed into a hamburger menu.

[youwenliang]

Something like this should work:

And the blue bar should be replace with this: #4790

Measurements:
https://mozilla.github.io/testpilot-assets/Firefox_Screenshots/FxA_Responsive/

[punamdahiya]

@youwenliang Clarifying your last comment on blue bar / advertising banner, Is that replacing one spec out in #4684

[jaredhirsch]

@youwenliang Thanks for the spec. Some questions for you:

Title text at >1024px width:

Currently, the title text is hidden by the buttons, but this is the only piece of user-editable text on the page, so I think it would make sense to try to show more of the text.

In the spec, for widths greater than 1024px, there will be 8 buttons that are each 96px wide, plus 16px of left-margin for the title, leaving 1024 - 768 - 16 = 240px for the title text. With a font size of 32px, most of the text beyond 10-15 characters will be hidden.

Could we display more of the title text by wrapping the text around, or collapsing the buttons to a smaller width when they are not hovered?

---

Questions about smaller widths: right now, the header layout changes at 718px. Here's the current behavior below 718px (non-owner shot view):

Image zoom: Note that the image continuously zooms to fit the screen. Do you want to change to a fixed image width, or keep it at 100%? If we switch to fixed, what should the width be, and how should we handle overflow on small screens / small widths?

Title/domain text sizing: Right now, the title and domain text are sized differently at small widths. Do you want to keep the current sizing, or change it to large title / small domain, as shown in the spec?

Header layout at small sizes: The title/domain text are currently shifted under a mostly-empty header at small sizes, which looks awkward. This seems like a bug to me. Should we try to fit everything onto one line?

Another bit of input related to header layout at small sizes: John suggested getting rid of the toolbar buttons at small sizes, since the flag button is moving into the footer, and users can download the image or copy the shot page URL using mobile OS built-in tools. This makes sense to me for non-owners, but I'm not sure how it should work once users can log into the site on mobile browsers with FxA.

[punamdahiya]

@youwenliang Thanks for helping figure the new UI. Adding few questions to list above

a) Should we hide promo panel (#4724) when we are displaying on-boarding dialog in #4790
b) For width < 1024 should promo panel be above Menu doorhanger

This is how it shows up with #4685 fix

[youwenliang]

@youwenliang Thanks for the spec. Some questions for you:

Title text at >1024px width:

Currently, the title text is hidden by the buttons, but this is the only piece of user-editable text on the page, so I think it would make sense to try to show more of the text.

In the spec, for widths greater than 1024px, there will be 8 buttons that are each 96px wide, plus 16px of left-margin for the title, leaving 1024 - 768 - 16 = 240px for the title text. With a font size of 32px, most of the text beyond 10-15 characters will be hidden.

Could we display more of the title text by wrapping the text around, or collapsing the buttons to a smaller width when they are not hovered?

I'll think about this, probably collapsing the buttons to a smaller width.

Image zoom: Note that the image continuously zooms to fit the screen. Do you want to change to a fixed image width, or keep it at 100%? If we switch to fixed, what should the width be, and how should we handle overflow on small screens / small widths?

I think the current image resizing with the window is good. (I think the image right now is inside a max-width 90% clip-container, and if the image is smaller than the window size then just show the original image size) The gif image I post above is in Sketch so I can't manipulate the image zoom effect, you can ignore that.

Title/domain text sizing: Right now, the title and domain text are sized differently at small widths. Do you want to keep the current sizing, or change it to large title / small domain, as shown in the spec?

Header layout at small sizes: The title/domain text are currently shifted under a mostly-empty header at small sizes, which looks awkward. This seems like a bug to me. Should we try to fit everything onto one line?

We can keep the different sizes for different width so that we can have more space in small widths and try to keep everything in one line. (I'll update the spec accordingly)

Another bit of input related to header layout at small sizes: John suggested getting rid of the toolbar buttons at small sizes, since the flag button is moving into the footer, and users can download the image or copy the shot page URL using mobile OS built-in tools. This makes sense to me for non-owners, but I'm not sure how it should work once users can log into the site on mobile browsers with FxA.

I'll update a mobile spec for this, thanks for the feedback!

[youwenliang]

@youwenliang Thanks for helping figure the new UI. Adding few questions to list above

a) Should we hide promo panel (#4724) when we are displaying on-boarding dialog in #4790

yes

b) For width < 1024 should promo panel be above Menu doorhanger

yes, and we should add a star badge to the menu icon also (will disappear when menu is open)

[punamdahiya]

b) For width < 1024 should promo panel be above Menu doorhanger

yes, and we should add a star badge to the menu icon also (will disappear when menu is open)

That means, Menu doorhanger /dialog is not visible by default on mobile or smaller width and opens on click of menu icon?

[youwenliang]

@youwenliang Clarifying your last comment on blue bar / advertising banner, Is that replacing one spec out in #4684

I asked John, the onboarding pop-up is different from the banner there, so not replacing. The banner is for promotional stuff and for none-screenshot users or none firefox users. The onboarding pop-up is for first time screenshot users or users who see the new FxA update for the first time.

[youwenliang]

b) For width < 1024 should promo panel be above Menu doorhanger

yes, and we should add a star badge to the menu icon also (will disappear when menu is open)

That means, Menu doorhanger /dialog is not visible by default on mobile or smaller width and opens on click of menu icon?

I'm working on a different treatment here and will discuss with John later. Will update the spec here to clarify things.

[youwenliang]

So here's another spin for the smaller width idea:
https://mozilla.github.io/testpilot-assets/Firefox_Screenshots/FxA_Shot_Detail/#artboard1
https://mozilla.github.io/testpilot-assets/Firefox_Screenshots/FxA_Shot_Detail/#artboard0

Basically, I move all the action button except "Settings" to a centered floating panel. I think "Settings" serves a different purpose here, that's why I separate that.

Since there will be no label for the centered action buttons, I would add tooltips if a user hovers on the buttons. (as shown in the measurement)

The navigation bar is also responsive now, with 96px height ( width > 719px) and 70px height (width <= 719px), the text size also changes and the action buttons (all shots and settings) will become icon only in smaller width.

I mock this up here so you can resize the window to see how it works:
https://youwenliang.github.io/ss-fxa/

@6a68 @punamdahiya Let me know if this is reasonable, thanks!

[punamdahiya]

So here's another spin for the smaller width idea:
https://mozilla.github.io/testpilot-assets/Firefox_Screenshots/FxA_Shot_Detail/#artboard1
https://mozilla.github.io/testpilot-assets/Firefox_Screenshots/FxA_Shot_Detail/#artboard0

Basically, I move all the action button except "Settings" to a centered floating panel. I think "Settings" serves a different purpose here, that's why I separate that.

Since there will be no label for the centered action buttons, I would add tooltips if a user hovers on the buttons. (as shown in the measurement)

The navigation bar is also responsive now, with 96px height ( width > 719px) and 70px height (width <= 719px), the text size also changes and the action buttons (all shots and settings) will become icon only in smaller width.

I mock this up here so you can resize the window to see how it works:
https://youwenliang.github.io/ss-fxa/

@6a68 @punamdahiya Let me know if this is reasonable, thanks!

LGTM and should work. Thanks!

[johngruen]

Proposal two looks significantly easier to implement. Let's do this one.

https://mozilla.github.io/testpilot-assets/Firefox_Screenshots/FxA_Shot_Detail/#artboard0

[youwenliang]

Proposal two looks significantly easier to implement. Let's do this one.

https://mozilla.github.io/testpilot-assets/Firefox_Screenshots/FxA_Shot_Detail/#artboard0

@johngruen
This is actually not two proposals, the first one is for window width > 719 while the second one is for window width <= 719. But, we can definitely make things easier and use the same treatment for different window sizes. (which also solves #4892)

[punamdahiya]

@johngruen as discussed in today standup, reminder to add your comments on decision of header at different widths.

[johngruen]

okay here's what i think we should do....

I think we can start by splitting the difference on Mark's spec...as follows:

1. I think we should make a pixel perfect implementation of mark's larger-width spec and focus on the small one.

2. The code for the header should be structured like this (i'm using made up names here, but it's the structure that's important)

HeaderBlock
  MainHeader
    MyShotsButton || FirefoxScreenshotsButton // will vary based on state
    ShotTitleInfo
  ShotControlButtons // children will vary based no state
    Favorite
    Annotate
    Copy
    ETC
  AuthButton

Doing this logically separates the three areas and makes it easier to reflow them correctly when at responsive widths.

for larger widths the following rules are important:

HeaderBlock
  display: flex
  flex-wrap: no-wrap
  width: 100%

MainHeader
  flex: 1

ShotControlButtons,
AuthButton
  flex: 0

This will line up everything i a row and it should all fit appropriately

for smaller widths, these rules should be in effect

HeaderBlock
  flex-wrap: wrap;

ShotControlButtons
  flex: 0 0 100%;
  flex-order: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
  justify-items: center;
  align-items: center

nb...these are not complete styles but should get you a lot of the way

[punamdahiya]

okay here's what i think we should do....

I think we can start by splitting the difference on Mark's spec...as follows:

1. I think we should make a pixel perfect implementation of mark's larger-width spec and focus on the small one.

@johngruen point 1 is confusing. Mark large-width spec is https://mozilla.invisionapp.com/share/A5O4VDRJHUQ#/screens/320773906

My understanding in meeting today you mentioned we will be keeping larger width as we have in master and implement smaller width from Mark's spec.

[johngruen]

@punamdahiya I mistyped. it should be "I think we should not make..."

[youwenliang]

If I understand correctly it should be something like this:

(I'm not sure which action buttons we are keeping for the FxA release so I just put most of them according to the current version.)

and for non-firefox users it will be the same as no-owner but with a marketing banner on the top.

[johngruen]

@youwenliang exactly. caveat being that #4892 may mean that we use tooltips on large and small views

[punamdahiya]

Should we keep label for Sign In / Setting button? Keeping label there should help user see his authentication state.

[johngruen]

No, we can hide it for starters

[youwenliang]

Buttons without text label:
https://mozilla.github.io/testpilot-assets/Firefox_Screenshots/FxA_Header/#artboard1