DR 5.1: Issue 08: Presentation of Tree Explorer on small media devices

1 Requirements

Copied form: Design Revision Part 2

There are several places where ILIAS presents a hierachical tree structure in an explorer UI component. E.g. repository tree, learning module chapters/pages. Currently these explorer UI elements are just hidden on small media devices. It would be desirable to have a working presentation on these devices, too (e.g. OffCanvas implementation).

Proposed solution:

• We think that it might be necessary to change to pattern of how to switch the tree view on and off completely. 
• We propose the use of sidebars knonw in desktop applications and web applications such as google drive or wrapbootstrap.com
• These sidebar(s) could also be used for other items such as search, help or even object dependent items such as metadata, tags and comments.
• We put together a little demo (Less and JS code available from Amstutz, Timon [amstutz]). We are well aware that the less code would need much revising and proper less variables (for colors and similar).

...

2 Additional Information

• Idea / concept: Amstutz, Timon [amstutz]
• Interest in funding: (please indicate if you are interested/able to fund this feature)
• Maintainer: (will be set by Jour Fixe / maintainer)
• Implementation of the feature is done by (will be set by Jour Fixe / maintainer)
• Testcases by: (please add your name if you want to create the testcases for this feature)

3 Discussion

Killing, Alexander [alex], 20 July 2015: We think that an introduction of side bars/menues as outlined above may be a good idea, but this should be discussed with all the other features that might be represented in these ui elements. Beside the issue of showing the explorer tree, its actual presentation is a problem, too (using arrow icons on mobile devices, especially with the current size). We do not think that we are able to offer a solution with 5.1 here.

4 Implementation

{please give a descripiton of the final implementation and add screenshots if possible}

Test Cases

Test cases completed at {date} by {user}

• {Test case numberlinked to Testrail} : {test case title}

Approval

Tested successfully and approved at {date} by {user}.