Show Advanced KnowledgeHide Advanced Knowledge

Set Containers to Deck of Card Listing

1 Initial Problem

Tutors spend a lot of time to create a tile-look in their course:

1. Tutors create a responsive grid. 
2. Tutors upload images and use the fancily layouted media caption as "title replacement". 
3. Tutors link images to objects. 
4. Tutors hide the list of objects by cramming them in a folder, which is not visible but readble to ther target audience. 

Then it looks good, but it is a lot of work and the result is fragile and oftentimes hard to maintain. 

2 Conceptual Summary

1. Tutors configure the presentation of their list of objects:
   1. presented as Deck of Cards 
   2. presented as List of Items.
2. In case Deck of Cards is set all objects in that container are presented in the Content-tab as a grid with Cards as representation. 

2.1 Location of Setting in Settings-Form

• Setting the way Listings are presented is done in the Settings tab before the Content Item Sorting Setting.
• IF Content Item Sorting and the Layout of List do not work together, the form should fight back against being saved and present an error message on the top of the form. 
  • This is envisaged to happen when a Course is set to Learning Objective-Driven Course and Cards. However this could be avoided by Making Learning Objectives-Driven Course a Type of Course instead of a Setting

2.2 Decision: Visualisation of Object-Type

An open issue is if and how the object-type of an object is to be presented in the Deck of Cards Listing. These options were identified: 

1. Cards feature an KS: Outlined Icon to visually indicate the type of object. 
   • pros: This option is very beautiful
   • cons: Preparing Outlined Icons is a lot of work and may not be feasible in all cases
2. Cards do TEXTUALLY indicate the type of object. Object-type is written in front of the title.
   • pros: No Outlined Icons need to be prepared
   • cons: Less beautiful and pushes titles to have two lines or more
3. Cards do NOT indicate the type of object.
   • pros: No effort spent
   • cons: Users cannot understand what they are up against

Option 2 is suggested in case Option 1 is not feasible. 

2.3 Display of Object Properies

Things that could be displayed	Deck of Cards
Icon	if Option 1 is chosen then outlined Icon is used in the left corner
Image	Background
Title	displayed, of Option 2 is chosen, then it is preceded by textual statement of Object Type
Description	the first 120 characters are isplayed, the rest is abbreviated.
Learning Progress	the learning progress status representation could be displayed
Certifiacte	a certificate representation could be displayed
Properties / Metadata	are displayed underneath titele and description
Actions	Actions are displayed
Availability / Preconditions	are displayed, the image is ddisabled, the textual representation textually remains as in normal list
Rating	is not displayed
Tagging	is available via Actions and the respective modal, but are not displayed directly

3 User Interface Modifications

3.1 List of Affected Views

• Category > Settings
• Category > Content 

• Folder > Settings
• Folder > Content 

• Group > Settings
• Group > Content

• Course > Settings
• Course > Content

• All objects 

3.2 User Interface Details

Category

Folder

Group

• Simple View and Grouped by Type were not drawn since they very closely resemble what was drawn i.e. in Folders.

3.3 New User Interface Concepts

No new element but repurposing of 

• Deck of Cards 
• KS: Outlined Icon

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 Contact

• Author of the Request: Tödt, Alexandra [atoedt]
  
• Maintainer: Killing, Alexander [alex]
• Implementation of the feature is done by: Killing, Alexander [alex]

6 Funding

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

• BGHW

7 Discussion

Klees, Richard [rklees], 2017-11-06: I really like the feature in general, but I'm not happy with how this request is made. From my POV there are about 90% visual problems problems to be solved here. E.g. there is the question on how icons of objects could be presented on a card ("Outlined Icon"). We agreed on a process ("KS-process") to discuss these questions. For the other part I'm not happy with the card and the deck of cards for this feature. This isn't a problem of this feature but of the KS, but this request shows it. To me, we would be better modeling the "cards" as "items" and then introduce a new type of listing for these items. After all, that's what these cards are. I also wonder, where the images for the cards come from and how a default could look like. Did I miss something?

JourFixe, ILIAS [jourfixe], NOV 06, 2017: We highly appreciate this suggestion and like it very much. We prefer the 'Outlined Icon' for visualising the object types but would accept also 'Textual Indication' as fallback if we cannot generate outline icons from our new icon set for all existing repository object types. Therefore, we involve our icon designer in this discussion. Before scheduling it for 5.4, this investigation should be made. Additionally, we would like to know how the 'Actions' dropdown is presented for an item on such a deck of cards. And please give us a short outlook on how other object properties could be presented on the top bar of such a deck. This will also influence the decision on the position of the object type icon.

Tödt, Alexandra [atoedt] 2017-11-15: @ RK I totally agree and made a request to that effect with Timon.  Please give your opinion in the respective bug report / JF discussion. 
Concerning the process, I will try to create Pull Requests. However as a subsitute I ddid create Featurewiki entries with sggested rules and linked them in the article. 

Kunkel, Matthias [mkunkel], 16 NOV 2017: CaT will offer us an outlined version of the Milos icon set as a donation. So the version with 'Outlined Icons' could be realised for 5.4.

Seiler, Yvonne [yvseiler], 16th november 2017: I really like you're suggestion @Kunkel, Matthias [mkunkel] and your systematical proposal for the cards and it's division. My additional thoughts about it:

• All icons should be linked: F.e. object-type-icon = link to content, learning progress icon = link to learning progress tab, certificate = download certificate, actions = actions dropdown
• Cell A2 (learning progress) and A3 (certificate) perhaps could be merged in one - I do not really know if it's possible to get them both on one screen?
• Perhaps row E could be "expandable", depends on how many "feature" would be visible for this card (preconditions, tags,...). We should consider that all cards have the same height, so we don't have an aliasing. Or we decide which features are available in this deck of cards view (global setting, manual setting for each deck of cards or non-customizable default).
• Last but not least: I draw a 4x4 example with the divisions above, how it could looks like (no visualisiation for action menu at the moment).

JourFixe, ILIAS [jourfixe], 20 NOV 2017: We agree with the latest mock-up suggestion and schedule the feature for 5.4. We would like to have the rating shown in the properties area (E) and not to hide it. The suggestion for a squared card should be presented in a separate feature request (but we think it is a very attrective alternative). We are very grateful for CaT's contribution to offer outline versions of the current iconset. According to Matthias' suggestion, the top section of the card (A) should be filled as follows:

• A1 : object icon
• A2 : learning progress status or certificate
• A3 : left empty
• A4 : Actions dropdown

Sorting of properties should be similar to the existing ListGUI, starting with 'Offline'.

Killing, Alexander [alex], 17 Sep 2018: We will not be able to offer image upload for all object types with 5.4. I would suggest to

• Limit the setting to categories for 5.4 (which groups "by type")
• Add a info text that only types that support the image upload (most important courses) are listed as tiles, all others fall back to the standard list presentation.

Would this be ok? This would at least enable us to support the most common use case (nicer course presentation in categories) with 5.4.

Kunkel, Matthias [mkunkel], 24 FEB 2019: When creating a new container and changing to tile view, no default background is defined for the tile. It is just white. It would be highly appreciated if ILIAS comes already with a predefined background other than white. With the white background it looks as if this view is broken because white = nothing. How about deliver this feature with a png image in 'brand-primary' = #4c6586?

JourFixe, ILIAS [jourfixe], 25 FEB 2019 : We discussed the different options and decided to

• use images per object type to define the background of a tile. Alexander will check if it is possible to include less information into svg images to re-use the defined colour scheme of the ILIAS system style. Otherwise, he will use 1 pixel PNGs.
• This solution will handle all plugin objects as one type.
• This solution allows to substitute the default images by customised ones in the system skin.

8 Implementation

Test Cases

Test cases completed at 2018-10-21 by Tödt, Alexandra [atoedt]

• 24852 : Kategorie mit Kachelbild versehen
• 24853 : Kategorie auf Kachel-Anzeige umstellen
• 24854 : Ordner mit Kachelbild versehen
• 24855 : Ordner auf Kachel-Anzeige umstellen
• 24856 : Gruppe mit Kachelbild versehen
• 24857 : Gruppe auf Kachel-Anzeige umstellen
• 24858 : Kurs mit Kachelbild versehen
• 24859 : Kurs auf Kachel-Anzeige umstellen

Approval

Approved at 23.10.2018 by Lenich, André [andre.lenich].