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

Jump to bottom

Update video card design #7972

Merged
merged 14 commits into from
Jul 4, 2023
Merged

Update video card design #7972

merged 14 commits into from
Jul 4, 2023

Conversation

abeddow91
Copy link
Contributor

@abeddow91 abeddow91 commented Jun 20, 2023 •
edited
Loading

What does this change?

This updates the video card design. This includes

  • removing the pillar colour from the duration and play button
  • positioning the duration top right (this is hidden on mobile on left aligned images)
  • center-positioning the play button
  • increasing the size of the play button

Why?

This is part of a larger body of work, with new designs for videos across the whole site aimed at reducing the noise of video cards.

Screenshots

desktop

Before After
before after
Before After
before-d after-d

mobile

Before After
before-m after-m

@abeddow91 abeddow91 requested a review from a team as a code owner June 20, 2023 10:42
@abeddow91 abeddow91 added the run_chromatic Runs chromatic when label is applied label Jun 20, 2023
@github-actions
Copy link

github-actions bot commented Jun 20, 2023 •
edited
Loading

Size Change: -17 kB (-3%)

Total Size: 591 kB

Filename Size Change
dotcom-rendering/dist/1238.modern.********************.js 0 B -3.07 kB (removed) 🏆
dotcom-rendering/dist/3911.modern.********************.js 0 B -3.16 kB (removed) 🏆
dotcom-rendering/dist/9500.modern.********************.js 0 B -10.7 kB (removed) 🏆
ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1266.modern.********************.js 3.97 kB 0 B
dotcom-rendering/dist/1813.modern.********************.js 6.52 kB 0 B
dotcom-rendering/dist/2006.modern.********************.js 3.84 kB 0 B
dotcom-rendering/dist/2854.modern.********************.js 3.3 kB 0 B
dotcom-rendering/dist/3250.modern.********************.js 3.56 kB 0 B
dotcom-rendering/dist/3398.modern.********************.js 20.4 kB 0 B
dotcom-rendering/dist/3577.modern.********************.js 4.77 kB 0 B
dotcom-rendering/dist/3993.modern.********************.js 6.21 kB 0 B
dotcom-rendering/dist/4331.modern.********************.js 3.36 kB 0 B
dotcom-rendering/dist/5153.modern.********************.js 2.28 kB 0 B
dotcom-rendering/dist/5162.modern.********************.js 2.5 kB 0 B
dotcom-rendering/dist/5182.modern.********************.js 3.9 kB 0 B
dotcom-rendering/dist/5237.modern.********************.js 2.44 kB 0 B
dotcom-rendering/dist/5593.modern.********************.js 2.3 kB 0 B
dotcom-rendering/dist/5743.modern.********************.js 3.25 kB 0 B
dotcom-rendering/dist/6297.modern.********************.js 21.3 kB 0 B
dotcom-rendering/dist/6633.modern.********************.js 3.22 kB 0 B
dotcom-rendering/dist/6814.modern.********************.js 5.56 kB 0 B
dotcom-rendering/dist/6939.modern.********************.js 5.36 kB 0 B
dotcom-rendering/dist/7392.modern.********************.js 2.49 kB 0 B
dotcom-rendering/dist/7844.modern.********************.js 4.98 kB 0 B
dotcom-rendering/dist/7872.modern.********************.js 1.89 kB 0 B
dotcom-rendering/dist/8012.modern.********************.js 4.66 kB 0 B
dotcom-rendering/dist/8326.modern.********************.js 2.61 kB 0 B
dotcom-rendering/dist/8452.modern.********************.js 4.28 kB 0 B
dotcom-rendering/dist/8780.modern.********************.js 3.16 kB 0 B
dotcom-rendering/dist/8888.modern.********************.js 2.75 kB 0 B
dotcom-rendering/dist/9370.modern.********************.js 3.13 kB 0 B
dotcom-rendering/dist/9463.modern.********************.js 635 B 0 B
dotcom-rendering/dist/9470.modern.********************.js 28.8 kB 0 B
dotcom-rendering/dist/9571.modern.********************.js 3.91 kB 0 B
dotcom-rendering/dist/9861.modern.********************.js 3.5 kB 0 B
dotcom-rendering/dist/9874.modern.********************.js 4.96 kB 0 B
dotcom-rendering/dist/9875.modern.********************.js 10.8 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.modern.********************.js 410 B 0 B
dotcom-rendering/dist/AnimatePulsingDots-importable.modern.********************.js 389 B 0 B
dotcom-rendering/dist/atomIframe.modern.********************.js 516 B 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.modern.********************.js 463 B 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.modern.********************.js 1.14 kB 0 B
dotcom-rendering/dist/Branding-importable.modern.********************.js 2.18 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.modern.********************.js 36.9 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.modern.********************.js 5.5 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.modern.********************.js 6.46 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.modern.********************.js 6.59 kB 0 B
dotcom-rendering/dist/Carousel-importable.modern.********************.js 5.94 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.modern.********************.js 7.88 kB 0 B
dotcom-rendering/dist/ChartAtomWrapper-importable.modern.********************.js 474 B 0 B
dotcom-rendering/dist/CommentCount-importable.modern.********************.js 2.77 kB 0 B
dotcom-rendering/dist/discussion.modern.********************.js 393 B 0 B
dotcom-rendering/dist/DiscussionContainer-importable.modern.********************.js 22.2 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.modern.********************.js 3.73 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.modern.********************.js 2.72 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.modern.********************.js 3.25 kB 0 B
dotcom-rendering/dist/embedIframe.modern.********************.js 520 B 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.modern.********************.js 1.96 kB 0 B
dotcom-rendering/dist/FetchCommentCounts-importable.modern.********************.js 2.97 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.modern.********************.js 1.97 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.modern.********************.js 3.41 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.modern.********************.js 511 B 0 B
dotcom-rendering/dist/frameworks.modern.********************.js 20.5 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.modern.********************.js 3.36 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.modern.********************.js 11.4 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.modern.********************.js 6.32 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.modern.********************.js 2.42 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.modern.********************.js 13.3 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.modern.********************.js 10.3 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.modern.********************.js 476 B 0 B
dotcom-rendering/dist/HeaderTopBar-importable.modern.********************.js 10.8 kB 0 B
dotcom-rendering/dist/index.modern.********************.js 33.6 kB -3 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.modern.********************.js 2.79 kB 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.modern.********************.js 5.8 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.modern.********************.js 4.09 kB 0 B
dotcom-rendering/dist/InteractiveSupportButton-importable.modern.********************.js 4.14 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.modern.********************.js 2.21 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtomWrapper-importable.modern.********************.js 481 B 0 B
dotcom-rendering/dist/LatestLinks-importable.modern.********************.js 1.85 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.modern.********************.js 5.16 kB 0 B
dotcom-rendering/dist/Liveness-importable.modern.********************.js 5.53 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.modern.********************.js 6.9 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.modern.********************.js 5.32 kB 0 B
dotcom-rendering/dist/Metrics-importable.modern.********************.js 2.32 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.modern.********************.js 5.36 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.modern.********************.js 7.57 kB 0 B
dotcom-rendering/dist/MostViewedRightWrapper-importable.modern.********************.js 3.79 kB 0 B
dotcom-rendering/dist/newsletterEmbedIframe.modern.********************.js 621 B 0 B
dotcom-rendering/dist/OnwardsUpper-importable.modern.********************.js 3.86 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtomWrapper-importable.modern.********************.js 483 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.modern.********************.js 478 B 0 B
dotcom-rendering/dist/QandaAtomWrapper-importable.modern.********************.js 475 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.modern.********************.js 461 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.modern.********************.js 3.03 kB 0 B
dotcom-rendering/dist/ReaderRevenueLinks-importable.modern.********************.js 5.82 kB 0 B
dotcom-rendering/dist/RecipeMultiplier-importable.modern.********************.js 3.24 kB 0 B
dotcom-rendering/dist/relativeTime.modern.********************.js 976 B 0 B
dotcom-rendering/dist/RichLinkComponent-importable.modern.********************.js 5.05 kB 0 B
dotcom-rendering/dist/SecureSignupIframe-importable.modern.********************.js 2.57 kB 0 B
dotcom-rendering/dist/SendAMessage-importable.modern.********************.js 4.37 kB 0 B
dotcom-rendering/dist/sentry.modern.********************.js 766 B 0 B
dotcom-rendering/dist/SetABTests-importable.modern.********************.js 3.75 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.modern.********************.js 537 B 0 B
dotcom-rendering/dist/ShareCount-importable.modern.********************.js 2.91 kB 0 B
dotcom-rendering/dist/shimport.modern.********************.js 2.78 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.modern.********************.js 719 B 0 B
dotcom-rendering/dist/ShowMore-importable.modern.********************.js 5.17 kB -1 B (0%)
dotcom-rendering/dist/SignInGateMain.modern.********************.js 2.96 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.modern.********************.js 3.86 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.modern.********************.js 3.92 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.modern.********************.js 2.91 kB 0 B
dotcom-rendering/dist/Snow-importable.modern.********************.js 4.26 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.modern.********************.js 5.17 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.modern.********************.js 4 kB 0 B
dotcom-rendering/dist/SubNav-importable.modern.********************.js 2.34 kB 0 B
dotcom-rendering/dist/SupportTheG-importable.modern.********************.js 5.94 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.modern.********************.js 3.08 kB 0 B
dotcom-rendering/dist/TimelineAtomWrapper-importable.modern.********************.js 476 B 0 B
dotcom-rendering/dist/TopRightAdSlot-importable.modern.********************.js 631 B 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.modern.********************.js 1 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.modern.********************.js 2.8 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.modern.********************.js 5.33 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.modern.********************.js 2.64 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.modern.********************.js 4.22 kB 0 B

compressed-size-action

@abeddow91 abeddow91 force-pushed the ab/video-card-redesign branch from b9c8419 to 3afc7b8 Compare June 22, 2023 11:21
@abeddow91 abeddow91 changed the title Ab/video card redesign Update video card design Jun 22, 2023
@sophie-macmillan sophie-macmillan mentioned this pull request Jun 22, 2023
Merged
2 tasks
@abeddow91 abeddow91 force-pushed the ab/video-card-redesign branch from 315b963 to 74024a0 Compare June 28, 2023 08:38
@sophie-macmillan sophie-macmillan mentioned this pull request Jun 29, 2023
Closed
@abeddow91 abeddow91 force-pushed the ab/video-card-redesign branch 3 times, most recently from 5bcb5aa to b601a50 Compare July 4, 2023 09:27
@mxdvl mxdvl mentioned this pull request Jul 4, 2023
Merged
@abeddow91 abeddow91 force-pushed the ab/video-card-redesign branch from ea61540 to 1a01a5b Compare July 4, 2023 14:57
@abeddow91 abeddow91 merged commit 039e28a into main Jul 4, 2023
@abeddow91 abeddow91 deleted the ab/video-card-redesign branch July 4, 2023 15:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sophie-macmillan sophie-macmillan sophie-macmillan approved these changes

Assignees
No one assigned
Labels
dotcom-rendering run_chromatic Runs chromatic when label is applied
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@abeddow91 @sophie-macmillan