Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-111561

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

    Description

    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

     

     

      Attachments

        Issue Links

          Activity

            People

            Assignee:
            david.gutierrez David Gutiérrez Mesa
            Reporter:
            tarik.demnati Tarik Demnati (Inactive)
            Engineering Assignee:
            Verónica González
            Recent user:
            Maria Muriel
            Participants of an Issue:
            Product Designer(s) Assigned:
            Maria Arce
            Backend Developer(s) Assigned:
            Lourdes Fernandez Besada
            Frontend Developer(s) Assigned:
            Verónica González
            QA Engineer(s) Assigned:
            Lu Liu
            Votes:
            1 Vote for this issue
            Watchers:
            1 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:

                Packages

                Version Package
                Master