Implement /me page

[cadecairos]

This page will be a place for webmaker users to view their makes, once we shut down the legacy Webmaker site.

Blocked on design in #1265

I'm not too familiar with the teach tech stack, but it sounds like we need to load and display makes client side.

[cadecairos]

Okay, here's where I've gotten this: ( mozilla/teach.mozilla.org#1296 )

The page is there, the data loads.

It needs styling and pagination. The navbar also needs work

I was also unable to figure out how to get a value in a .env file to persist into the config.jsx component

[cadecairos]

@hannahkane did we have a designer in mind for taking this to the finish line? I can assist with any pagination stuff once we figure out how to handle that.

[hannahkane]

@kristinashu - are you able to help with this?

[kristinashu]

@cadecairos I can help with the design of this. I don't have a local set up so I can't see what you've done. Could you maybe send me a screen cap?

[cadecairos]

@kristinashu there's not much to see:

The HTML I'm outputting for each make needs help, classnames, CSS, maybe some restructuring

edit: this is where I generate the html for each make: https://github.com/mozilla/teach.mozilla.org/pull/1296/files#diff-170c570032e6c46167e682331f948739R17

[kristinashu]

Thanks @cadecairos Have you seen these comps? https://redpen.io/p/jm7c4b7f90c1269904 They should give you an idea for sign in. I didn't re-designed how the makes/projects would look but I can work on that. Is the project type and project name all the info available? I'll also mockup how pagination could look.

[cadecairos]

I understand what they're supposed to look like, but I've no idea how to make that happen.

That old /me page used some third party layout library to generate those galleries, I suppose what I really need is a front end engineer?

[hannahkane]

Sorry, I misunderstood. @mmmavis - would you be able to work on this? In terms of priority, I'd put it after the MozFest page development (which is blocked anyway), but above the MozFest schedule app and above the /activities page work.

[mmmavis]

@cadecairos since this is work not 100% complete, I wonder if we should create a new branch issue-1276-me-page and continue our work and file PRs against that branch? (instead of develop) That way I can help with CSS stuff without interfering the staging/production code. What do you think?

[mmmavis]

@kristinashu .ai file plz :laughing:

[kristinashu]

@mmmavis here you go https://drive.google.com/a/mozilla.com/file/d/0B2irLVDJivhLVDg4U2UxM3oxc1k/view?usp=sharing

[mmmavis]

@kristinashu wrong file? :hamster:

[kristinashu]

@mmmavis oops! well i guess, you'll need that one too at some point. Here's it is https://drive.google.com/open?id=0B2irLVDJivhLVDg4U2UxM3oxc1k and https://drive.google.com/a/mozillafoundation.org/file/d/0B2irLVDJivhLY0NmTWlxQkpDTG8/view

[mmmavis]

Hey @cadecairos is there a test account that I can use? I don't remember my old webmaker account anymore and i need an account to pull old makes from :scream:

[cadecairos]

@mmmavis Sorry, not one that I know of on staging. You could always just use the staging apps to publish some test makes under your account

[mmmavis]

@kristinashu not sure if this was discussed already - just wanna double check to see if we are removing the Webmaker logo from the login link. (see last page of the mockup) /cc @hannahkane

Also for site admins they will see an extra link "Site Administration" from the sidebar

could you advice where that option should be located?

[mmmavis]

I'm thinking if that expendable section on the sidebar should be toggled on click instead of on hover. That way works better in terms of accessibility and the behaviour would be more consistent across devices (desktop and mobile).

[kristinashu]

@mmmavis yes, please remove the Webmaker logo - I think it's something we're trying to move away from.

What happens when someone clicks on Site Admin? Is it just one page? It would be nice if it could it go into the same dropdown?

Good idea for the toggle! Click would be better than hover.

[mmmavis]

@kristinashu

What happens when someone clicks on Site Admin? Is it just one page? It would be nice if it could it go into the same dropdown?

it goes to the Teach API admin portal that looks nothing like the MLN site. I think we can just put that link as the first item on that expanded section? (before "Your Makes")

[kristinashu]

@mmmavis cool, sounds good. You could use the font awesome icon fa-external-link []

[mmmavis]

@kristinashu just realized we probably would need to have a placeholder/default thumbnail since some Make don't have a thumbnail associated with them.

/cc @cadecairos

[kristinashu]

@mmmavis ok I'll make a placeholder image. What size should it be? I'll just do one generic placeholder (rather than have one for Thimble and one for Popcorn...).

[mmmavis]

@kristinashu is it possible to have the file as .svg?

If not, the thumbnail size I set in my screencap is 300px * 150px so I guess exporting the placeholder image to 1x and 2x(for retina) would help. :smile:

[kristinashu]

@mmmavis here's the SVG https://drive.google.com/a/mozilla.com/file/d/0B2irLVDJivhLZ19ySzh1R2xzeEU/view?usp=sharing

I've also attached a jpg for reference. I'm thinking the background color is light grey #E5E5E5 with the white SVG icon in the centered.

Here's the illustrator file if you need it: https://drive.google.com/a/mozilla.com/file/d/0B2irLVDJivhLY0NmTWlxQkpDTG8/view?usp=sharing

[mmmavis]

reopen this ticket so we get a chance to QA on staging before pushing it to production

note: it seems like the change hasn't made its way to the staging site. let's wait for a little longer.

[mmmavis]

changes on live on staging!

FYI @jbuck I added https://teach.mofostaging.net to make-valet-staging's ALLOW_ORIGINS and https://teach.mozilla.org/ to make-valet-production's

[hannahkane]

Yay! Couple things I noticed:

• should the arrow turn when the menu is collapsed?
• should we offer a message when the user has no makes? or not show the "Your Makes" item in the menu?

[Pomax]

It feels like the menu opens much faster than it closes - is that intentional?

[kristinashu]

Is it possible to close the menu once someone has selected something (ie 'Your Makes' or another menu item like 'Teaching Activities')?

[kristinashu]

I'm not sure the arrow needs to turn. Sort of basing this on Thimble's dropdown where the arrow just changes color.

[hannahkane]

hmm...but in Thimble, the menu opens on hover. I feel like people might not realize there's a menu there.

[hannahkane]

@kristinashu - mavis filed a separate ticket for closing the menu: https://github.com/mozilla/teach.mozilla.org/issues/1314

[kristinashu]

Oh ok that makes sense now.

[hannahkane]

Maybe we should be consistent with Thimble, and have the menu open on hover?

[Pomax]

teach.wmo and thimble feel like different tools with different UX, much like any other two websites, I'm not sure it's worth trying to make them do exactly the same thing for this functionality.

[kristinashu]

Thimble is actually changing to a click instead of hover. It's click on their staging site.

[hannahkane]

@kristinashu - I'll leave this decision up to you. :)

[hannahkane]

@cadecairos - can you please explain exactly which makes will appear on this page? Is it, for example, "Any makes made with Thimble, Popcorn Maker, or Appmaker before a certain date?" I want to be able to add a line of copy that explains to users what makes are here.

Also, just want to confirm that there won't be a way to add makes to the page, right? Any new Thimble or Goggles or Webmaker makes will not appear on this page, right?

[cadecairos]

"Any makes made with Thimble, Popcorn Maker, or Appmaker before a certain date?"

Correct, any makes made with the tools we're retiring

Also, just want to confirm that there won't be a way to add makes to the page, right? Any new Thimble or Goggles or Webmaker makes will not appear on this page, right?

Also correct

[jbuck]

That's not entirely true, is it? Until we decommission all four tools (we're only decommissioning Appmaker and Popcorn Maker this week) new makes will continue to show up there.

[cadecairos]

technically what I said is true. as long as a tool hooked into the makeapi hasn't been retired, its makes will show up there. (once the daily export-to-S3 job runs)

[hannahkane]

OK, so @mmmavis - what if we add this line of copy to the page: "In the fall of 2015, we retired Popcorn Maker and Appmaker, as well as older versions of Thimble and X-Ray Goggles. Any makes you created with these tools are still accessible below. Projects created with the new X-Ray Goggles, Thimble, or Webmaker are accessible through those respective platforms."

cc @KevZawacki @ldecoursy

[KevZawacki]

@hannahkane +1 to that copy. Added a minor tweak.

[hannahkane]

Thanks, @KevZawacki. @mmmavis - mind adding that copy to the page?

[hannahkane]

@cadecairos - can we close this ticket?

[cadecairos]

@hannahkane yes, I think we can!

[hannahkane]

w00t