Varkopat/enhancement/664 update newscard component layout based on new figma designs - #676
Open
Varkopat wants to merge 25 commits into
Conversation
- refactored layout to support image-left/horizontal on larger screens - added publisher? and description? support - preserved existing previewText fallback - switched to a more semantic <article> structure - Updated NewsCard.module.scss -implemented responsive card layout stacked vertically on small screens - switched to horizontal image-left layout at breakpoint(md) - improved spacing, typography, and metadata styling Validation: No TypeScript or style diagnostics remain in NewsCard.tsx and NewsCard.module.scss
…onent-layout-based-on-new-figma-designs
…sign specifications
…ased on new Figma designs
…s based on new Figma designs
…sign specifications
…roper image sizing and spacing
…e title sits closer to the navbar 2. Desktop grid width: Increased from 716px to 900px for a wider newscard layout on desktop
…desktop I fixed NewsCard's width to use correct value and on mobile I fixed width and gap values.
Varkopat
requested review from
Rutjake,
Skoivumaki,
leolabdev and
patinen
as code owners
August 21, 2026 21:16
Codecov Report✅ All modified and coverable lines are covered by tests.
... and 9 files with indirect coverage changes 🚀 New features to boost your workflow:
|
Varkopat
marked this pull request as draft
August 24, 2026 11:42
Varkopat
marked this pull request as ready for review
August 25, 2026 16:13
Skoivumaki
requested changes
Aug 29, 2026
Skoivumaki
left a comment
Skoivumaki
left a comment
Member
There was a problem hiding this comment.
Good work as always. Just fix following small issues:
Fix issue with PageTitle.
The gap between image and text in NewsCard seems too large to me. Check expected distance in Figma and keep padding or other affecting elements in mind.
Varkopat
marked this pull request as draft
September 3, 2026 17:55
Varkopat
marked this pull request as ready for review
September 4, 2026 14:03
Skoivumaki
requested changes
Sep 11, 2026
Skoivumaki
left a comment
Skoivumaki
left a comment
Member
There was a problem hiding this comment.
More stuff/almost there:
- The image should have more width than height (see Figma example, its almost same as mobile):
- If news item doesn't have an image, make sure frontend assigns one as a fallback. (Directus doesn't allow this to happen, but it still has)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📄 Pull Request Overview
Closes #664
🔧 Changes Made
1. Responsive Layout:
Implemented a mobile-first responsive approach: stacked the content vertically on small screens and switched to the horizontal (image-left, text-right) layout on larger viewports.
Updated NewsCard widths across breakpoints to follow responsive design specs.
Fixed content width calculations on medium/tablet screens.
Configured mobile cards to render full-width within their container with proper image sizing.
2. Spacing & Styling Adjustments:
Adjusted desktop card widths and gap values according to the new Figma spec.
Reduced mobile title margin-bottom from 20px to 8px to align closer to the navigation bar.
Refined overall layout, gap, and spacing rules across NewsCard and NewsPage.
✅ Checklist Before Submission
console.log()or other debugging statements are left.📝 Additional Information