Skip to content

Update video card design - #7972

Merged
abeddow91 merged 14 commits into
mainfrom
ab/video-card-redesign
Jul 4, 2023
Merged

Update video card design#7972
abeddow91 merged 14 commits into
mainfrom
ab/video-card-redesign

Conversation

@abeddow91

@abeddow91 abeddow91 commented Jun 20, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor

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

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

Copy link
Copy Markdown

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
1 of 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