Social Feed Slider Layout Specs
Social Feed Slider Layout Specs
Juwan Bepo last updated on November 25, 2019
Introducing a Multiple Slides layout to Slider plugins
Summary:
In addition to the current Collage and Grid layouts in Social Feed, we will add a Slider layout to allow users to view social media posts in a single row, and users will be able to set the number of posts that should be on display.
Tech note from Ben: I think we should not reproduce the fairly jank slider from multi-slider, and instead use a react slider for this.
We’re missing height considerations here. Not all posts have the same height, and posts can also have a lot of text. Eg:
How is height determined? Are there any controls for the user to specify the height?
What happens to a post that has no image but just text (eg twitter or rss feed)?
Scenario: New Slider layout in the Layout & Size drilldown
Given that a user opens the Layout & Size drilldown
When the user selects the Slider layout
Then the posts should display with a default of 4 posts in a row
And a default Image Cropping > Square
https://www.figma.com/file/Hzj4FlAkGvMWH7O3TWScHN/Social-Feed-Slider-Layout?node-id=6%3A24
Scenario: All users should be able to use the Slider layout
Given a user has an existing Social Feed
When the user opens the Layout & Size drilldown
Then the user should be able to select the Slider layout
Scenario: Slider layout should work with Image Cropping settings
Given a user selects the Slider layout
When the user changes the Image Cropping selects
Then all of the social media posts should display with the designated Image Cropping setting
Scenario: Slider layout should work with the Post Width slider
Given that a user selects the Slider layout
When the user increases the Post Width slider
Then the posts in the appView should increase in width
And the number of posts on display should decrease
And when the user decreases the Post Width slider
Then the posts in the appView should decrease in width
And the number of posts on display should increase
Scenario: Slider layout should work with the Posts per Row (Desktop) slider
Given that a user selects the Slider layout
When the user increases the Posts per Row (Desktop) slider
Then the number of posts in the appView should increase to the number in the slider
And the maximum number on the slider should be 8 (posts)
And the minimum number on the slider should be 1 (post)
Scenario: Left and Right arrows should display a new set of posts
Given that a user selects the Slider layout
When the user selects the right arrow in the appView
Then the slider should display a new set of posts
(e.g. if the number of posts per row is 4, and the user selects the right arrow, then 4 new posts should appear)*
Scenario: Posts should loop when user has reached the end of all social media posts
Given a Social Feed with the Slider layout is visible
When the last social media post is visible
And the user clicks the right arrow
Then the slider should loop and display the first set of social media posts again
Scenario: Posts should loop (opposite)
Given a Social Feed with the Slider layout is visible
When the first social media post is visible
And the user clicks the left arrow
Then the slider should display the last set of social media posts
Scenario: Arrow Color selector
Given a user selects the Slider layout
Then an Arrow Color selector should appear at the bottom of the Layout & Size drilldown
https://www.figma.com/file/Hzj4FlAkGvMWH7O3TWScHN/Social-Feed-Slider-Layout?node-id=6%3A24
And when a user hovers over any social post
Then the arrows should appear with an opacity of 50%
(i.e. similar to current arrow behavior in the Slider plugin)
https://www.figma.com/proto/Hzj4FlAkGvMWH7O3TWScHN/Social-Feed-Slider-Layout?node-id=6%3A24&scaling=min-zoom
Scenario: One image should appear at a time on mobile
Given a user selects the Slider layout
When the user views the Slider on a mobile device
Then one image should appear at a time
And a portion of the previous and next image should appear next to the image in view