Foundation.mozilla.org: Implement mini-site functionality (MVP)

[alanmoo]

The goal of this epic is to use existing templates and add the ability for editors to create subpages with their own navigation hierarchies (down one level) from the existing Opportunity pages.

See a prototype at https://taisslessa.github.io/simple-model-ui-v4/index.html

[xmatthewx]

I don't think that header image support is part of MVP for this, b/c it will introduce lots of different complexity we haven't thought through yet. I suggest we focus on core functionality and achieving good authoring UX in this first round.

[alanmoo]

Agreed, just created some tickets for that as placeholders. They're staying in the backlog for now, though feel free to remove them from the epic.

[alanmoo]

This may be a good epic for @arush0311 to take on if others don't have bandwidth for it this sprint.

[gvn]

I can handle the front end if @arush0311 can do the backend portion. I just assigned myself to #619

[alanmoo]

Not sure why I closed this...

[taisdesouzalessa]

Hey @gvn I will do the QA for this page and I was wondering if this is the one I should be looking at:
https://network.mofostaging.net/opportunity/net-neutrality-groups/

[gvn]

Yeah, although we're saying that none of the multipage pages should have signup forms for now.

[xmatthewx]

Looking great.

• form: agreed. doesn't work as sidebar. fortunately, we're looking to move forms down below and full width by default for pages.
• sub-nav: seems like we'll want less line-height on two line items and/or more space between items.
• bonus: great to see that video embeds are working.

[taisdesouzalessa]

Nice page :).

+1 to Matthew's comments above and:

• please make video responsive (it is cutting on the right) - issue #711

• menu should go to top on mobile instead of staying on the sidebar - issue #712
ideal menu style screenshot:

Prototype here: https://taisslessa.github.io/simple-model-ui-v4/index.html

[gvn]

sub-nav: seems like we'll want less line-height on two line items and/or more space between items.

Can you specify the tweaked measurements? I copied the CSS straight out of the Sketch file...

[gvn]

A couple other things:

• The responsive video is unrelated to this ticket, so we should file a separate issue for that.
• I'd also like to file another ticket for the navigation transform, because that wasn't MVP from what I understood.

[taisdesouzalessa]

Can you specify the tweaked measurements? I copied the CSS straight out of the Sketch file...

I tested here and adding margin bottom of 1rem in <li> seems to work. The Sketch file had 24px of distance between the elements...as desired. I guess visually we had the right distance but maybe the style in Sketch didn't match that? Not sure what happened...

[taisdesouzalessa]

The responsive video is unrelated to this ticket, so we should file a separate issue for that.

Cool, I can do that. I updated the my comment to reflect this request :)

I'd also like to file another ticket for the navigation transform, because that wasn't MVP from what I understood.

Done in the comment as well. From the UX perspective, the top menu should be in the MVP otherwise this page has big usability issues on mobile. If adding menu as dropdown has a big cost in terms of time we can open a design ticket to study alternatives and work together on it.

[xmatthewx]

I do think this is dependent on mobile layout for nav. Menu is just too squished to be usable on small screens.