Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-45269

Add a button in the bootstrapbase header to allow users to show content only

    Details

    • Type: Improvement
    • Status: Development in progress
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 2.7
    • Fix Version/s: FRONTEND
    • Component/s: Themes
    • Testing Instructions:
      Hide

      1. Select the Clean theme as your default theme.
      2. Navigate to home: there should be a zoom button in the top right.
      3. Click on zoom in: the navbar content, blocks, header an footer are hidden, content uses the full width.
      4. Click on zoom out: the hidden content is visible again
      5. Visit a course click on zoom in: the navbar content, blocks, header an footer are hidden, content uses the full width and the breadcrumb is move to the navbar.
      6. Navigate to different pages in Moodle, the zoom status is stored in the user preferences and remains the same.

      Show
      1. Select the Clean theme as your default theme. 2. Navigate to home: there should be a zoom button in the top right. 3. Click on zoom in: the navbar content, blocks, header an footer are hidden, content uses the full width. 4. Click on zoom out: the hidden content is visible again 5. Visit a course click on zoom in: the navbar content, blocks, header an footer are hidden, content uses the full width and the breadcrumb is move to the navbar. 6. Navigate to different pages in Moodle, the zoom status is stored in the user preferences and remains the same.
    • Difficulty:
      Moderate
    • Affected Branches:
      MOODLE_27_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      wip-MDL-45269

      Description

      Allow users to toggle between a content only view and the standard view can help make large tables fit the screen and hide distracting page elements.

      On the Edinburgh Moodle moot theme this feature is build into the theme header. When the button is clicked a YUI javascript function is call that adds a css class to the page body called "zoomin" and the zoom status is added to the user preferences.

      In the theme css the zoomin class hides blocks, the page header, the page footer and moves the navbar/breadcrumb to the top of the screen.

      An example of the zoom button can be found here: dev and here Moodle moot Edinburgh (account required)

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Votes:
                  64 Vote for this issue
                  Watchers:
                  34 Start watching this issue

                  Dates

                  • Created:
                    Updated: