Theme And Navigation Project 3.2

Theme And Navigation Project 3.2
Project state	Complete
Tracker issue	MDL-55070
Discussion	https://moodle.org/mod/forum/discuss.php?d=335638
Assignee	Damyon Wiese

This page is dedicated to a set of changes for 3.2 all relating to the theme, and navigation in Moodle.

The requirements for the new theme are:

• use a CSS framework that will be supported upstream for a long time
• testing framework needs to be theme independent
• simplify the navigation and make it more suitable for touch screens
• introduce quick navigation from course to course or section to section
• promote the content of each page rather than the peripheral sections (blocks)
• the default visual design of Moodle should look distinct from older versions
• every page with settings should use a consistent, recognisable UI element to get to the settings
• add lots of settings to the new theme so it can be used for many sites without installing a child-theme
• don't break existing themes or require changes from plugin developers

More details about each requirement follow:

Use a CSS framework that will be supported upstream for a long time

• Users affected: theme designers
• The problem: bootstrap 2 is unsupported
• The proposed solution: create a new theme based on Bootstrap 4
• Criteria for success: New moodle theme using a supported CSS framework with long term support that includes features for RTL and Accessibility and is popular with theme designers, the new theme should show proper styling for all pages
• MDL-55071

Testing framework needs to be theme independent

• Users affected: developers
• The problem: feature files are written assuming the theme will be “clean”
• The proposed solution: Theme specific steps need to be identified and the theme should form part of the behat context. Different step implementations should be available for different themes
• Criteria for success: You should be able to specify which theme to run behat with and all tests should pass
• MDL-55072

Navigation is not intuitive or suitable on touch screens

• Users affected: new moodle users, experienced moodle users
• The problem: navigation is a complex tree with inconsistent structure
• The proposed solution: Only show the path to the current node in the navigation, and it’s siblings as a flat list.
• Criteria for success: It is easier to determine your location in the navigation tree, it is easier to find pages related to the current page
• MDL-55073

Intuitively navigate from course to course or section to section

• Users affected: new moodle users, experienced moodle users
• The problem: If the navigation tree is flattened, it is not possible to change between courses without leaving the course and entering a new one
• The proposed solution: Show a drop down menu for each item in the navbar
• Criteria for success: It is intuitive to quickly jump between courses and sections using the navbar
• MDL-55074

Promote the content of each page rather than the peripheral sections (blocks)

• Users affected: new moodle users, experienced moodle users
• The problem: blocks displayed around the content compete for attention and real-estate in the page
• The proposed solution: Move the blocks regions into an expandable menu
• Criteria for success: the content of each page should be the first thing that grabs your focus, blocks should still be discoverable and usable if needed
• MDL-55075

The visual design of Moodle should look distinct from older versions

• Users affected: new moodle users, themers
• The problem: We have not updated the look of the default theme in several years
• The proposed solution: Implement some new distinct styling in the new Moodle theme
• Criteria for success: The new moodle theme should look visually distinct. There should only be a minimum amount of custom styling for themers to override when extending this theme
• MDL-55076

Every page with settings should use a consistent, recognisable UI element to get to the settings

• Users affected: all moodle users
• The problem: Settings pages are buried in the navigation tree in inconsistent locations
• The proposed solution: Create a settings navigation renderable that shows a gear icon on the top right of the page and takes you straight to the settings page. Update all pages with settings in moodle to use the new thing.
• Criteria for success: All pages with settings in Moodle should show a gear icon which will take you to the settings page when clicked.
• MDL-55077

Add lots of settings to the new theme so it can be used for many sites without installing a child-theme

• Users affected: new moodle users
• The problem: Installing themes is hard/not possible in some environments. The new theme should be customisable enough to make it usable just by changing settings.
• The proposed solution: Review settings provided by community themes and add the common ones to this new theme.
• Criteria for success: Colours, fonts, logos should be customisable as well as additional settings supported by most community themes.
• MDL-55078

Don't break existing themes or require plugin developers to do anything new

• Users affected: developers and admins
• The problem: Not everyone will be interested in all these new changes, or has the resources to redesign their theme immediately. Likewise developers have enough to do right now and life for everyone will be a lot easier if we can maintain backward compatibility from 3.2.
• The proposed solution: Where core changes are required, make sure they work OK on as many existing themes as possible.
• Criteria for success: Themes still continue working and looking good.