Uploaded image for project: 'Magnolia Demo Projects'
  1. Magnolia Demo Projects
  2. MGNLDEMO-100

Responsive columns component

    XMLWordPrintable

Details

    • Story
    • Resolution: Fixed
    • Major
    • None
    • 0.7
    • None
    • None
    • Basel 16
    • 5

    Description

      Why

      A columns component will allow pages of the demo to have unique and customizable layouts. It will allow evaluators to see how they can easily create layouts. It will show evaluators how they can integrate a css layout framework such as Twitter Bootstrap.
      This is important in part to demonstrate how to build up rich pages with just a few components.

      Component details
      Component name Column layout
      Dialog Description Add a column layout to a page.
      Field Description Select the number of columns. The ratios indicate the width of the columns relative to one another.

      The component should work similarly to the row component of Tomas' Twitter bootstrap template set on the Forge.

      The dialog for a row contains a "Layout" selector with the following options:
      The values of the select should simply be the list of column widths delimited by spaces.

      Label Value
      2 cols (1:1) 6 6
      2 cols (2:1) 8 4
      2 cols (1:2) 4 8
      2 cols (3:1) 9 3
      2 cols (1:3) 3 9
      3 cols (1:1:1) 4 4 4
      3 cols (2:1:1) 6 3 3
      3 cols (1:2:1) 3 6 3
      3 cols (1:1:2) 3 3 6
      4 cols (1:1:1:1) 3 3 3 3

      Based on the selection - between one and four columns are displayed, which are areas where a user can add components. The area should have all MTE components available.
      Of course the column div for each of the areas must have the appropriate bootstrap css.

      The four areas should be created only once upon component creation - so that after a user enters components into the areas the user can still change the layout and the components will remain intact.

      I recommend using the bootstrap col-sm- classes for all layouts except those with a col width of 3 where I would use col-md- classes.

      The component html should output a row css class at the top level - but not a bootstrap container class as it will be used in the context of the demo where container classes are already specified.

      Usage in demo

      This component should be available in the main area of home and standard pages. (magnolia-travel-demo home.yaml & standard.yaml).
      Use the Columns Layout component on the "about" page to create a "2 cols (1:1)" layout under the jumbotron.

      On the left side On the right side
      The video (see https://jira.magnolia-cms.com/browse/MGNLDEMO-92) The "Learn more" and the teasers to the sub pages.
      Note

      Thanks to improvement proposed in MGNLDEMO-102, Images included in different row widths would automatically load an appropriately sized rendition.

      Checklists

        Acceptance criteria

        Attachments

          Issue Links

            Activity

              People

                pmundt Philip Mundt
                czimmermann Christopher Zimmermann
                Votes:
                0 Vote for this issue
                Watchers:
                4 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:

                  Checklists

                    Task DoD

                    Time Tracking

                      Estimated:
                      Original Estimate - Not Specified
                      Not Specified
                      Remaining:
                      Remaining Estimate - 0d
                      0d
                      Logged:
                      Time Spent - 2.25h
                      2.25h