Improve Navigation / Mobile View

1 Initial Problem

The ILIAS learning modules implement an arbitrary navigation which suffers from a bad layout on mobile devices.

A lot of vertical space is lost to an empty toolbar and a potentially overloaded navigation bar.

2 Conceptual Summary

The navigation should be implemted using standard KS components in the (legacy) toolbar. The important navigation buttons should be "sticky" toolbar items. All other buttons should move to a Dropdown.

3 User Interface Modifications

3.1 List of Affected Views

• Learning Module > Presentation

3.2 User Interface Details

Desktop View

The navigation elements are moving to the standard (legacy) toolbar using Buttons, Dropdowns or optionally a new View Control combining Previous/Next Buttons and a centered Dropdown.

The Dropdown lists all chapters or pages depending on the setting "Table of Contents Items".

All other functions and menu items move to a Dropdown.

Currently all entries are presented as buttons including an arbitrary number of custom menu entries, which makes the layout quickly fail, even on desktop screens.

Mobile View

The new layout has the folloging advantages on mobile:

• No fails on long chapter/page names.
• Less vertical space used before content starts.
• Direct access to chapter navigation.

3.3 New User Interface Concepts

The navigation could be implemented be either using existing KS Button, Dropdown, Button combination or by introducing a new View Control combining the three elements.

3.4 Accessibility Implications

The proposal aims to use existing KS elements in the toolbar. If a new View Control is implemented it should be checked for accessibility as well.

4 Technical Information

No special technical issues.

5 Privacy

Current state, see https://github.com/ILIAS-eLearning/ILIAS/blob/trunk/Modules/LearningModule/PRIVACY.md

This feature does not include any privacy related changes.

6 Security

No security related changes.

7 Contact

• Author of the Request: {Please add your name.}
• 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

JourFixe, ILIAS [jourfixe], 03 APR 2023: We highly appreciate this suggestion and schedule the feature for ILIAS 9. We discuss the question of having navigation elements also at the end of the page or offering a 'Top' button to go on top of the page quickly in a separate request. This request will only offer navigation and submit buttons on top. Removing 'Hamburger' and offering a dropdown instead is fine for us.

10 Implementation

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

Screenshots

Desktop View

The navigation elements are moving to the standard (legacy) toolbar using Buttons, Dropdowns or optionally a new View Control combining Previous/Next Buttons and a centered Dropdown.

The Dropdown lists all chapters or pages depending on the setting "Table of Contents Items".

All other functions and menu items move to a Dropdown.

Test Cases

Test cases completed at 2023-10-13 by Spirou, Ilias [ispirou]

• 480 : Gliederung
• 482 : Zurück- oder weiterblättern

Approval

Approved at 2023-10-12 by Brauns, Johanna [jbrauns].