Activities v2: Boost rotator improvements

Goal

Address the following UX concerns with respect the Boost Rotator in the context of the new activity post designs.

1. The social interactions at the bottom of the rotator get pushed outside the confines of the boost rotator when posts are lengthy.
2. The presentation of the post content within the boost rotator is oftentimes poorly presented.
3. The navigation controls (more left/right) are perceived to be lost/unclear

What needs to be done

• Address the above three issues as indicated in the UX/Design heading

Other bugs that should be research / resolved as part of this issue MAKE NEW TASKS PLEASE

• The rotator shows horizontal scroll bars for quote posts
• Videos don't autoplay within the boost rotator
• When just a youtube link is contained within the post, the video embed does not appear. Just the link is displayed.

QA

UX/Design

1. New Boost Rotator Header

• Larger clearer boost rotator header with its own BG colour.
• Larger nav controls moved to the RHS

2. Social Interactions

• Social interaction should remain in a fixed position at the bottom on the boost rotator.
• The length height of the boosted post should not impact upon the position of the social interactions.
• Where content overruns a slight gradient fadeout appears as indicated in the above design link.
• Clicking See More will navigate the user to the post page

3. Revised content positioning

• Content should be positioned in the middle of the available area between the post header and social interactions.
• Where there is text with an embed (URL, Image, Video) the associated text should sit alongside the embed.
• See below numerous design examples which should clarify this.
  • Text and image not overflowing
  • Text and image overflowing
  • Short text
  • Text and large URL embed
  • Text and small URL embed
  • Quote Post

Personas

Experiments

Acceptance Criteria

• Social interactions should never be positioned out of place
• The positioning of the boosted content should conform with the designs indicated above.
• Boosted videos should autoplay
• Resolve horizontal scroll bar issue for quite posts

Definition of Ready Checklist

• Definition Of Done (DoD)
• Acceptance criteria
• Weighted
• QA
• UX/Design
• Personas
• Experiments

Original Issue by @markryansallee

Summary

Goal

Cleaning up a few issues with the v2 Boost rotator to unblock the production experiment of Activities v2.

What needs to be done

Issues with Boosts blocking the launch of the experiment:

• Visual of the "Boosted Post" label + arrow button controls at the top of the rotator
• The rotator doesn't deal well with boosted posts that are very tall. Some screenshots below as examples.
• The rotator shows horizontal scroll bars for quote posts
• Videos don't autoplay

Steps to reproduce

(How one can reproduce the issue - this is very important)

Platform information

• Windows + Chrome
• MacOS + Chrome

What is the current bug behavior?

(What actually happens)

What is the expected correct behavior?

(What you should see instead)

Relevant logs and/or screenshots

Examples of tall posts getting cut off

• Bottom of the engagement bar is cut off.

• Media is cut off, no engagement bar appears