Page Editor » Column Layout

For ILIAS 7 a first transfer of the page element into the possibilities of the new layout is planned.
Further ideas have been deactivated on the page in order to achieve a decision in the status that is realistic for ILIAS 7.

1 Initial Problem

The column layout is a very popular and much used side element – especially because of its responsiveness.
 
As a result of the Page Layout Revision implemented within ILIAS 6, the process of creating a column layout has to be revised by using the editor-slate.

1.1 Current Creation Process

1. Insert Column Layout

1. Open Page Editor
2. Click +
3. Insert Column Layout
4. Insert Column Layout Form: Column Layout
   1.  Two-column-layout
   2. Three-colum-layout
   3. Main and side block
   4. Two-time-two-box
   5. Manually created page layout
5. Save (or Cancel)

2. Column Layout Settings

1. Column Layout Settings Form: Column Widths
   1. Position
   2. Small 
   3. Medium 
   4. Large
   5. Extra Large
2. Save

1.2 Purpose of Column Layout

The main purposes of the column layout can be described as follows:

• The element helps to structure page content by spreading it in several columns.
• The element presents content in a responsive grid that switches depending on the screen size. In a mobile view for example, the columns will be presented among each other.

1.3 Problem Areas

While the form if Insert Column Layout can be easily transferred to the slate it is obvious that a transfer of the settings tab (Column Widths form) will be difficult. 
Depending on the column layout / number of columns created the settings tab is very extensive which complicates the presentation within the slate.

Therefore this transfer (also with new inputs for the definition of the columns) is only tackled in ILIAS 8.

2 Conceptual Summary

The form of insert Column Layout tab will be transferred to the Slate. All available layouts will be displayed there after selecting "Insert Column Layout" via Create Button.

The column layout will represented by a simulacrum in content area. (e.g. like section, data table, ...)

The editing of settings (Column Layout Widths) takes place in content area as until now. (More in ILIAS 8)

3 User Interface Modifications

3.1 List of Affected Views

Page Editor: 

• Content Area
• Slate while Insert Process

3.2 User Interface Details

3.3 New User Interface Concepts

UI Kitchen Sink:

• Using forms in Slate
• Using simulacrum in Content Area (if an icon is available in KS before CodeFreeze)

4 Technical Information

{The maintainer has to provide necessary technical information, e.g. dependencies on other ILIAS components, necessary modifications in general services/architecture, potential security or performance issues.}

5 Privacy Information

No new information is collected, processed, or shown. Thus this feature has no privacy implications.

6 Security Implications

No security implications

7 Contact

• Author of the Request: Wessels, Karin [karin.wessels], Seiler, Yvonne [yvseiler],  in contribution with Page Editor Team Samoila, Oliver [oliver.samoila] & Co.
• Maintainer: Killing, Alexander [alex]
• Implementation of the feature is done by: {The maintainer must add the name of the implementing developer.}

8 Funding

If you are interest in funding this feature, please add your name and institution to this list.

• Page Editor Revision (Crowdfunding for ILIAS 7)

9 Discussion

JourFixe, ILIAS [jourfixe], 12 OCT 2020 : We highly appreciate this suggestion and schedule this feature for ILIAS 7. More improvements for the column layout come with ILIAS 8.

10 Implementation

Test Cases

Test cases completed at 2020-11-12 by Tödt, Alexandra [atoedt]

• 32101 : Zwei Spalten-Layout aus Vorlage einfügen
• 32106 : Drei-Spalten-Layout aus Vorlage einfügen
• 18378 : Spaltenlayout manuell einfügen

Approval

Approved at 11 NOV 2020 by Samoila, Oliver [oliver.samoila].