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.

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

Update timeline at tablet/desktop #11396

Closed
wants to merge 3 commits into from

Conversation

domlander
Copy link
Contributor

@domlander domlander commented May 9, 2024

What does this change?

Updates the timeline designs at tablet and desktop breakpoints:

  • The vertical border lines have been removed, so that the vertical timeline line stands out.
  • The width restriction on the header has been removed at these breakpoints.

Why?

Fixes: #11248

To match designs: https://www.figma.com/file/xPr2tZZger7pszcO075tAQ/New-Formats---April-23?type=design&node-id=4667-8581&mode=design&t=AA51JnDiAuLob1b3-0

Screenshots

Before After
tablet tablet-before tablet-after
desktop desktop-before desktop-after

@domlander domlander force-pushed the doml/timeline-border-tablet-desktop branch from a9defda to 6ec8647 Compare May 9, 2024 09:16
@domlander domlander marked this pull request as ready for review May 9, 2024 09:16
@domlander domlander requested a review from a team as a code owner May 9, 2024 09:16
Copy link

github-actions bot commented May 9, 2024

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

Copy link

github-actions bot commented May 9, 2024

Size Change: +502 B (0%)

Total Size: 793 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1006.client.web.********************.js 3.19 kB 0 B
dotcom-rendering/dist/1045.client.web.********************.js 12.3 kB 0 B
dotcom-rendering/dist/1094.client.web.********************.js 5.87 kB 0 B
dotcom-rendering/dist/110.client.web.********************.js 8.65 kB 0 B
dotcom-rendering/dist/1225.client.web.********************.js 781 B 0 B
dotcom-rendering/dist/1299.client.web.********************.js 926 B 0 B
dotcom-rendering/dist/1640.client.web.********************.js 4.91 kB +78 B (+2%)
dotcom-rendering/dist/1692.client.web.********************.js 3.04 kB 0 B
dotcom-rendering/dist/1810.client.web.********************.js 3.59 kB 0 B
dotcom-rendering/dist/1889.client.web.********************.js 3.61 kB 0 B
dotcom-rendering/dist/2062.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/2170.client.web.********************.js 6.75 kB 0 B
dotcom-rendering/dist/226.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/2284.client.web.********************.js 3.13 kB 0 B
dotcom-rendering/dist/2342.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/2344.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/2373.client.web.********************.js 10.3 kB 0 B
dotcom-rendering/dist/2471.client.web.********************.js 715 B 0 B
dotcom-rendering/dist/2778.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/2784.client.web.********************.js 5.85 kB 0 B
dotcom-rendering/dist/2920.client.web.********************.js 526 B 0 B
dotcom-rendering/dist/3000.client.web.********************.js 887 B 0 B
dotcom-rendering/dist/3114.client.web.********************.js 651 B 0 B
dotcom-rendering/dist/3118.client.web.********************.js 496 B 0 B
dotcom-rendering/dist/3149.client.web.********************.js 2.01 kB 0 B
dotcom-rendering/dist/3255.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/3257.client.web.********************.js 3.6 kB 0 B
dotcom-rendering/dist/3336.client.web.********************.js 781 B 0 B
dotcom-rendering/dist/3399.client.web.********************.js 4.63 kB 0 B
dotcom-rendering/dist/3428.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/3463.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/3494.client.web.********************.js 823 B 0 B
dotcom-rendering/dist/3642.client.web.********************.js 787 B 0 B
dotcom-rendering/dist/3787.client.web.********************.js 5.51 kB 0 B
dotcom-rendering/dist/3849.client.web.********************.js 2.41 kB 0 B
dotcom-rendering/dist/3922.client.web.********************.js 724 B 0 B
dotcom-rendering/dist/3932.client.web.********************.js 789 B 0 B
dotcom-rendering/dist/3982.client.web.********************.js 4.77 kB 0 B
dotcom-rendering/dist/4103.client.web.********************.js 22.4 kB 0 B
dotcom-rendering/dist/424.client.web.********************.js 749 B 0 B
dotcom-rendering/dist/4442.client.web.********************.js 823 B 0 B
dotcom-rendering/dist/4463.client.web.********************.js 3.06 kB 0 B
dotcom-rendering/dist/4666.client.web.********************.js 8.94 kB 0 B
dotcom-rendering/dist/4673.client.web.********************.js 723 B 0 B
dotcom-rendering/dist/4811.client.web.********************.js 994 B 0 B
dotcom-rendering/dist/499.client.web.********************.js 2.82 kB 0 B
dotcom-rendering/dist/5044.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/5077.client.web.********************.js 441 B 0 B
dotcom-rendering/dist/5084.client.web.********************.js 751 B 0 B
dotcom-rendering/dist/5247.client.web.********************.js 2.95 kB 0 B
dotcom-rendering/dist/5308.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/5530.client.web.********************.js 2.01 kB 0 B
dotcom-rendering/dist/565.client.web.********************.js 669 B 0 B
dotcom-rendering/dist/5817.client.web.********************.js 915 B 0 B
dotcom-rendering/dist/6093.client.web.********************.js 749 B 0 B
dotcom-rendering/dist/6167.client.web.********************.js 640 B 0 B
dotcom-rendering/dist/6239.client.web.********************.js 3.42 kB 0 B
dotcom-rendering/dist/6241.client.web.********************.js 3.33 kB 0 B
dotcom-rendering/dist/6257.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/6351.client.web.********************.js 5.83 kB +70 B (+1%)
dotcom-rendering/dist/648.client.web.********************.js 5.89 kB 0 B
dotcom-rendering/dist/6640.client.web.********************.js 906 B 0 B
dotcom-rendering/dist/6870.client.web.********************.js 959 B 0 B
dotcom-rendering/dist/7085.client.web.********************.js 8.23 kB 0 B
dotcom-rendering/dist/7110.client.web.********************.js 3 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7196.client.web.********************.js 889 B 0 B
dotcom-rendering/dist/72.client.web.********************.js 961 B 0 B
dotcom-rendering/dist/7270.client.web.********************.js 155 B 0 B
dotcom-rendering/dist/7387.client.web.********************.js 955 B 0 B
dotcom-rendering/dist/7660.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/7697.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/7703.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/7723.client.web.********************.js 921 B 0 B
dotcom-rendering/dist/7859.client.web.********************.js 3.8 kB 0 B
dotcom-rendering/dist/8082.client.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/8134.client.web.********************.js 595 B 0 B
dotcom-rendering/dist/8179.client.web.********************.js 825 B 0 B
dotcom-rendering/dist/8182.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/8279.client.web.********************.js 42.9 kB 0 B
dotcom-rendering/dist/8346.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/8565.client.web.********************.js 642 B 0 B
dotcom-rendering/dist/8768.client.web.********************.js 1.54 kB 0 B
dotcom-rendering/dist/8791.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/8851.client.web.********************.js 2.93 kB 0 B
dotcom-rendering/dist/889.client.web.********************.js 854 B 0 B
dotcom-rendering/dist/8907.client.web.********************.js 789 B 0 B
dotcom-rendering/dist/9060.client.web.********************.js 877 B 0 B
dotcom-rendering/dist/9225.client.web.********************.js 582 B 0 B
dotcom-rendering/dist/9396.client.web.********************.js 680 B 0 B
dotcom-rendering/dist/9430.client.web.********************.js 508 B 0 B
dotcom-rendering/dist/9448.client.web.********************.js 2.98 kB 0 B
dotcom-rendering/dist/9455.client.web.********************.js 6.41 kB 0 B
dotcom-rendering/dist/9535.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/9604.client.web.********************.js 530 B 0 B
dotcom-rendering/dist/9655.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/9789.client.web.********************.js 922 B 0 B
dotcom-rendering/dist/9804.client.web.********************.js 2.94 kB 0 B
dotcom-rendering/dist/9820.client.web.********************.js 17.9 kB 0 B
dotcom-rendering/dist/9936.client.web.********************.js 1.85 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.77 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 422 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.62 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.02 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.46 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 2.01 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 36.9 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.73 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.75 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 4.82 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.76 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 5.64 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 536 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 3.26 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.81 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.67 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.56 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 4.11 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.01 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 610 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 843 B 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 342 B 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.7 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 4.42 kB +68 B (+2%)
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.9 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.64 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.1 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 9.63 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 781 B 0 B
dotcom-rendering/dist/HeaderTopBar-importable.client.web.********************.js 7.04 kB +76 B (+1%)
dotcom-rendering/dist/index.client.web.********************.js 47.2 kB +1 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 854 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.14 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.66 kB 0 B
dotcom-rendering/dist/InteractiveSupportButton-importable.client.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.66 kB +66 B (+1%)
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 434 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.43 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.93 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 6.7 kB +73 B (+1%)
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 5.61 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 5.75 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 8.32 kB 0 B
dotcom-rendering/dist/MostViewedRightWrapper-importable.client.web.********************.js 4.01 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 4.05 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.62 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 542 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 800 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 538 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.89 kB 0 B
dotcom-rendering/dist/ReaderRevenueLinks-importable.client.web.********************.js 4.64 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 1.99 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.76 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/SendAMessage-importable.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.14 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 765 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 484 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 1.52 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.79 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 648 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 6.96 kB 0 B
dotcom-rendering/dist/SignInGateCustomizableText.client.web.********************.js 956 B 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 1.19 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.81 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.14 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.45 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 3.23 kB 0 B
dotcom-rendering/dist/SupportTheG-importable.client.web.********************.js 4.76 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.19 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.24 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.01 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 5.62 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 5.51 kB +70 B (+1%)
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 4.65 kB 0 B

compressed-size-action

@domlander domlander force-pushed the doml/timeline-border-tablet-desktop branch 4 times, most recently from f81bbf0 to a8569fd Compare May 9, 2024 09:38
@domlander domlander force-pushed the doml/timeline-border-tablet-desktop branch from a8569fd to 078db88 Compare May 9, 2024 09:39
Copy link
Member

@mxdvl mxdvl left a comment

Choose a reason for hiding this comment

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

This looks good, better even!

Some thoughts about the interface and props, but none of them blockers and can all be adressed in follow-ups if we chose to.

dotcom-rendering/src/components/ElementContainer.tsx Outdated Show resolved Hide resolved
dotcom-rendering/src/components/ElementContainer.tsx Outdated Show resolved Hide resolved
Comment on lines +43 to +44
border-left: 1px solid ${colour};
border-right: 1px solid ${colour};
Copy link
Member

Choose a reason for hiding this comment

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

Would the use of --timeline-event-border not be appropriate here? It brings about several benefits:

  • no dynamic generation of Emotion styles
  • consistency across all formats

It might require quite a bit more work we can address as a follow-up, as I appreciate the logic for overrides is a bit finnicky and this may not be the best PR to do this :D

@domlander domlander added the run_chromatic Runs chromatic when label is applied label May 9, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label May 9, 2024
@domlander
Copy link
Contributor Author

Closing as I misinterpreted designs. We cannot remove the left and right border lines of the article as this would break the contract with the Standard Article design

@domlander domlander closed this May 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update tablet and desktop breakpoints
2 participants