Updates to Research Landing Page
See original GitHub issueOverview
The Research Landing Page launched with the essential information included in it 🎉. This update adds some UI polishing touches to the page, including headers to the table on larger screens and a responsive design update for the research listing card component.
All designs can be inspected within the ONE ARMY Figma. If you have any questions or issues tap the C
key within Figma and click to leave a comment. Tag @franknoirot and @davehakkens for any clarifications or questions.
Acceptance Criteria
Here are all of the things that should be true for this to be considered complete:
Page
- The page now queries for the number of comments and number of useful points of each Research module.
- The header component with the H1 heading has font and spacing values that scale down responsively to match the designs.
- A new table header has been added containing 4 columns: Title, Updates, Comments, and Useful
Table Header
- The final three column headers each contain their appropriate icon. (The necessary icons can be exported from Figma by clicking on the Export pane in the right sidebar with the icon selected.)
- The table header row is responsive across Desktop and Tablet, and is hidden on Mobile
Research Item Card
- The Research item card is reformatted to Show the username and last updated beneath the title, with the username now accompanied by the appropriate flag emoji.
- The Research item card now shows counts for Updates, Comments, and Useful points in three columns to the right which align with their corresponding column header.
- The Research item card adjusts both font and spacing values between Desktop and Tablet according to designs.
- On Mobile, the Research item card layout shifts to a more compact version which drops the number of updates and uses icons as labels in accordance with the designs.
Design Screenshots
Below are exported images from the Figma designs:
Desktop
Tablet
M
obile
Issue Analytics
- State:
- Created a year ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
The Ultimate Guide to Landing Pages
Learn how to design, write, and test landing pages that will convert visitors into leads.
Read more >37 Landing Page Statistics For 2022: The Definitive List
Looking for the latest landing page statistics? Here are all the stats, facts, and trends you need to know...
Read more >Landing Page Update Case Study
Now it's time to look at our five steps for optimizing a landing page — research, prediction making, design decisions, testing, and finally, ......
Read more >What is a Landing Page? This guide breaks it down
On your landing page, visuals like explainer videos can detail how your offer works, and images can help your visitor imagine how your...
Read more >12 Tests to Increase Your Landing Page Conversion Rate, ...
When you do make changes to your site, make sure you test one major thing at a time, i.e. redesign, layout, headline etc....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Have created a PR for this: https://github.com/ONEARMY/community-platform/pull/1905
@franknoirot @davehakkens
🎉 This issue has been resolved in version 1.23.0 🎉
The release is available on GitHub release
Your semantic-release bot 📦🚀