mozmeao / birdbox Goto Github PK

https://www.figma.com/file/NUNAO6zA36wmDlTvgCHcj3/birdbox-thumbnails-innovations?type=design&node-id=0-1&mode=design&t=fwAftpwghcQjVkM1-0

• hero
• 3-col card layout, repeating

See https://mozilla-hub.atlassian.net/browse/IAM-1200

https://protocol.mozilla.org/components/detail/picto--default.html

• https://future.mozilla.org/mieco/justine-tunney/ -> https://prod.future.prod.webservices.mozgcp.net/mieco/justine-tunney/
• https://future.mozilla.org/mieco/yoshiki-ohshima/ -> https://prod.future.prod.webservices.mozgcp.net/mieco/yoshiki-ohshima/
• https://future.mozilla.org/mieco/jeff-lindsay -> https://prod.future.prod.webservices.mozgcp.net/mieco/jeff-lindsay
• https://future.mozilla.org/mieco/andy-matuschak -> https://prod.future.prod.webservices.mozgcp.net/mieco/andy-matuschak

Things that need fixing/tuning, noticed while laying in content

• Hero is over-padded compare to future.m.o
• Section header needs constraining like main page container
• Card block header needs to be smaller
• Dark mode nav needs different mozilla logo?
• Card block need constraining like main page container
• Builders and MEICO cards link to future.m.o not relative domain - need updating once those pages exist

Flat HTML file, that extends the regular base template, so we can build out anything we want as fixed content - eg a regular django page can use this

See https://github.com/mozmeao/birdbox-documentation/issues

• dark variant

A Wagtail page featuring a flexible StreamField will have 1...N types of content-block available. Each type of contnet block will map to a specific Protocol component (eg split, card, etc).

To avoid including all the CSS for every protocol component, we are going to specify which CSS and JS files are needed when defining each block in Python code. To do this, though, we need to have a CSS and/or JS file for each component available in birdbox/static/css or birdbox/static/js so that Django can be pointed at them.

Overall, I think we need to:

1. Get hold of the latest protocol/core package (ie, have it in package.json so we can npm install it
2. Do some processing that finds each of the SCSS files in the components directory (node_modules/@mozilla-protocol/core/css) and compiles them to individual CSS files in a different directory (eg birdbox/static/css/*.css) -- we may need to autoprefixing and minifiy, too.
3. There's also a site-wide, base protocol.css file that we will need to include in every page, so we should copy (or minify) node_modules/@mozilla-protocol/core/css/protocol.css and to birdbox/static/css
4. Copy the JS files out of node_modules/@mozilla-protocol/core/protocol/js into birdbox/static/js/ - if we minify along the way, that's great too
5. Copy the img and font dirs from protocol into birdbox/static/* as well

Success criteria:

• the files mentioned above all exist in birdbox/static/*
• there's a repeatable way to trigger/refresh the those files

As noted in wagtail/wagtail#5072 amongst other places, Wagtail is unopinionated about cache-control headers, including on pages that are private/password protected. This can result in restricted content being caught in a CDN or other cache.

We should tweak things, either with a third-party package or code customisation, to avoid this situation + add regression tests to confirm all is OK

• https://www.figma.com/file/NUNAO6zA36wmDlTvgCHcj3/birdbox-thumbnails-innovations?type=design&node-id=0-1&mode=design&t=fwAftpwghcQjVkM1-0

• General simple content page

  • Title
  • standfirst
  • Rich-text area
  • image support
  • Could add kitchen sink here

At the moment we pull in all CSS for a page's available blocks, whether they are used or not - would be nicer to include it only for blocks that are actively in use

• Hero background image bleed isn't flexible enough on smaller viewports - make sure doesn't break for Builder's
• MIECO vs MEICO in Custom form chooser - @stevejalim
• Rename Contact Form block to Innovations Contact Form Block - @stevejalim
• Light theme Column block text needs to inherit BG color - see comments for screenshot
• Support <small> in rich-text block, if easy lift- EDIT: nope
• biography grid links can overflow badly - change to "Learn more" as link text - @stevejalim

• Product list page - image-based
  • Hero for product
  • following products in splits too with a CTA button

https://protocol.mozilla.org/components/detail/columns--overview.html

The Hero component needs a few tweaks.

• "Subhead" and "Standfirst" (intro) should be optional fields (they're currently required). Main title should be the only required field.
• Styling of main heading and subheading should be updated. Main heading should be bold, subheading should be regular weight and smaller.
• Adding a background image currently overrides the background color. Background color should be preserved when an image is added.

• for notifying moderators if pages have been submitted for moderation
• for direct contact form

https://protocol.mozilla.org/components/detail/section-heading.html

To replicate

Go to the Survey page from Steve's sample data.

Submit the form and you'll notice the success notification lacks sufficient bottom margin

At the moment, when we show an image, we're just showing the original-size image uploaded to Wagtail, but Wagtail can generate image renditions in any res/size we want docs - worth a skim

I wonder whether it would be possible to create a default set of specs as srcset for any image block. When we added the Split Block (#5) I temporarily skipped over the srcset option - hence this ticket now.

Thoughts are very welcome - particularly from you @craigcook + @stephaniehobson + @alexgibson :

1. Is there an image size below which srcset variations are pointless? (ie, is it silly to try to come up with a one-size-fits srcset list?)

2. Do we need to add srcset to any other Protocol components that don't currently mention it in their reference implementation? Would it be pointless or damaging if we did?

3. Do we want to trust Wagtail (well, the very mature Python Pillow library) with auto-sizing images, or would we prefer to make the editors have to upload different image variations themselves, in order to ensure high quality images? (Different orgs have different appetites for both of these routes)

In order to use the approved SRE release pipeline, we'll need to package all this up as a container image.

Bedrock's multi-stage build seems to still be a solid way to handle needing both Node and Python, which is the case here, too

Behaviour

• Support custom fields/values - see what we get from the wagtailforms or streamforms libs
• JS-based field triggers - add project-specific JS for this
• Error handling + JS submission
• Make Country field optional
• Make Language field optional
• Name as a single field, optional

UX/UI

• (nice to have) Support no-image version of the layout - make image optional and reflow if not present

Wagtail 5.0+ now supports SVG images in the core Images section, which is something we're very likely to need, particularly in hero headers. SVGs are better than bitmaps

We're currently on Wagtail 4.2.x LTS, but we can move up to 5.x because 5.2 LTS is due to land in November 2023.

However, to get to use Wagtail 5.0+, we need our dependencies to also support it. Wagtailstreamforms does NOT work for 5.0 yet

It seems wortwhile to contribute a fix/update to wagtailstreamforms, as a way to retain the form behaviour which will have significant value while unlocking SVG image support

Needed in part for Sentry, which doesn't like the latest fallback:

-[X] Steve to set up the views

• Craig to handle the markup and CSS

• Hero formatting - background needs stretching a little more?
• Column block - can we constrain this with its own layout wrapper?
• in-page anchor link to #guidelines EDIT: deferred till post-MVP and ticketed
• Centre-align layout for bio grid, or not? EDIT: NOT

https://protocol.mozilla.org/components/detail/footer.html

Two variations needed:

• Fully customisable and site-wide. (This will have to be implemented as a Snippet, with a StreamField Block to include it (and ideall validation to make sure it's the final thing in the Streamfield!)
• Hard-coded one lifted from Mozilla, org

Initially we will not have the language switcher in there

We now deny cacheing for private pages via a base class that sets approproate headers, but we could make this more thorough. See this example from Cynthia K via the Wagtail Slack: https://gist.github.com/cnk/44f6118476694c8319d52198aac717a0

We're initially assuming we'll go ahead with GA using GTM

In the future (separate work) we'll add a Glean option if we can

Ideally we want the image rendition to be contextually appropriate for the usage, which we think we can do from the parent class and/or grandparent class

Both simple and fuller layouts are possible because we'll do it with a streamfield so you can include/ignore Splits

• hero with button option

• 3-col card grid

• 3/4 splits allowed, left and right flipped

• newsletter signup

• https://www.figma.com/file/NUNAO6zA36wmDlTvgCHcj3/birdbox-thumbnails-innovations?type=design&node-id=0-1&mode=design&t=fwAftpwghcQjVkM1-0

Could maybe be done with a full-feature general-purpose page template

• Similar hero to future.m.o landing page - no button though
• section header - why join us
  • could be done as a special style for MEICO or similar
• three col layout with headed columns and stacked pictos in them
• full bleed gradient-background text block
  • like white text on black on builders challenge but with a gradient
• Bio grid with
  • heading
  • 3 cols of people
    • photo, meta/caption, title, blurb, link
• Text split with heading left and copy right and a button
  • on another gradient background
• FAQs
  • could be done as rich-text with a custom header style via CSS maybe?
• Section header - on white
• CUSTOM EMAIL CONTACT FORM with image

via django-ratelimit or django-axes or similar

Needs Dockerized Birdbox first: #43

### Components needed

• Black Nav with button
• left-aligned hero with standfirst, headline, blurb and button
• section heading - left aligned ("our approach")
• Splits with 3/4 layout option
• four col picto card layout on black background
  * SVG pictos
  • full bleed background
• Custom contact form with no image
• Footer - bedrock style not protocol style

• Specific 'Homepage' Page type built with above fields
• ArticleBlock added for extra flexibility in an emergency

This one's quite a lot of custom work - might even be worth making it a specific page type and we drop it from birdbox once the innovation repo exists

• Different CSS styling than core protocol - custom stylesheet chosen on the page template, loaded as @frontend_media?

• Nav with button

• Center aligned hero with PNG background

• Text area with large text, center align and button below

• Note the custom 'sunshine' image bleeding between sections

• Prize winners section

  • heading
  • three-col layout with cards in there
    • styling of cards is bespoke font

• "About the challenge" White text area on black

  • Do this as a headed text component with light and dark modes
    • poss will need gradient support - see use on MEICO

• "How applications were evaluated"

  • Three-col simple cards with title and description, no lnks

• two coloured boxouts/wrapping the content

  • colour selector needed
  • two col and three col
  • rich text in each column

• Section header: "Meet our judges and speakers"

  • section header for Judges and for Speakers
  • Three col layout, similar to "How applications were evaluated" but with images and more whitespace

• Our Partners:

  • two decks of three-columns with an image in each, no linking, interestingly

• Event agenda

  • Header is a h3 with an image and alt-text
  • Body is a table - do we have support for that already?
    • table has custom styling -> new "Agenda" component with header + tableblock

• Custom Newsletter

• Slim callout for Discord - variation of current compact callout?

Based on https://www.figma.com/file/NUNAO6zA36wmDlTvgCHcj3/birdbox-thumbnails-innovations?type=design&node-id=0-1&mode=design&t=GoQIOm2getMhbfl5-0, we need to provide the six page types shown

MVP:

Current live pages

• #46
• #47
• #48

From Elise

• #50
• Blog (Done already)
• #51
• #52
• #53

Non-MVP:

• #49

See how we did it here to make it dynamic yet non-wildcard

• Update code
• Update env vars
• Roll out
• Remove ALLOWED_HOSTS from secrets, because it's now redundant

For now we'll go with the default roles https://guide.wagtail.org/en-latest/how-to-guides/manage-users-and-roles/