Create HOC Homepage Banner

[mewtaylor]

New banner at the top of the homepage that will be present for the two weeks around Hour of Code. This will contain links to the new T3 page, as well as specific resources to get started with (in the form of new tiles, as specified in #979).

Components to use:

• Homepage banner element
• New resource tile (see Create "Things to Try" page #979)
• New event row (see Create HOC Homepage Event Row #982)

[carljbowman]

Logged-in State

• Includes 'Get Creative with Coding' Banner
• Includes 'Design a Character' Event Row

Desktop - 12col

'Get Creative with Coding' Banner

• 'See things to try' points to the Things to Try page (see Create "Things to Try" page #979)
• Resource tiles (everything above dotted line) point to their associated Tutorial
• 'See Cards and Guides' will open a modal with associated resources

'Design a Character' Event Row

• Call to action & copy still being worked on - @kaschm
• 'See the studio' will point at the studio - @kaschm @christanbalch @SpeakkVisually
• Video embed URL - @kaschm

Tablet to Desktop - 8col

'Get Creative with Coding' Banner

• Tutorial tiles hidden
• Center align and stack text / 'See things to try' button

'Design a Character' Event Row

• Hidden

Mobile to Tablet - 6col

'Get Creative with Coding' Banner

• Tutorial tiles hidden
• Center align and stack text / 'See things to try' button

'Design a Character' Event Row

• Hidden

Mobile - 4col

'Get Creative with Coding' Banner

• Tutorial tiles hidden
• Center align and stack text / 'See things to try' button

'Design a Character' Event Row

• Hidden

---

Non-logged-in State

• Includes 'Get Creative with Coding' Banner

Desktop

• Same behavior as 'Logged-in State'

[jwzimmer-zz]

Testing

Design diffs
Chrome 54, Mac OS 10.11, Staging

• The "see things to try" button has more padding in copy than on Staging
• Font is slightly less bold/ more spaced-out kerning in copy than on Staging (I know this is probably unavoidable as per previous discussions with @carljbowman but just want to verify)
• Things to try button right edge is not aligned with the right edge of the rightmost card, title not aligned with leftmost card --> HOC banner - Edges of tiles not aligned with banner title/ button #1076 (not a blocker)

Functionality
Chrome 54, Mac OS 10.11, Staging

• The "see things to try" button redirects to the TTT /go page
• Try It & sheer hover effects for each tile
• Clicking anywhere on tile redirects to editor with Tips window open at appropriate content
• See Cards & Guides opens modal
• X to close modal
• Click outside modal to close
• Buttons in modal work
  • Buttons should say "Open" or "Try It"
    • The buttons don't say "Open" --> Buttons say "ttt.open" instead of "Open" - HOC Banner > Modal #1078
      (blocker)
    • Update: buttons are fixed
  • Open cards
  • Open guides
  • Try It
• When logged in or out, the banner should not change
  • The navbar should change state as usual

Responsiveness

• IE 11 on Win 7 VM
• When resizing the window, below a certain size, the tiles should be hidden --> Strange state where HOC banner tiles are hidden but banner & homepage rows are extremely long #1084 (not a blocker)
  • Title should remain
    • The title should wrap & be centered --> HOC banner - on smaller widths, "see things to try" button & title are not centered #1083 (blocker)
    • Update: now centered
  • See things to try button should remain
    • The button should be centered --> HOC banner - on smaller widths, "see things to try" button & title are not centered #1083 (blocker)
    • Update: now centered
  • Blue background should remain
• On tablet, view should be as above
• Android Asus tablet, Chrome 54.0.2840.85
  • Name: Quiche
  • Landscape orientation, looks like Desktop state
    • 3 tiles displayed
    • See things to try button's center is slightly lower than the title's center --> See things to try button slightly lower than title - HOC banner #1089
    • Button goes to TTT page
    • See cards and guides (on tile) opens modal in desktop state, as previously noted (with TTT page testing)
    • When signed out, no HOC event row
    • When signed in, HOC event row is present
  • Portrait orientation, tablet state
    • Button goes to TTT page
    • Title centered above button
    • No tiles displayed
    • When signed out, no HOC event row
    • When signed in, HOC event row is present
• Apple iPad tablet, Safari
  • Name: Pao de Quejao
  • When signed out, no HOC event row
  • When signed in, HOC event row is present
  • Landscape orientation looks like desktop state
    • See things to try button's center is slightly lower than the title's center (not tablet-specific, also Chrome/ desktop) --> See things to try button slightly lower than title - HOC banner #1089
  • Portrait orientation looks like tablet state
  • Using Farsi, no obvious issues
    • Can dismiss HOC event row
    • Animate your name modal opens
      • Try It button goes to editor
      • Open Cards button opens the Cards pdf
    • If I sign in & out, the HOC event row appears & disappears
      • Clicking sign in/ out registers with tile underneath; causes hover effects --> Signing in/ out in tablet causes hover effect on tile in HOC banner #1088
    • If I sign in, dismiss the row, then sign out, then sign in again, it does not reappear
• On mobile, view should be as above
  • iPhone 6s, Chrome & Safari
  • I can only check in portrait mode (my phone doesn't do landscape : ( )
  • View is as above
  • See things to try button takes you to TTT page
  • Confirm email banner doesn't look good (noted in "Confirm your email" banner layering - appears over HOC banner, rather than above it #1082)
  • @mewtaylor checked it on iPhone 5s + Chrome & Safari
  • Zoomed in inconsistently in Chrome (only), if you have once zoomed in? @mewtaylor avows this as a browser bug, not on our end (works in Safari)
  • @colbygk checked on his iPhone 6+

Localization
Firefox 50.0, Mac OS 10.11, Staging

• Choose several different languages and make sure functionality remains
  • Bulgarian
    • Clicked around, everything looks ok (although not much is translated)
  • Catalan
    • Banner title is translated, 2 tile titles are translated
    • Clicking "Animate your name" tile opens editor + tips window, both in Catalan
      • Modal opens
      • Clicking outside modal closes it
      • Try it, Open buttons work as expected from modal
    • Hover effects still work
    • Link to a project from "What's Happening" Activity Feed works
  • Hebrew
    • No real change in RTL vs. LTR display

Other
Chrome 54, Mac OS 10.11, Staging

• How should the teacher banner work with the HOC banner?
  • @carljbowman said the teacher banner should be displayed above the HOC banner.
    • Links in teacher banner still work when HOC banner is displayed
    • Random functionality in HOC banner still works when teacher banner is displayed
• What should the confirm email banner do?
  • It should behave like the teacher banner. Current behaviour --> "Confirm your email" banner layering - appears over HOC banner, rather than above it #1082 (not a blocker)

Compatibility
Edge 38.14393.0.0 on Windows 10

• See things to try button goes to TTT page
• 3 tiles, button, title all look reasonable
  • Post @mewtaylor's fix to the button location relative to the title location, they look more centered (although perhaps still not exactly centered as in the spec - discussed this with @mewtaylor and I think it's a non-issue, verified that with @carljbowman)
• Fly cards pdf opens from the modal > Open button
• Make Music modal can be closed with X
  • Or by clicking outside it

[carljbowman]

@jwzimmer - Thanks for logging the diffs. Both are okay.

• Re Button: Totally fine, for consistency on the site we are using the button component which dictates the padding. That being said at some point we should update the styling to have more padding and remove the drop-shadow.
• Re Font: Certainly falls in the case where there is not much we can do about how fonts will be rendered across browsers. What is on staging looks fine to me.

[mewtaylor]

Added in #1073

[chrisgarrity]

On Mobile checked with Nexus 5X (Android 7.0):

• Portrait mode:
  • banner text is centered
  • See things to try link goes to /go (TTT page)
• Landscape mode:

  • banner text is centered within view

  • but page scrolls sideways, and the banner does not fill the page width
    

  • See things to try link goes to /go (TTT page)

• Switching between portrait and landscape:
  • page does not scroll (fills view), but banner is off center
    

[mewtaylor]

@chrisgarrity cool thanks – looks like this is a splash page problem (see the news box), which probably merits its own issue. Unless we want to just say it'll be addressed in the homepage redesign?

[chrisgarrity]

@mewtaylor Yes, I don't think this is really an hoc issue, just figured I'd log it. I think we should postpone to homepage redesign.

[jwzimmer-zz]

@carljbowman confirmed the title/ button alignment is good as-is.