Starting today you'll notice a new look on the home page. Thank to a huge effort by Pawel/@pp many components in the home page new feed has been changed and generally cleaned up to align with the Crayons visual design language that has been rolling out across the site. We've also taken this opportunity to add some new functionality: prominent article comments are displayed right in feed card.

I know that style changes can be, ahem, controversial, so feel free to give us your feedback below. You can also log visual bugs as issues in our issue tracker.

Psst: interested in the work it took to make this happen? You can check out the PR:

Home Page Feed redesign + top comments #7579

joshpuetz posted on Apr 28, 2020

What type of PR is this? (check all applicable)

[X] Refactor
[X] Feature
[ ] Bug Fix
[ ] Optimization
[ ] Documentation Update

Description

This PR is a merge and rebase of two different previous spikes: Pawel's excellent styling and markup changes to the feed (#7151), and adding top comments to article feed cards (#7426).

Known Issues / Punted Issues

Top comments are only shown in the initial articles loaded, and not those loaded upon scroll:

While top comments were added to the feed generation in app/views/stories/feeds/show.json.jbuilder, the were not added to the ElasticSearch index. As a result top comments only appear for the initial set of posts loaded, and not posts loaded upon scroll. This work should be done, but I'm punting to a future cycle.
Podcast results in search are still using legacy styling: it would be nice if the were migrated to the new style language. Punting this to a future cycle with help from @ludwiczakpawel

Things I need help with:

[x] Let's make sure the loading state placeholder cards for featured post maintain the 100:42 aspect ratio while it's loading so there isn't that jump.
[x] I think we'll need some truncation/max-height for the comments, though I do currently like that it includes rich content.
[x] There seems to be an issue with loading paginated posts... reactionsDisplay is not defined (@joshpuetz May 4 2020: I think this was resolved: pagination/loading working for me locally both logged out and logged in)
[x] Looks like the logged out/server-rendered cards are stuck in the "saved" state for readinglist button. (@joshpuetz May 5 2020: this appears to be fixed: logged out reading list buttons are say 'save' now)
[x] Logged in: 'Save' buttons (as well as search result follow buttons) don't update visual state until mouse moves off of them
[x] If there's only one comment and it happens to be the top one, we probably want something besides "See all 1 comments". Although this is an unlikely scenario, may as well account for it now. I'd say we can probably just remove the button.
[x] Are the cards intended to be separated in narrow devices again? They had been changed to touching in a prior PR.
[x] (@nickytonline tackling in #7638) I think the whole card should remain clickable as a link to the post, including the whitespace, with the other links being clickable to their various specific locations, like tags, username etc if clicked specifically. This is sort of a hack but I think it's good UX. This could be accomplished with an "empty" position:absolute link as the first child within crayons-story__body before the crayons-story__top div which had top:0;left:0;right:0;bottom:0; and as long as crayons-story__bodywere positioned relative and all the variousz-index` worked out it would work fine.
[x] I think we'll need to temporarily include some of the stylesheets right in the HTML of index to make sure it's included for folks on the "old shell" via serviceworkers. We don't yet have a really solid solution in place for migrating substantial style changes like this besides that.. but I think that would be a fine solution. (@joshpuetz Verified styles are already included in the base HTML document)
[x] Styling problems with alignment of Flare tag
[x] Styling problems with the Reading Time label in both regular in and mobile view
[x] Styling problems with controls in the mobile view
[x] Search results "Save" button not working
[x] Follow buttons not showing on 'People' search results
- [x] 422 uparseable entry showing when attempt to follow/unfollow from this page)
[x] Verify podcast card layout/interactions