Goals

• Boost presentation
• New post design
• Suggested channels and groups
• General post presentation with top comments displayed

changed the description

@michaelfbradley please update the description of this epic with your notes that you presented to us asap thanks

added issue front#2149

changed title from Newsfeed to Newsfeed

@michaelfbradley please add your mockups into the main description of this epic with "WIP" label

We may want to consider breaking this epic into specific epics for each part of the newsfeed:

• Capture / status (multi-image posts, video thumbnail selection, licensing, titles, etc)
• Presentation of boosts and posts in feed
• Image resizing
• Suggested channels and groups
• Trending and preferred hashtags

Boosted Posts

Design Assets

• General boosted post design -> https://invis.io/KWU1X9IEB2U#/393838935_Boosted_Post
• Boosted bost content variations -> https://invis.io/KWU1X9IEB2U#/393843178_Boosted_Post_Variations

Design Notes

• Boosted post container has a fixed height of 720px. It is important that the varied nature of posts is presented as a clear and consistent structure as possible.
• Boosted content distinguishes itself with a blue border and Bosted Content label at the top-left.
• The total number of boosted posts is displayed top-right.
• An animated countdown wheel shows when the next post will display. Duration TBC.
• If the cursor enters any portion of the boosted post container, the posts will not transition. The timer will be paused and elapsed timer set to zero.
• If the user starts typing a comment, the timer should be reset and paused.
• We may introduce some subtle animation between posts, in order to make the change from one post to another less severe. TBC.
• The first boosted post instance should not be the first item in a users news feed. First occurrence should be the second item.
• Other instances of the boosted content should be displayed as the user continues to scroll through the newsfeed. Perhaps every 10 newsfeed items. Frequency TBC.
• Given there will be multiple instances of the scrolling boosted posts, it is important that the user doesn’t see the same boosted content again and again. The boosted content displayed should be as unique as possible to the user.
• Given the consistent height of the boosted post container, we need to account for all the various permutations of content that could be displayed. See above InVision link.
• Any comments are hidden by default.

Thanks for this @michaelfbradley, I'll link to the details from the frontend ticket. Is this styling going to be unified across mobile also?

Newsfeed frequency and duration has to be configurable by us, it's our most important knob that can be turned up or down as and when it's required. There does need to be a minimum duration and maximum frequency limit agreed on as those will impact user experience.

Copied to front#2271

Reminded Post

Design assets

• https://invis.io/KWU1X9IEB2U#/393845328_Reminded_Post

Design notes

No functional changes for reminded posts. Presented in a clearer manner which better separates the post from the reminder.

Comments, up-votes etc all belong to the reminder.

General Newsfeed Post Structure

Design Assets

• General Post w/ notes -> https://invis.io/KWU1X9IEB2U#/393848826_Basic_Post_Structure_-Notes-

• Post Structure -> https://invis.io/KWU1X9IEB2U#/393847540_Basic_Post_Structure

• Own Post Structure -> https://invis.io/KWU1X9IEB2U#/393848827_Basic_Post_Structure_-Own_Post-

Design Notes

• Maximum width of 500px. This is significantly narrower than the current posts, which come in at around 670px. Having a narrower post width, with mean there will be a reduced corresponding post height.
• Continuous scrolling should be tweaked so the call to fetch more posts, happens just before the user reaches the end of the page. Introducing an offset where the call is made earlier should result in a more fluid scrolling experience.
• Newsfeed place holder? Following no channels or groups. TBC.
• If the user reaches the end of a feed, and there is nothing else to show, the Nothing More to Load cue should simply be removed.

Ref A.

Post header simply shows Display Name or Channel Name. Clicking on either the avatar or name will link to the relevant channel.

Date should be a time ago value. e.g. a few moments ago, an hour ago, yesterday. In the context of a chronological timeline, this is more meaningful than displaying a full datetime value. The link that currently exists (the datetime linking to the post should be removed). Perhaps we can include an option in the dropdown (B) to view a post in isolation. A link from the date, however, is nonsensical.

The time ago value should only be displayed for a defined period of time, around 3 days. Values like a few hours ago and yesterday are meaningful for posts that have happened recently. If a user continues to scroll down through their timeline, they should never see 5 weeks ago - this becomes less meaningful. A short date would better convey this information. e.g. Oct 10th. This is a general rule of thumb for time ago dates, and not simply unique to this use case. Exaction functionality here TBC

Ref B.

Two variances for this dropdown menu. One for posts, and the other for posts authored by others. The dropdown component will be used again and again. Note that any destructive type options are displayed at the bottom of the menus in red.

Note: The Share option may function better if it’s relabelled as Copy link to post whereby the post URL is copied directly to the clipboard. No need for a new modal to open, to then click copy.

Ref C.

A user can either up-vote to down-vote a post. They should not be able to do both, which is currently the case.

See designs for hover / active state colours. (See Ref G)

Boost option will only appear on posts the user created.

Ref D

• The add comment input should always be visible.
• The height of the input should increase as the user types.
• Probably it’s not necessary to display the 1500 character count limit.
• If there are no comments, the placeholder should read Be the first to comment, otherwise it should read Write your comment
• When the Explicit option is clicked, it should be highlighted in red as illustrated.

Ref E

• If possible the most weighted comment should be displayed by default. There are probably a host of technical implications here, so this is only a nice to have.

F

• A simple See all comments action will fetch all comments.

Why is the comment input field at the top? Newest comments show at the bottom so I think this is going to be a little bit confusing.

mentioned in epic &73