Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Theme And Navigation Project 3.2

From MoodleDocs
Revision as of 19:44, 30 June 2016 by Mary Evans 2 (talk | contribs)
Theme And Navigation Project 3.2
Project state Starting
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
  • make the navigation simpler and more intuitive
  • introduce quick navigation from course to course or section to section
  • promote the content of each page rather than the peripheral sections (blocks)
  • the 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

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

  • 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