Clubs Pages Implementation Tracking Issue

[flukeout]

What's left to do

Left before Launch

• [x] Make sure all new elements are responsive
• [x] Resolve missing icons in narrow mode for the tabs
• [x] Need to figure out how to incorporate the new Clubs Application form stuff - with help from @Pomax
• [x] Obtain & add content for initial Featured Updates section - #2061
  • Or remove if not needed for launch
• Once it hits staging
  • [ ] Design QA @sabrinang
  • [ ] Content QA by Clubs Team

Big Stuff

• [x] @gvn to update the Carousel so it works in the Teach site - issue
  • [x] Add content from Caro into the Carousel
  • It all used to live in the clubs.jsx page which no longer exists in the new tabbed branch code
• [x] Convert all the text to use the localization system\
  • [x] Clubs Guides - localizing Category labels for now only, will revist post-launch
  • [x] Club Captain Carousel

Styling & Tweaks

• [x] Review Carousel with 'live' content with @sabrinang and make adjustments / file issues as needed.
• [x] Figure out border-radius for tabs
  • cc @sabrinang
• [x] Standardize link & outlined button color (should be same)
  • cc @sabrinang
• [x] Fix yellow button styling on the "Start" page
• [x] Figure out what to do with Footer
  • Will be ditching the footer for now until a site-wide change
• [x] Triple social share area
  • [x] Link the whole box to the destination
  • [x] Add slight scale effect on hover

Follow up / not critical

• [ ] Luke & Gavin will identify places and content types that belong in the Mofo bootstrap theme and place them there accordingly

Some handy links

• Clubs Designs on Redpen
• Mofo-ui Repo
• Bootstrap

Glossary

• mofo-ui - external library of interactive components like menus and carousels
• bootstrap - external library of basic layout and content styles used on mofo sites

[flukeout]

@gvn - Let me know if this makes sense and reflects what we talked about earlier today.

[flukeout]

Sounds like @gvn has already done some mobile styling for this component - let us know when it hits the mofo-ui demo page and we can take a look there and provide feedback as needed.

Edit - a demo of the carousel is available here https://gvn.github.io/mofo-ui/demo/

I think it works pretty well in a narrow format with 4 photos, so I think we're in the clear until we need to add more photos.

[gvn]

@flukeout I made a new branch with a 3 tab scaffold for you to populate.

It's here: https://github.com/mozilla/learning.mozilla.org/tree/clubs-big-kahuna

We should probably meet quickly to discuss, but this should get you started!

[flukeout]

Thanks @gvn - I'll give you a ping for a walkthrough before stand tomorrow sometime.

[hannahkane]

tagging @hannahkane to get updates

[flukeout]

Feature requests & questions for @gvn

Can we

• Remember what tab is open when you refresh the page so that it remains open
  • Can be accomplished by the next two points...
• Update the address bar to show the tab that you are currently looking at
  • /clubs for the first tab
  • /clubs/start for the second tab
  • /clubs/running for third tab
• Open the correct tab when the page first loads based on the URLs above

[gvn]

Let's do the deep linking as a follow up once this is landed.

[flukeout]

Need link for, don't see it in the content doc

[hannahkane]

Oh wow. I totally dropped the ball on that. The plan for that page was originally to build it with Calypso. Now that that's not going to happen, I'll file a follow-up ticket to build that page. In the meantime, I'd suggest we drop that sentence.

[flukeout]

Will do, thanks!

[gvn]

I opened an issue on Learning for the carousel integration. I don't think it's a mofo-ui issue since the carousel works fine on Science. It seems to be a problem with how Learning is compiled with Webpack, but I'm having a hard time nailing it down.

[sabrinang]

@flukeout Border radius for tabs - It should be similar to all buttonborder-radius on the learning site border-radius: 4px;

Link colour - On the learning site link colour is #337AB7

Footer - Yes, we do not need to introduce the dark footer and continue to use the existing side nav footer.

[flukeout]

Thanks @sabrinang - I made the changes.

[flukeout]

@sabrinang Since our mofo-ui component needs icons for the narrow versions of the tabs, I've decided to use the following...

• About clubs (info icon)
• Start a club (start flag icon)
• Running your club (guide icon since there are resources there)

Let me know if you'd like to change any of these.

[flukeout]

@gvn Okay - I think this is READY! and my branch has all of the latest. What's the best course of action?

Ze Branchè - https://github.com/flukeout/learning.mozilla.org/tree/clubs-big-kahuna

[gvn]

Sweet! Just make a PR to the master branch of the mozilla repo and flag someone (probably me?) for a review.

[flukeout]

Closing as PR is now merged. Will file follow-up issue to QA on staging.