dotcom-rendering
dotcom-rendering copied to clipboard
guardian
Consistent container padding
What?
This PR ensures consistent spacing of 36px below each container on fronts
Why?
Previously, we sometimes had different levels of padding below each container and sometimes none at all
Before
After
Size Change: +242 B (0%)
Total Size: 1.62 MB
| Filename | Size | Change |
|---|---|---|
dotcom-rendering/dist/frontend.server.js |
484 kB | +199 B (0%) |
ℹ️ View Unchanged
| Filename | Size | Change |
|---|---|---|
dotcom-rendering/dist/1382.legacy.********************.js |
5.67 kB | 0 B |
dotcom-rendering/dist/1815.legacy.********************.js |
30.8 kB | 0 B |
dotcom-rendering/dist/2344.legacy.********************.js |
2.77 kB | 0 B |
dotcom-rendering/dist/259.legacy.********************.js |
3.24 kB | 0 B |
dotcom-rendering/dist/286.********************.js |
23.2 kB | 0 B |
dotcom-rendering/dist/286.legacy.********************.js |
23.9 kB | 0 B |
dotcom-rendering/dist/2947.********************.js |
2.74 kB | 0 B |
dotcom-rendering/dist/2947.legacy.********************.js |
2.82 kB | 0 B |
dotcom-rendering/dist/3210.********************.js |
7.83 kB | 0 B |
dotcom-rendering/dist/3210.legacy.********************.js |
8.58 kB | 0 B |
dotcom-rendering/dist/3307.********************.js |
3.11 kB | 0 B |
dotcom-rendering/dist/3419.legacy.********************.js |
6.34 kB | 0 B |
dotcom-rendering/dist/3584.********************.js |
1.8 kB | 0 B |
dotcom-rendering/dist/3584.legacy.********************.js |
1.8 kB | 0 B |
dotcom-rendering/dist/4019.********************.js |
3.44 kB | 0 B |
dotcom-rendering/dist/4019.legacy.********************.js |
3.48 kB | 0 B |
dotcom-rendering/dist/5058.********************.js |
2.72 kB | 0 B |
dotcom-rendering/dist/5222.********************.js |
4.25 kB | 0 B |
dotcom-rendering/dist/5222.legacy.********************.js |
4.32 kB | 0 B |
dotcom-rendering/dist/5436.legacy.********************.js |
2.68 kB | 0 B |
dotcom-rendering/dist/5553.********************.js |
2.85 kB | 0 B |
dotcom-rendering/dist/6101.********************.js |
32.9 kB | 0 B |
dotcom-rendering/dist/6131.********************.js |
4.29 kB | 0 B |
dotcom-rendering/dist/6131.legacy.********************.js |
4.3 kB | 0 B |
dotcom-rendering/dist/6180.********************.js |
5.28 kB | 0 B |
dotcom-rendering/dist/6204.********************.js |
5.54 kB | 0 B |
dotcom-rendering/dist/6400.********************.js |
21.5 kB | 0 B |
dotcom-rendering/dist/6400.legacy.********************.js |
21.5 kB | 0 B |
dotcom-rendering/dist/7148.********************.js |
6.8 kB | 0 B |
dotcom-rendering/dist/7148.legacy.********************.js |
7.31 kB | 0 B |
dotcom-rendering/dist/7576.********************.js |
3.96 kB | 0 B |
dotcom-rendering/dist/7576.legacy.********************.js |
5.38 kB | 0 B |
dotcom-rendering/dist/7800.********************.js |
11.3 kB | 0 B |
dotcom-rendering/dist/7829.********************.js |
2.8 kB | 0 B |
dotcom-rendering/dist/7829.legacy.********************.js |
2.91 kB | 0 B |
dotcom-rendering/dist/7981.********************.js |
4.31 kB | 0 B |
dotcom-rendering/dist/8129.legacy.********************.js |
11.8 kB | 0 B |
dotcom-rendering/dist/8195.legacy.********************.js |
2.98 kB | 0 B |
dotcom-rendering/dist/8344.legacy.********************.js |
6.38 kB | 0 B |
dotcom-rendering/dist/8492.legacy.********************.js |
4.39 kB | 0 B |
dotcom-rendering/dist/8612.********************.js |
3.72 kB | 0 B |
dotcom-rendering/dist/8612.legacy.********************.js |
4.21 kB | 0 B |
dotcom-rendering/dist/9130.********************.js |
5.92 kB | 0 B |
dotcom-rendering/dist/9317.legacy.********************.js |
5.43 kB | 0 B |
dotcom-rendering/dist/9380.legacy.********************.js |
2.82 kB | 0 B |
dotcom-rendering/dist/AlreadyVisited-importable.********************.js |
4.52 kB | 0 B |
dotcom-rendering/dist/AlreadyVisited-importable.legacy.********************.js |
4.52 kB | 0 B |
dotcom-rendering/dist/atomIframe.********************.js |
757 B | 0 B |
dotcom-rendering/dist/atomIframe.legacy.********************.js |
806 B | 0 B |
dotcom-rendering/dist/AudioAtomWrapper-importable.********************.js |
459 B | 0 B |
dotcom-rendering/dist/AudioAtomWrapper-importable.legacy.********************.js |
517 B | 0 B |
dotcom-rendering/dist/bootCmp.********************.js |
8.88 kB | 0 B |
dotcom-rendering/dist/bootCmp.legacy.********************.js |
12.5 kB | 0 B |
dotcom-rendering/dist/Branding-importable.********************.js |
4.63 kB | 0 B |
dotcom-rendering/dist/Branding-importable.legacy.********************.js |
4.64 kB | 0 B |
dotcom-rendering/dist/braze-web-sdk-core.********************.js |
36.1 kB | 0 B |
dotcom-rendering/dist/braze-web-sdk-core.legacy.********************.js |
36.1 kB | 0 B |
dotcom-rendering/dist/BrazeMessaging-importable.********************.js |
9.44 kB | 0 B |
dotcom-rendering/dist/BrazeMessaging-importable.legacy.********************.js |
10.1 kB | 0 B |
dotcom-rendering/dist/CalloutBlockComponent-importable.********************.js |
4.25 kB | 0 B |
dotcom-rendering/dist/CalloutBlockComponent-importable.legacy.********************.js |
4.55 kB | 0 B |
dotcom-rendering/dist/Carousel-importable.********************.js |
11.7 kB | 0 B |
dotcom-rendering/dist/Carousel-importable.legacy.********************.js |
12.1 kB | 0 B |
dotcom-rendering/dist/ChartAtomWrapper-importable.********************.js |
261 B | 0 B |
dotcom-rendering/dist/ChartAtomWrapper-importable.legacy.********************.js |
271 B | 0 B |
dotcom-rendering/dist/CommentCount-importable.********************.js |
3.45 kB | 0 B |
dotcom-rendering/dist/CommentCount-importable.legacy.********************.js |
3.54 kB | 0 B |
dotcom-rendering/dist/CommercialMetrics-importable.********************.js |
6.33 kB | 0 B |
dotcom-rendering/dist/CommercialMetrics-importable.legacy.********************.js |
777 B | 0 B |
dotcom-rendering/dist/CoreVitals-importable.********************.js |
6.06 kB | 0 B |
dotcom-rendering/dist/CoreVitals-importable.legacy.********************.js |
6.27 kB | 0 B |
dotcom-rendering/dist/debug.js |
1.75 kB | 0 B |
dotcom-rendering/dist/DiscussionContainer-importable.********************.js |
3.5 kB | 0 B |
dotcom-rendering/dist/DiscussionContainer-importable.legacy.********************.js |
3.75 kB | 0 B |
dotcom-rendering/dist/DiscussionMeta-importable.********************.js |
3.93 kB | 0 B |
dotcom-rendering/dist/DiscussionMeta-importable.legacy.********************.js |
4.04 kB | 0 B |
dotcom-rendering/dist/DocumentBlockComponent-importable.********************.js |
2.99 kB | 0 B |
dotcom-rendering/dist/DocumentBlockComponent-importable.legacy.********************.js |
3.1 kB | 0 B |
dotcom-rendering/dist/dynamicImport.********************.js |
2 kB | 0 B |
dotcom-rendering/dist/dynamicImport.legacy.********************.js |
2.07 kB | 0 B |
dotcom-rendering/dist/EditionDropdown-importable.********************.js |
4.1 kB | 0 B |
dotcom-rendering/dist/EditionDropdown-importable.legacy.********************.js |
4.15 kB | 0 B |
dotcom-rendering/dist/EmbedBlockComponent-importable.********************.js |
3.34 kB | 0 B |
dotcom-rendering/dist/EmbedBlockComponent-importable.legacy.********************.js |
3.45 kB | 0 B |
dotcom-rendering/dist/embedIframe.********************.js |
759 B | 0 B |
dotcom-rendering/dist/embedIframe.legacy.********************.js |
810 B | 0 B |
dotcom-rendering/dist/EnhancePinnedPost-importable.********************.js |
6.24 kB | 0 B |
dotcom-rendering/dist/EnhancePinnedPost-importable.legacy.********************.js |
6.83 kB | 0 B |
dotcom-rendering/dist/FetchCommentCounts-importable.********************.js |
1.73 kB | 0 B |
dotcom-rendering/dist/FetchCommentCounts-importable.legacy.********************.js |
1.78 kB | 0 B |
dotcom-rendering/dist/FetchOnwardsData-importable.********************.js |
2.22 kB | 0 B |
dotcom-rendering/dist/FetchOnwardsData-importable.legacy.********************.js |
2.21 kB | 0 B |
dotcom-rendering/dist/FilterButton-importable.********************.js |
2.63 kB | 0 B |
dotcom-rendering/dist/FilterButton-importable.legacy.********************.js |
2.73 kB | 0 B |
dotcom-rendering/dist/FilterKeyEventsToggle-importable.********************.js |
3.82 kB | 0 B |
dotcom-rendering/dist/FilterKeyEventsToggle-importable.legacy.********************.js |
3.89 kB | 0 B |
dotcom-rendering/dist/FocusStyles-importable.********************.js |
4.71 kB | 0 B |
dotcom-rendering/dist/FocusStyles-importable.legacy.********************.js |
4.77 kB | 0 B |
dotcom-rendering/dist/ga.********************.js |
2.83 kB | 0 B |
dotcom-rendering/dist/ga.legacy.********************.js |
2.9 kB | 0 B |
dotcom-rendering/dist/GetCricketScoreboard-importable.********************.js |
4 kB | 0 B |
dotcom-rendering/dist/GetCricketScoreboard-importable.legacy.********************.js |
4.18 kB | 0 B |
dotcom-rendering/dist/GetMatchNav-importable.********************.js |
9.21 kB | 0 B |
dotcom-rendering/dist/GetMatchNav-importable.legacy.********************.js |
9.48 kB | 0 B |
dotcom-rendering/dist/GetMatchStats-importable.********************.js |
6.35 kB | 0 B |
dotcom-rendering/dist/GetMatchStats-importable.legacy.********************.js |
7.12 kB | 0 B |
dotcom-rendering/dist/GetMatchTabs-importable.********************.js |
3.07 kB | 0 B |
dotcom-rendering/dist/GetMatchTabs-importable.legacy.********************.js |
3.23 kB | 0 B |
dotcom-rendering/dist/guardian-braze-components-banner.********************.js |
11.3 kB | 0 B |
dotcom-rendering/dist/guardian-braze-components-banner.js |
10.3 kB | 0 B |
dotcom-rendering/dist/guardian-braze-components-banner.legacy.********************.js |
11.4 kB | 0 B |
dotcom-rendering/dist/guardian-braze-components-end-of-article.********************.js |
9.28 kB | 0 B |
dotcom-rendering/dist/guardian-braze-components-end-of-article.js |
9.75 kB | 0 B |
dotcom-rendering/dist/guardian-braze-components-end-of-article.legacy.********************.js |
9.36 kB | 0 B |
dotcom-rendering/dist/GuideAtomWrapper-importable.********************.js |
263 B | 0 B |
dotcom-rendering/dist/GuideAtomWrapper-importable.legacy.********************.js |
273 B | 0 B |
dotcom-rendering/dist/initDiscussion.********************.js |
10.9 kB | -2 B (0%) |
dotcom-rendering/dist/initDiscussion.legacy.********************.js |
11.2 kB | 0 B |
dotcom-rendering/dist/InstagramBlockComponent-importable.********************.js |
3 kB | 0 B |
dotcom-rendering/dist/InstagramBlockComponent-importable.legacy.********************.js |
3.09 kB | 0 B |
dotcom-rendering/dist/InteractiveBlockComponent-importable.********************.js |
4.26 kB | 0 B |
dotcom-rendering/dist/InteractiveBlockComponent-importable.legacy.********************.js |
4.42 kB | 0 B |
dotcom-rendering/dist/islands.********************.js |
11.1 kB | -1 B (0%) |
dotcom-rendering/dist/islands.legacy.********************.js |
11.9 kB | -1 B (0%) |
dotcom-rendering/dist/KeyEventsCarousel-importable.********************.js |
2.87 kB | 0 B |
dotcom-rendering/dist/KeyEventsCarousel-importable.legacy.********************.js |
2.96 kB | 0 B |
dotcom-rendering/dist/KnowledgeQuizAtomWrapper-importable.********************.js |
268 B | 0 B |
dotcom-rendering/dist/KnowledgeQuizAtomWrapper-importable.legacy.********************.js |
280 B | 0 B |
dotcom-rendering/dist/LabsHeader-importable.********************.js |
8.65 kB | 0 B |
dotcom-rendering/dist/LabsHeader-importable.legacy.********************.js |
8.81 kB | 0 B |
dotcom-rendering/dist/Links-importable.********************.js |
6.32 kB | 0 B |
dotcom-rendering/dist/Links-importable.legacy.********************.js |
7.38 kB | 0 B |
dotcom-rendering/dist/LiveBlogEpic-importable.********************.js |
5.51 kB | 0 B |
dotcom-rendering/dist/LiveBlogEpic-importable.legacy.********************.js |
6.18 kB | 0 B |
dotcom-rendering/dist/Liveness-importable.********************.js |
3.58 kB | 0 B |
dotcom-rendering/dist/Liveness-importable.legacy.********************.js |
3.65 kB | 0 B |
dotcom-rendering/dist/MapEmbedBlockComponent-importable.********************.js |
5.1 kB | 0 B |
dotcom-rendering/dist/MapEmbedBlockComponent-importable.legacy.********************.js |
5.32 kB | 0 B |
dotcom-rendering/dist/MostViewedFooterData-importable.********************.js |
7.59 kB | 0 B |
dotcom-rendering/dist/MostViewedFooterData-importable.legacy.********************.js |
7.74 kB | 0 B |
dotcom-rendering/dist/MostViewedRightWrapper-importable.********************.js |
6.96 kB | 0 B |
dotcom-rendering/dist/MostViewedRightWrapper-importable.legacy.********************.js |
4.94 kB | 0 B |
dotcom-rendering/dist/newsletterEmbedIframe.********************.js |
933 B | 0 B |
dotcom-rendering/dist/newsletterEmbedIframe.legacy.********************.js |
972 B | 0 B |
dotcom-rendering/dist/OnwardsUpper-importable.********************.js |
4.25 kB | +47 B (+1%) |
dotcom-rendering/dist/OnwardsUpper-importable.legacy.********************.js |
4.31 kB | 0 B |
dotcom-rendering/dist/ophan.********************.js |
7.14 kB | 0 B |
dotcom-rendering/dist/ophan.legacy.********************.js |
7.37 kB | 0 B |
dotcom-rendering/dist/PersonalityQuizAtomWrapper-importable.********************.js |
271 B | 0 B |
dotcom-rendering/dist/PersonalityQuizAtomWrapper-importable.legacy.********************.js |
282 B | 0 B |
dotcom-rendering/dist/ProfileAtomWrapper-importable.********************.js |
264 B | 0 B |
dotcom-rendering/dist/ProfileAtomWrapper-importable.legacy.********************.js |
274 B | 0 B |
dotcom-rendering/dist/PulsingDot-importable.********************.js |
1.66 kB | 0 B |
dotcom-rendering/dist/PulsingDot-importable.legacy.********************.js |
1.76 kB | 0 B |
dotcom-rendering/dist/QandaAtomWrapper-importable.********************.js |
262 B | 0 B |
dotcom-rendering/dist/QandaAtomWrapper-importable.legacy.********************.js |
272 B | 0 B |
dotcom-rendering/dist/ReaderRevenueDev-importable.********************.js |
4.58 kB | 0 B |
dotcom-rendering/dist/ReaderRevenueDev-importable.legacy.********************.js |
4.6 kB | 0 B |
dotcom-rendering/dist/readerRevenueDevUtils.********************.js |
3.19 kB | 0 B |
dotcom-rendering/dist/readerRevenueDevUtils.js |
2.33 kB | 0 B |
dotcom-rendering/dist/readerRevenueDevUtils.legacy.********************.js |
4.23 kB | 0 B |
dotcom-rendering/dist/ReaderRevenueLinks-importable.********************.js |
5.13 kB | 0 B |
dotcom-rendering/dist/ReaderRevenueLinks-importable.legacy.********************.js |
5.53 kB | 0 B |
dotcom-rendering/dist/relativeTime.********************.js |
1.3 kB | 0 B |
dotcom-rendering/dist/relativeTime.legacy.********************.js |
1.35 kB | 0 B |
dotcom-rendering/dist/RichLinkComponent-importable.********************.js |
5.71 kB | 0 B |
dotcom-rendering/dist/RichLinkComponent-importable.legacy.********************.js |
5.84 kB | 0 B |
dotcom-rendering/dist/SecureSignupIframe-importable.********************.js |
8.41 kB | 0 B |
dotcom-rendering/dist/SecureSignupIframe-importable.legacy.********************.js |
8.71 kB | 0 B |
dotcom-rendering/dist/sentry.********************.js |
684 B | 0 B |
dotcom-rendering/dist/sentry.legacy.********************.js |
691 B | 0 B |
dotcom-rendering/dist/sentryLoader.********************.js |
10.1 kB | 0 B |
dotcom-rendering/dist/sentryLoader.legacy.********************.js |
14.1 kB | 0 B |
dotcom-rendering/dist/SetABTests-importable.********************.js |
8.11 kB | 0 B |
dotcom-rendering/dist/SetABTests-importable.legacy.********************.js |
2.74 kB | 0 B |
dotcom-rendering/dist/ShareCount-importable.********************.js |
3.58 kB | 0 B |
dotcom-rendering/dist/ShareCount-importable.legacy.********************.js |
3.69 kB | 0 B |
dotcom-rendering/dist/shimport.********************.js |
2.78 kB | 0 B |
dotcom-rendering/dist/shimport.legacy.********************.js |
2.79 kB | 0 B |
dotcom-rendering/dist/ShowHideContainers-importable.********************.js |
662 B | 0 B |
dotcom-rendering/dist/ShowHideContainers-importable.legacy.********************.js |
700 B | 0 B |
dotcom-rendering/dist/SignInGateMain.********************.js |
4.46 kB | 0 B |
dotcom-rendering/dist/SignInGateMain.js |
2.87 kB | 0 B |
dotcom-rendering/dist/SignInGateMain.legacy.********************.js |
4.57 kB | 0 B |
dotcom-rendering/dist/SignInGateSelector-importable.********************.js |
5.19 kB | 0 B |
dotcom-rendering/dist/SignInGateSelector-importable.legacy.********************.js |
5.47 kB | 0 B |
dotcom-rendering/dist/SlotBodyEnd-importable.********************.js |
2.29 kB | 0 B |
dotcom-rendering/dist/SlotBodyEnd-importable.legacy.********************.js |
2.93 kB | 0 B |
dotcom-rendering/dist/SpotifyBlockComponent-importable.********************.js |
5.02 kB | 0 B |
dotcom-rendering/dist/SpotifyBlockComponent-importable.legacy.********************.js |
5.25 kB | 0 B |
dotcom-rendering/dist/StickyBottomBanner-importable.********************.js |
6.85 kB | 0 B |
dotcom-rendering/dist/StickyBottomBanner-importable.legacy.********************.js |
7.84 kB | 0 B |
dotcom-rendering/dist/SubNav-importable.********************.js |
3.25 kB | 0 B |
dotcom-rendering/dist/SubNav-importable.legacy.********************.js |
3.37 kB | 0 B |
dotcom-rendering/dist/TimelineAtomWrapper-importable.********************.js |
262 B | 0 B |
dotcom-rendering/dist/TimelineAtomWrapper-importable.legacy.********************.js |
273 B | 0 B |
dotcom-rendering/dist/TopicFilterBank-importable.********************.js |
3.71 kB | 0 B |
dotcom-rendering/dist/TopicFilterBank-importable.legacy.********************.js |
3.82 kB | 0 B |
dotcom-rendering/dist/TopRightAdSlot-importable.********************.js |
1.99 kB | 0 B |
dotcom-rendering/dist/TopRightAdSlot-importable.legacy.********************.js |
2.02 kB | 0 B |
dotcom-rendering/dist/TweetBlockComponent-importable.********************.js |
1.8 kB | 0 B |
dotcom-rendering/dist/TweetBlockComponent-importable.legacy.********************.js |
1.79 kB | 0 B |
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.********************.js |
3.01 kB | 0 B |
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.legacy.********************.js |
3.11 kB | 0 B |
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.********************.js |
5.11 kB | 0 B |
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.legacy.********************.js |
5.33 kB | 0 B |
dotcom-rendering/dist/VineBlockComponent-importable.********************.js |
2.81 kB | 0 B |
dotcom-rendering/dist/VineBlockComponent-importable.legacy.********************.js |
2.91 kB | 0 B |
dotcom-rendering/dist/YoutubeBlockComponent-importable.********************.js |
5.68 kB | 0 B |
dotcom-rendering/dist/YoutubeBlockComponent-importable.legacy.********************.js |
5.98 kB | 0 B |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
⚡️ Lighthouse report for the changes in this PR
Lighthouse tested 2 URLs
⚠️ Budget exceeded for 3 of 10 audits.
Report for Article
tested url
https://www.theguardian.com/commentisfree/2020/feb/08/hungary-now-for-the-new-right-what-venezuela-once-was-for-the-left
| Category | Status | Expected | Actual |
|---|---|---|---|
| First Contentful Paint | ✅ | 1500 | 1179 |
| Largest Contentful Paint | ✅ | 3000 | 1644 |
| Time to Interactive | ✅ | 3500 | 2169 |
| Cumulative Layout Shift | ⚠️ | 0.002 | 0.004428 |
| accessibility | ✅ | 0.97 | 1.000000 |
Report for Front
tested url
https://www.theguardian.com/uk
| Category | Status | Expected | Actual |
|---|---|---|---|
| First Contentful Paint | ✅ | 1500 | 1262 |
| Largest Contentful Paint | ✅ | 3000 | 2476 |
| Time to Interactive | ⚠️ | 3500 | 3693 |
| Cumulative Layout Shift | ✅ | 0.002 | 0.000000 |
| accessibility | ⚠️ | 0.97 | 0.890000 |
- Would it make sense to filter out the 'padding styles' container before mapping the list of containers in FrontLayout? (See inline comment.)
I agree, this would be much better. WIll action in another PR
- Now that there's a
padBottomprop onElementContainerto use for fixed/thrasher, might it make sense to move the bottom padding on other containers into their ElementContainers too, instead of in the<UL>element? If we do want this padding on all fronts containers, it seems like setting it in this one place on FrontLayout might be helpful for expressing that intention?
I just landed a small (😉) refactor PR to this area so I think this will need revisiting but I essentially agree, we want this type of container level padding to be set at this level.
There might be some trickiness here however because we also need the internal border, the one that shows in-between the left col and the content, to reach the top and bottoms of the container. For this to work the padding has to exist inside the container, not on the wrapping element. But I could be misunderstanding things, lets see where we land