Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

5225 MozFest Stats block #11532

Merged
merged 1 commit into from
Dec 14, 2023
Merged

5225 MozFest Stats block #11532

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions network-api/networkapi/mozfest/templates/fragments/blocks/mozfest_stats_block.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{% load wagtailcore_tags wagtailimages_tags %}

{% block block_content %}
<div class="tw-bg-black tw-dark tw-py-16">
<div class="tw-container">
Comment on lines +4 to +5
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do tw-container and the other wrapper need to be separate?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By 'the other wrapper' do you mean tw-row? They need to be separate as they both set different left and right margin values - tw-container sets them as auto to center align the content and tw-row sets them a -1rem for the grid system in use.

Copy link
Collaborator

@tbrlpld tbrlpld Dec 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant the "wrapper" with <div class="tw-bg-black tw-dark tw-py-16">. There does not seem to clashing definitions between those two. Sorry, I should have been more specific.

Copy link
Collaborator Author

@chris-lawton chris-lawton Dec 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah i'm with you.

Combining them would mean that the black background wouldn't stretch across the screen due to the max-width on tw-container:

image

Vs:

image

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aaah 💡 that makes sense. I did not know about the containers width restriction. Thanks for this.

Also like the fitting example text 😅

<div class="tw-row">
{% for stat in self.stats %}
<div class="tw-mb-12 tw-px-8 tw-w-1/2 large:tw-w-1/4">
<p class="tw-h1-heading tw-mb-0">{{ stat.number }}</p>
<p class="tw-my-0">{{ stat.text }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock block_content %}