8813 - MozFest tickets block

[chris-lawton]

Description

• Changes the mozfest_base.html to have a single column layout
• Adds the page template for a new streamfield block called mozfest_tickets_block which can show up to 3 tiers of tickets, each with a cost, tier name, text, link and optional sticker.
• BE integration will come a future ticket

Desktop/Tablet/Mobile screens:

Details

Link to sample test page:
Related PRs/issues: #

Checklist

Tests

• Is the code I'm adding covered by tests?

Changes in Models:

• Did I update or add new fake data?
• Did I squash my migration?
• Are my changes backward-compatible. If not, did I schedule a deploy with the rest of the team?

Documentation:

• Is my code documented?
• Did I update the READMEs or wagtail documentation?

Merge Method
💡❗Remember to use squash merge when merging non-feature branches into main

[tbrlpld]

Looks good to me @chris-lawton

[tbrlpld]

Interesting. Does the font size not cascade down? Or it there another rule at place we have to override?

[chris-lawton]

The text that appears here will come from a rich text input which means I can't apply classes directly to any of the elements that get output - p or li tags for example. The default font-size set on these elements is too large compared to the design hence why the font size needs to be set higher up on this element. You have made me realise that the use of the child combinator is wrong due to the rich-text div that will be output.

[chris-lawton]

Updated in e3ac3cf

[tbrlpld]

Do we maybe need space between the class names and the curlies? I think the Tailwind might not find the class names when they touch curlies.

[chris-lawton]

They look to output ok like this. Here's a quick test I ran:

<h2 class="tw-mb-14{% if test_var %} tw-text-transparent{% endif %}">A title</h2>
output:
<h2 class="tw-mb-14">A title</h2>

<h2 class="tw-mb-14{% if not test_var %} tw-text-transparent{% endif %}">A title</h2>
output:
<h2 class="tw-mb-14 tw-text-transparent">A title</h2>

[tbrlpld]

I think when Tailwind generates the production stylesheet (.css) by parsing our template files it will see the curlies. I don't think the parsing happens against the server response but the actual file content 🤔 so it might include the curlies touching the classnames.

I think in that case, the classname might be missing from the final stylesheet file Tailwind does not know we used the classes. They could still show up if they are used elsewhere.

[chris-lawton]

Ah ok, that might be why my test was working then. I'll tidy this up in another MR.

[chris-lawton]

#11552