Firefox Accounts migration banner (bug 1052864)

[mstriemer]

https://bugzilla.mozilla.org/show_bug.cgi?id=1052864

This adds custom elements for the site banner (<mkt-banner>) and login (<mkt-login>).

r? @cvan

[mstriemer]

320x480

768x1024

1280x600

[cvan]

What's with the line-height in the compatibility message? How long has it been like that?

[cvan]

The FxA line-height could use some breathing:

[cvan]

at tablet width, it looks like there's too much top padding compared to bottom padding:

[mstriemer]

I messed up the line height for the incompatibility banner. It had the table cell hack for vertical align before. I might have to add it back in.

[cvan]

Firefox Accounts has arrived! Sign in to transfer your account. It's that simple!

What is Firefox Accounts? Learn more

I know you didn't write that, but this is way too wordy IMO. Too much text to scan.

And you should have a period after "Learn more" too.

I'd suggest changing to this:

Firefox Accounts has arrived! Simply sign in to transfer your account.

At least drop the "It's that simple" text:

Firefox Accounts has arrived! Simply sign in to transfer your account.

What is Firefox Accounts? Learn more.

[cvan]

remember to remove from Zamboni

[mstriemer]

Updated line height.

[mstriemer]

I took a screenshot of the tablet width and zoomed in on it. Looks like it's about evenly spaced. 13px from the bottom of the link underline to the bottom and 13px from the top of the is to the top.

[cvan]

I took a screenshot of the tablet width and zoomed in on it. Looks like it's about evenly spaced. 13px from the bottom of the link underline to the bottom and 13px from the top of the is to the top.

It's 4px taller on the bottom:

[cvan]

if you are having problems centreing the text vertically, use flexbox:

http://philipwalton.github.io/solved-by-flexbox/

  /* Old flexbox to centre horizontally. */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;

  /* New flexbox to centre horizontally. */
  display: flex;
  justify-content: center;

Or look at this jsfiddle.

[cvan]

how's it look on an app detail page (e.g., /app/vtranslator)?

[mstriemer]

1280x600 detail

320x480 detail

[mstriemer]

I'm seeing a 1px difference on tablet width, could have been fixed by flex box. I'd imagine the 1px is room for characters that go below the line like the y and g in the sign in link.

[mstriemer]

@andym Do you know who came up with the text for this banner? Can we get it revised based on cvan and chuck's comments?

[mstriemer]

Pushed to master to keep history here. I'm open to revising the API just wanted to get this in.