As a user I would like to be able to configure the grid layout of a Collection Display list same way as for responsive layout columns/grid

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: Master
• Component/s: Fragment Administration, Out of the box Fragments > Collection Display Fragment
• Labels:
  • d_20_09
  • d_20_10
  • d_22_02
  • fc_22_03
  • fc_22_04
• Epic Link: As a Page Creator I want to configure the responsive behaviour in an easier way
• Git Pull Request: https://github.com/liferay-echo/liferay-portal/pull/7627

Intro/Context:

LPS-98712 is introducing the concept of Grid that is a new way to deal with Layout Column. We'd like to have the possibility for Collections to be displayed as grid where we could choose the number of item of the list we want to display and the number of items per row for a dedicated Viewport. (Similarly to GRID layout responsive behaviour).

The goal of this story is to replicate the logic for styling GRID fragment by Viewport to the Collection Display fragment, hence allowing a user to configure its responsive behaviour. 

 

Requirements

In order to replicate the Grid layout setup and make Collection Display fragment configurable for different viewports, the requisites are:

• In the General tab of the Collection Display fragment, the user is able to configure the following:
  • "Style Display". only a change of copy (before it was "List style").
  • Layout. select for the user to pick among:
    • Full width
    • 2 columns
    • 3 columns
    • 4 columns
    • 5 columns (quitamos este valor porque no es divisor de 12, las columnas no pueden ser de distinto ancho)
    • 6 columns
    • 12 columns
    • "Show Gutter" checkbox option.
  • Add "Vertical Alignment" option (replicate Grid fragment option). If it becomes complicated, raise to PM.
• In addition to this, if the user changes Viewport, the "Layout" and "show gutter" options are visible and available in all viewports and the user can adjust the Layout in a per-viewport basis. The default values for the Layout option are different per viewport:
  • Tablet: equal to desktop layout vaue
  • portrait phone: 1 column
  • landscape phone: 1 column

Design

Figma Mockup

Acceptance Criteria

 Given the user has created a collection page, added a Collection Display Fragment and a Collection with several items,

When the user wants to set the layout of the collection display

Then he can see the "Style Display" option in the General tab of the Fragment options.

–

 Given the user has created a collection page, added a Collection Display Fragment and a Collection with several items,

When the user sets the "Style Display" option to "Grid",

Then he can see a new option which is "Layout", and pick among the following options: 1-2-3-4-5-6-12 columns.

–

 Given the user has created a collection page, added a Collection Display Fragment and a Collection with several items,

When the user picks a given Layout value (let's say, 6 columns),

Then the collection display fragment shows the collection items in the selected number of columns.

–

 Given the user has created a collection page, added a Collection Display Fragment and a Collection with several items,

When the user changes viewport,

Then he still can see the "Layout" option and the "show gutter" option, with the default value of the "desktop" viewport value assigned.

 

–

 Given the user has created a collection page, added a Collection Display Fragment and a Collection with several items,

When the user picks a given Layout value in desktop viewport (let's say, 6 columns) and then changes to Tablet viewport,

Then the default layout value is the same as for desktop (in this case, 6 columns).

 

–

 Given the user has created a collection page, added a Collection Display Fragment and a Collection with several items,

When the changes viewport and picks mobile (landscape or portrait),

Then the default layout value is "1 column" no matter the value assigned to desktop or tablet.

 

–

 Given the user has created a collection page, added a Collection Display Fragment and a Collection with several items,

When the changes viewport and picks a different Layout option,

Then the collection display fragment shows the collection items in the selected number of columns for that specific viewport.

–

 Given the user has created a collection page, added a Collection Display Fragment and a Collection with a few items (for example, 5),

When the user selects a Layou value that is larger than the number of collection items (for example, 12)

Then the collection display fragment will show nothing (empty containers" in the remaining "modules" of the generated grid.

–

 

 

Test Scenarios

Test Scenarios	Test Strategy	Kind of test	Is it covered by FrontEnd ? (JS-Unit)	Is it covered by BackEnd ? (unit or integration)	Could it be covered by POSHI?
View grid layout and choose Layout option in Collection Display Fragment's configuration	Critical	Manual	No	No	Yes
Assert desktop viewport grid layout values persist in Tablet viewport	High	Manual	No	No	Yes
The Landscape Phone viewport and Portrait Phone viewport have their own default layout value	High	Manual	No	Yes	Yes
In non-desktop viewports, the grid layout configuration keeps only in its own viewpoint	High	Manual	No	No	Yes