Show Advanced KnowledgeHide Advanced Knowledge

Section Editing: Multi-selection of style classes

1 Initial Problem

To create elaborated page layouts users need a huge variety of content styles for sections.
The initial set of ILIAS section style classes is not sufficient as they are very limited and do not fulfill customers needs. Very often the Content Styles do not provide the specific section style class they are looking for.
 
Style classes like „Mnemonic“, „Example“ or „Literature“ are suitable for structuring learning content and laying emphasis on special paragraphs like in a book. Styles have been  developped under the assumption that there is need for one style for a block only.
 
But a design of page layouts that are similar to website layouts and thus encourage „discovery learning“ or „discovery of content“ requires an expansion and/or far-reaching adaptions of style classes.
 
There are to ways to get rid of this problem: By creating more and more section style classes in all possible variations (which will barely cover the endless range of style-requirements) or by nesting sections of different style classes (which leads to very complex structures in editinig mode).
 

The overall aim of the following feature request is to expand customization possilities for the page element „section“ and thus avoid the need of more and more new style classes.

2 Conceptual Summary

The way of selecting style classes within the slate will be changed. Instead of a single selection a multi selection should be possible.

Therefore a tag input field instead of a standard dropdown button will be implemented within the editing mode of a section (slate).
This allows users to combine several section style classes that have been added to the Content Styles.
 
Advantages:

• The amount of style classes for section can be reduced.
• At the same time the flexibility for users to create attractive content pages are considerably enlarged.
• With special regard on Example 2: Users do not have to add that much sections to a page than before which leads to a tidy look of the editing mode an d instead of adding more and more div-containers to the HTML-code the code gets shorter.

Of course, the implementation has to consider, that it is not possile to combine all style classes among each other or to combine one style class with itself.

3 User Interface Modifications

3.1 List of Affected Views

Tool Slate >> Insert Section / Update Section

3.2 User Interface Details

New for ILIAS  8: Users who add a section to a page, have to choose the style classes they want to combine by using the input field within the slate.

3.3 New User Interface Concepts

None

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

{ Please list all personal data that will need to be stored or processed to implement this feature. For each date give a short explanation why it is necessary to use that date. }

6 Security Implications

{ Does the feature include any special security relevant changes, e.g. the introducion of new endpoints or other new possible attack vectors. If yes, please explain these implications and include a commitment to deliver a written security concept as part of the feature development. This concept will need an additional approvement by the JourFixe. }

7 Contact

• Author of the Request: Wessels, Karin [karin.wessels]
• Maintainer: {Please add your name before applying for an initial workshop or a Jour Fixe meeting.}
• 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.

• …

9 Discussion

Killing, Alexander [alex], 6 May 2021: With the current implementation you really do not need all these nested blocks. Given the headlines you need one image style class, one card block class per color and one block type for the hover area (if I understand this correctly). I don't think that his can be further reduced by multi style assignment. E.g. define card blocks with padding of 20px; and image class with an additional "width: calc(100% + 40px)" rule (at the bottom of the style class form) and -20px margins for top/left/right. This eliminates the complex structure for the images and the general padding.

10 Implementation

{The maintainer has to give a description of the final implementation and add screenshots if possible.}

Test Cases

Test cases completed at {date} by {user}

• {Test case number linked to Testrail} : {test case title}

Approval

Approved at {date} by {user}.