dotcom-rendering
dotcom-rendering copied to clipboard
guardian
Test: Datawrapper embed styling
Deploy build 38459 of Mobile::mobile-apps-rendering to CODE
All deployment options
From guardian/actions-riff-raff.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Size Change: +273 B (+0.03%)
Total Size: 921 kB
| Filename | Size | Change |
|---|---|---|
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js |
6.55 kB | +273 B (+4.35%) |
ℹ️ View Unchanged
| Filename | Size |
|---|---|
dotcom-rendering/dist/1000.client.web.********************.js |
999 B |
dotcom-rendering/dist/1026.client.web.********************.js |
784 B |
dotcom-rendering/dist/1090.client.web.********************.js |
752 B |
dotcom-rendering/dist/1156.client.web.********************.js |
3.56 kB |
dotcom-rendering/dist/1391.client.web.********************.js |
725 B |
dotcom-rendering/dist/1417.client.web.********************.js |
2.53 kB |
dotcom-rendering/dist/146.client.web.********************.js |
5.29 kB |
dotcom-rendering/dist/1476.client.web.********************.js |
784 B |
dotcom-rendering/dist/1515.client.web.********************.js |
6.86 kB |
dotcom-rendering/dist/1628.client.web.********************.js |
2.87 kB |
dotcom-rendering/dist/1667.client.web.********************.js |
918 B |
dotcom-rendering/dist/1884.client.web.********************.js |
3.4 kB |
dotcom-rendering/dist/1888.client.web.********************.js |
2.92 kB |
dotcom-rendering/dist/1904.client.web.********************.js |
12.6 kB |
dotcom-rendering/dist/1940.client.web.********************.js |
507 B |
dotcom-rendering/dist/2123.client.web.********************.js |
619 B |
dotcom-rendering/dist/2182.client.web.********************.js |
529 B |
dotcom-rendering/dist/2249.client.web.********************.js |
4.91 kB |
dotcom-rendering/dist/2310.client.web.********************.js |
880 B |
dotcom-rendering/dist/2455.client.web.********************.js |
4.55 kB |
dotcom-rendering/dist/267.client.web.********************.js |
917 B |
dotcom-rendering/dist/281.client.web.********************.js |
642 B |
dotcom-rendering/dist/3006.client.web.********************.js |
4.48 kB |
dotcom-rendering/dist/3109.client.web.********************.js |
803 B |
dotcom-rendering/dist/3270.client.web.********************.js |
961 B |
dotcom-rendering/dist/3304.client.web.********************.js |
853 B |
dotcom-rendering/dist/3364.client.web.********************.js |
3.97 kB |
dotcom-rendering/dist/346.client.web.********************.js |
3.21 kB |
dotcom-rendering/dist/3769.client.web.********************.js |
999 B |
dotcom-rendering/dist/3921.client.web.********************.js |
2 kB |
dotcom-rendering/dist/408.client.web.********************.js |
11 kB |
dotcom-rendering/dist/4122.client.web.********************.js |
1.89 kB |
dotcom-rendering/dist/4149.client.web.********************.js |
3.77 kB |
dotcom-rendering/dist/4282.client.web.********************.js |
685 B |
dotcom-rendering/dist/4501.client.web.********************.js |
4.29 kB |
dotcom-rendering/dist/4628.client.web.********************.js |
654 B |
dotcom-rendering/dist/4769.client.web.********************.js |
4.28 kB |
dotcom-rendering/dist/4820.client.web.********************.js |
2.42 kB |
dotcom-rendering/dist/4866.client.web.********************.js |
6.32 kB |
dotcom-rendering/dist/4903.client.web.********************.js |
6.04 kB |
dotcom-rendering/dist/4941.client.web.********************.js |
890 B |
dotcom-rendering/dist/4951.client.web.********************.js |
11.4 kB |
dotcom-rendering/dist/5087.client.web.********************.js |
439 B |
dotcom-rendering/dist/5340.client.web.********************.js |
3.32 kB |
dotcom-rendering/dist/5371.client.web.********************.js |
3.34 kB |
dotcom-rendering/dist/5412.client.web.********************.js |
2.89 kB |
dotcom-rendering/dist/5538.client.web.********************.js |
6.18 kB |
dotcom-rendering/dist/5658.client.web.********************.js |
750 B |
dotcom-rendering/dist/5757.client.web.********************.js |
931 B |
dotcom-rendering/dist/5761.client.web.********************.js |
4.65 kB |
dotcom-rendering/dist/5880.client.web.********************.js |
828 B |
dotcom-rendering/dist/5937.client.web.********************.js |
2.17 kB |
dotcom-rendering/dist/5944.client.web.********************.js |
5.16 kB |
dotcom-rendering/dist/5982.client.web.********************.js |
3.78 kB |
dotcom-rendering/dist/6044.client.web.********************.js |
726 B |
dotcom-rendering/dist/6071.client.web.********************.js |
577 B |
dotcom-rendering/dist/6135.client.web.********************.js |
779 B |
dotcom-rendering/dist/6261.client.web.********************.js |
3.03 kB |
dotcom-rendering/dist/6291.client.web.********************.js |
4.27 kB |
dotcom-rendering/dist/6505.client.web.********************.js |
1 kB |
dotcom-rendering/dist/6598.client.web.********************.js |
780 B |
dotcom-rendering/dist/661.client.web.********************.js |
3.21 kB |
dotcom-rendering/dist/6638.client.web.********************.js |
907 B |
dotcom-rendering/dist/6665.client.web.********************.js |
5.03 kB |
dotcom-rendering/dist/6738.client.web.********************.js |
6.01 kB |
dotcom-rendering/dist/678.client.web.********************.js |
804 B |
dotcom-rendering/dist/6915.client.web.********************.js |
22.7 kB |
dotcom-rendering/dist/7072.client.web.********************.js |
3.85 kB |
dotcom-rendering/dist/7081.client.web.********************.js |
20.2 kB |
dotcom-rendering/dist/7116.client.web.********************.js |
23 kB |
dotcom-rendering/dist/7242.client.web.********************.js |
4.52 kB |
dotcom-rendering/dist/7341.client.web.********************.js |
4 kB |
dotcom-rendering/dist/7407.client.web.********************.js |
3.7 kB |
dotcom-rendering/dist/7691.client.web.********************.js |
853 B |
dotcom-rendering/dist/7713.client.web.********************.js |
2.02 kB |
dotcom-rendering/dist/7780.client.web.********************.js |
2.28 kB |
dotcom-rendering/dist/7962.client.web.********************.js |
3.58 kB |
dotcom-rendering/dist/8103.client.web.********************.js |
4.02 kB |
dotcom-rendering/dist/83.client.web.********************.js |
750 B |
dotcom-rendering/dist/8318.client.web.********************.js |
2.17 kB |
dotcom-rendering/dist/840.client.web.********************.js |
3.21 kB |
dotcom-rendering/dist/8426.client.web.********************.js |
1.91 kB |
dotcom-rendering/dist/8437.client.web.********************.js |
3.13 kB |
dotcom-rendering/dist/8504.client.web.********************.js |
827 B |
dotcom-rendering/dist/8536.client.web.********************.js |
595 B |
dotcom-rendering/dist/8626.client.web.********************.js |
890 B |
dotcom-rendering/dist/8671.client.web.********************.js |
157 B |
dotcom-rendering/dist/8697.client.web.********************.js |
956 B |
dotcom-rendering/dist/8730.client.web.********************.js |
4.4 kB |
dotcom-rendering/dist/8746.client.web.********************.js |
3.01 kB |
dotcom-rendering/dist/8815.client.web.********************.js |
3.86 kB |
dotcom-rendering/dist/8822.client.web.********************.js |
526 B |
dotcom-rendering/dist/8833.client.web.********************.js |
829 B |
dotcom-rendering/dist/8903.client.web.********************.js |
3.83 kB |
dotcom-rendering/dist/8990.client.web.********************.js |
3.41 kB |
dotcom-rendering/dist/9080.client.web.********************.js |
3.69 kB |
dotcom-rendering/dist/9122.client.web.********************.js |
8.08 kB |
dotcom-rendering/dist/9132.client.web.********************.js |
4.18 kB |
dotcom-rendering/dist/9184.client.web.********************.js |
493 B |
dotcom-rendering/dist/9216.client.web.********************.js |
3.45 kB |
dotcom-rendering/dist/9373.client.web.********************.js |
4.4 kB |
dotcom-rendering/dist/940.client.web.********************.js |
10.3 kB |
dotcom-rendering/dist/9493.client.web.********************.js |
785 B |
dotcom-rendering/dist/9557.client.web.********************.js |
921 B |
dotcom-rendering/dist/9608.client.web.********************.js |
3.64 kB |
dotcom-rendering/dist/9696.client.web.********************.js |
5.88 kB |
dotcom-rendering/dist/9721.client.web.********************.js |
717 B |
dotcom-rendering/dist/9736.client.web.********************.js |
44.2 kB |
dotcom-rendering/dist/9835.client.web.********************.js |
647 B |
dotcom-rendering/dist/9897.client.web.********************.js |
12 kB |
dotcom-rendering/dist/9899.client.web.********************.js |
669 B |
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js |
5.96 kB |
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js |
2.85 kB |
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js |
3.94 kB |
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js |
425 B |
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js |
3.57 kB |
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js |
3.16 kB |
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js |
3.48 kB |
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js |
2.52 kB |
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js |
3.08 kB |
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js |
4.88 kB |
dotcom-rendering/dist/Branding-importable.client.web.********************.js |
2.54 kB |
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js |
37.2 kB |
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js |
1.96 kB |
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js |
6.72 kB |
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js |
8.26 kB |
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js |
2.96 kB |
dotcom-rendering/dist/Carousel-importable.client.web.********************.js |
6.68 kB |
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js |
4.52 kB |
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js |
539 B |
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js |
2.8 kB |
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js |
1.91 kB |
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js |
1.22 kB |
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js |
1.74 kB |
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js |
3.14 kB |
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js |
1.72 kB |
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js |
5.96 kB |
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js |
3.75 kB |
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js |
2.02 kB |
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js |
4.2 kB |
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js |
1.93 kB |
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js |
970 B |
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js |
619 B |
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js |
3.43 kB |
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js |
347 B |
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js |
3.72 kB |
dotcom-rendering/dist/frameworks.client.web.********************.js |
20.9 kB |
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js |
7.63 kB |
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js |
3.82 kB |
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js |
10.5 kB |
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js |
7.4 kB |
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js |
2.22 kB |
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js |
15.8 kB |
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js |
10 kB |
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js |
783 B |
dotcom-rendering/dist/index.client.web.********************.js |
46 kB |
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js |
2.79 kB |
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js |
851 B |
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js |
4.24 kB |
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js |
4.77 kB |
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js |
3.62 kB |
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js |
2.1 kB |
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js |
435 B |
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js |
6.51 kB |
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js |
3.78 kB |
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js |
5.28 kB |
dotcom-rendering/dist/Liveness-importable.client.web.********************.js |
4.83 kB |
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js |
7.63 kB |
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js |
4.98 kB |
dotcom-rendering/dist/Metrics-importable.client.web.********************.js |
2.7 kB |
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js |
4 kB |
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js |
6.22 kB |
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js |
5.18 kB |
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js |
5.32 kB |
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js |
3.77 kB |
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js |
543 B |
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js |
803 B |
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js |
750 B |
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js |
542 B |
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js |
469 B |
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js |
1.97 kB |
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js |
2.53 kB |
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js |
6.29 kB |
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js |
5.01 kB |
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js |
3.31 kB |
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js |
3.31 kB |
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js |
4.61 kB |
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js |
2.19 kB |
dotcom-rendering/dist/sentry.client.web.********************.js |
792 B |
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js |
3.85 kB |
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js |
482 B |
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js |
3.72 kB |
dotcom-rendering/dist/shimport.client.web.********************.js |
2.8 kB |
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js |
733 B |
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js |
1.75 kB |
dotcom-rendering/dist/SignInGateMain.client.web.********************.js |
4.51 kB |
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js |
5.6 kB |
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js |
3.16 kB |
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js |
3.48 kB |
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js |
4.8 kB |
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js |
4.22 kB |
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js |
7.68 kB |
dotcom-rendering/dist/SubNav-importable.client.web.********************.js |
2.9 kB |
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js |
2.7 kB |
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js |
1.23 kB |
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js |
14.7 kB |
dotcom-rendering/dist/TopBar-importable.client.web.********************.js |
8.25 kB |
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js |
2.74 kB |
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js |
1.13 kB |
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js |
2.8 kB |
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js |
5.05 kB |
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js |
4.99 kB |
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js |
2.66 kB |
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js |
6.55 kB |
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js |
5.94 kB |
Deploy build 14286 of dotcom:rendering-all to CODE
All deployment options
From guardian/actions-riff-raff.
I took some screenshots of a Datawrapper graphic in CODE with these changes, across the different roles and mobile vs. desktop views:
Old screenshots hidden: click to expand
Inline role
Desktop
Mobile
Supporting role
Desktop
Mobile
Showcase role
Desktop
Mobile
Thumbnail role
Desktop
Mobile
Immersive role
Desktop
Mobile
I have added a bottom border in supporting, showcase, and immersive:
Old screenshots hidden: click to expand
Supporting role
Mobile
Desktop
Showcase role
Desktop
Mobile
Immersive role
Desktop
Mobile
I made some changes to the spacing and borders after reviewing with the visuals team. Here are screenshots of the results, made by running this branch locally along with a local frontend:
Inline role
Desktop
Mobile
Supporting role
Desktop
Mobile
Showcase role
Desktop
Mobile
Thumbnail role
Desktop
Mobile
Immersive role
Desktop
Mobile
I’ve also taken some screenshots from main in my local setup. These show that the weird margin behaviour for immersive on mobile predates my changes (and I think doesn’t display when testing in CODE, so something about the local setup):
Inline role
Desktop
Mobile
Supporting role
Desktop
Mobile
Showcase role
Desktop
Mobile
Thumbnail role
Desktop
Mobile
Immersive role
Desktop
Mobile
While I had this branch deployed to CODE, I checked whether Datawrapper’s automatic dark mode is currently working, and it doesn’t really seem to be:
It might be that the dark mode colours are not set up quite right on the test team, but I’m a bit surprised by the white background: we may need to do some work on this to get dark mode working right.
Interesting: disabling one background CSS rule gives us the result we’re looking for!
Ah yes, it was deliberately kept white to handle interactives which don’t support dark mode: https://github.com/guardian/dotcom-rendering/pull/10578
Hmmm, it would be nice if we could change this! Maybe just for datawrapper graphics, or maybe for everything. I don’t want to look at it in this PR though.
Meant to write this comment on this PR (in between my last two) but accidentally put it on another one:
Hmmm, I think the issue might be that this colour (--interactive-block-background in dark theme) is currently set to white? https://github.com/guardian/dotcom-rendering/blob/9ea62fa0b1d4e841611396c96371c56f72e9302f/dotcom-rendering/src/palette.ts#L4095
I assume this is a deliberate decision: will take a look at the git history for the rationale.
