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

Highlight card design updates #13195

Merged
merged 2 commits into from
Jan 28, 2025
Merged

Highlight card design updates #13195

merged 2 commits into from
Jan 28, 2025

Conversation

abeddow91
Copy link
Contributor

@abeddow91 abeddow91 commented Jan 23, 2025 •
edited
Loading

What does this change?

Updates the design of highlight cards

These changes include:

  • removing the media card grid as this is not longer desired
  • prefering margin over gap for row spacing
  • fixing the alignment of images such that regular images are top aligned on mobile but avatars are always end aligned.
  • Adjusting the size of images to 112px fixed across all images on highlights cards.

NB - podcast pill adjustment and square podcast series image changes will be made in separate prs to prevent bloat.

Why?

Highlights cards have been respec-d by design https://www.figma.com/design/OBiUI7dJkso1GXfsovfzaY/%E2%97%88-Web-library?node-id=6035-8517&t=eMKOPT4ElSDOalO4-11

Screenshots

Screenshot 2025-01-23 at 18 14 35
Screenshot 2025-01-23 at 18 14 44

@abeddow91 abeddow91 force-pushed the ab/highlights/media-cards branch from cbb8a4e to 38a7032 Compare January 23, 2025 18:28
@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 23, 2025 •
edited
Loading

Deploy build 40227 of Mobile::mobile-apps-rendering to CODE

All deployment options

From guardian/actions-riff-raff.

@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 23, 2025 •
edited
Loading

Size Change: -14 B (0%)

Total Size: 887 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1076.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/1101.client.web.********************.js 4.83 kB 0 B
dotcom-rendering/dist/1262.client.web.********************.js 4.48 kB 0 B
dotcom-rendering/dist/1370.client.web.********************.js 6.56 kB 0 B
dotcom-rendering/dist/1401.client.web.********************.js 441 B 0 B
dotcom-rendering/dist/1427.client.web.********************.js 4.94 kB 0 B
dotcom-rendering/dist/1477.client.web.********************.js 3.52 kB 0 B
dotcom-rendering/dist/1669.client.web.********************.js 12.3 kB 0 B
dotcom-rendering/dist/1714.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/2188.client.web.********************.js 6.52 kB 0 B
dotcom-rendering/dist/2444.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/2482.client.web.********************.js 44.8 kB 0 B
dotcom-rendering/dist/280.client.web.********************.js 531 B 0 B
dotcom-rendering/dist/2930.client.web.********************.js 14.2 kB 0 B
dotcom-rendering/dist/3213.client.web.********************.js 5.42 kB 0 B
dotcom-rendering/dist/342.client.web.********************.js 4.18 kB 0 B
dotcom-rendering/dist/3524.client.web.********************.js 3.51 kB 0 B
dotcom-rendering/dist/3769.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/3789.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/39.client.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/3937.client.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/4170.client.web.********************.js 16.3 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4684.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/4878.client.web.********************.js 8.08 kB 0 B
dotcom-rendering/dist/4943.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/5095.client.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/5223.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/5598.client.web.********************.js 4.49 kB 0 B
dotcom-rendering/dist/5748.client.web.********************.js 2.49 kB 0 B
dotcom-rendering/dist/6021.client.web.********************.js 11.1 kB 0 B
dotcom-rendering/dist/6061.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/6073.client.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/6110.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/6163.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/6577.client.web.********************.js 5.41 kB 0 B
dotcom-rendering/dist/6627.client.web.********************.js 10.4 kB 0 B
dotcom-rendering/dist/6876.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/6882.client.web.********************.js 12.6 kB 0 B
dotcom-rendering/dist/6903.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/6931.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/6940.client.web.********************.js 526 B 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7350.client.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/7364.client.web.********************.js 3.22 kB 0 B
dotcom-rendering/dist/7540.client.web.********************.js 2.72 kB 0 B
dotcom-rendering/dist/7544.client.web.********************.js 4.88 kB 0 B
dotcom-rendering/dist/7546.client.web.********************.js 7.37 kB 0 B
dotcom-rendering/dist/7861.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/8030.client.web.********************.js 4.19 kB 0 B
dotcom-rendering/dist/8067.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/8209.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/8592.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/9072.client.web.********************.js 2.61 kB 0 B
dotcom-rendering/dist/9242.client.web.********************.js 3.76 kB 0 B
dotcom-rendering/dist/9288.client.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/9362.client.web.********************.js 20.3 kB 0 B
dotcom-rendering/dist/9558.client.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/9665.client.web.********************.js 4.05 kB 0 B
dotcom-rendering/dist/9735.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/9766.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/9790.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 6.97 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.85 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 424 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.55 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.71 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.46 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 2 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.88 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 37.2 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.97 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.74 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 7.82 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 5.16 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 538 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.29 kB 0 B
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js 284 B 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.93 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.82 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.94 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.8 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 617 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 343 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.38 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.26 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.5 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.98 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.58 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 783 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 44.9 kB +3 B (+0.01%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.55 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.75 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.68 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 6.38 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 436 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.53 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.81 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.72 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.61 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 5.96 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 5.95 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.12 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.34 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.72 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 802 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 749 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 468 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.75 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.11 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 6.38 kB -17 B (-0.27%)
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 4.15 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 4.13 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.1 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.22 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 794 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.93 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 919 B 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 920 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 2.1 kB 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.56 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 5.83 kB 0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.38 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.84 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.78 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 6.02 kB 0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 8.14 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.41 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 13.5 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 9.29 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.5 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.91 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 5.97 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.78 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 4.27 kB 0 B

compressed-size-action

@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 23, 2025 •
edited
Loading

Deploy build 16037 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@abeddow91 abeddow91 added fronts + curation run_chromatic Runs chromatic when label is applied labels Jan 27, 2025
@abeddow91 abeddow91 marked this pull request as ready for review January 27, 2025 10:10
@abeddow91 abeddow91 requested a review from a team as a code owner January 27, 2025 10:10
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 27, 2025
@abeddow91 abeddow91 self-assigned this Jan 27, 2025
Georges-GNM
Georges-GNM approved these changes Jan 27, 2025
View reviewed changes
Copy link
Contributor

@Georges-GNM Georges-GNM left a comment

Choose a reason for hiding this comment

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

Looks closer to the designs to me (code also looks a bit nicer), so 👍

@abeddow91 abeddow91 added the run_chromatic Runs chromatic when label is applied label Jan 28, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 28, 2025
@abeddow91 abeddow91 merged commit 5d022c6 into main Jan 28, 2025
31 checks passed
@abeddow91 abeddow91 deleted the ab/highlights/media-cards branch January 28, 2025 08:50
@prout-bot
Copy link

Seen on PROD (merged by @abeddow91 8 minutes and 45 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Georges-GNM Georges-GNM Georges-GNM approved these changes

Assignees

@abeddow91 abeddow91

Labels
dotcom-rendering fronts + curation Seen-on-PROD
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@abeddow91 @prout-bot @Georges-GNM