[MGNLDEMO-100] Responsive columns component Created: 14/Sep/15  Updated: 15/Apr/16  Resolved: 27/Oct/15

Status: Closed
Project: Magnolia Demo Projects
Component/s: None
Affects Version/s: 0.7
Fix Version/s: None

Type: Story Priority: Major
Reporter: Christopher Zimmermann Assignee: Philip Mundt
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 2.25h
Original Estimate: Not Specified

Issue Links:
Relates
relates to MGNLDEMO-102 Ad-hoc Images in demo should be loade... Closed
relates to MTE-54 Columns Component Open
dependency
depends upon MGNLDEMO-92 Demo of video component (from dam) Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: Travel Demo
Sprint: Basel 16
Story Points: 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.



 Comments   
Comment by Philip Mundt [ 17/Sep/15 ]

As far as I'm concerned, I like the proposition. It's the simplest way to get a couple of column variants without adding too many areas (vs. the row AND column approach).
I would also disable – for the time being – nesting such a component.

The four areas should be created only once upon component creation …

I think this is the only thing that will be difficult to achieve.

Comment by Tomáš Gregovský [ 17/Sep/15 ]

All these I already went thru. In latest twitter-bootstrap module (1.3 works only with 5.3.x) you are working only with rows (first is autogenerated to every page) and via dialog you may choose layout for that row. All columns are handled automatically (even if you later decide to completely change that layout).

If you can give it a try (version 1.3) that will be maybe best. I spend few months thinking about this solution and really like final result There is also content which describe how to work with it

BTW In next few days I want to migrate it to 5.4

Generated at Mon Feb 12 05:16:18 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.