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

Adding "Go to top" link when scroll down in boost and classic themes

    XMLWordPrintable

    Details

    • Database:
      Any
    • Testing Instructions:
      Hide

      Prerequisites

      1. Create one big course Using the course generator tool.

      Boost theme Test

      1. Set theme to standard boost theme
      2. Go to the new course and scroll down
      3. When the scroll position if greater than 50 (usually two or three wheelhouse movements):
        1. the  Settings dropdown menu will set position to fixed under navbar element.
        2. Check it opens on click.
        3. A "Go to top" link with an arrow will also appear on the bottom-right part of the window.
        4. By clicking on the "Go to top" arrow link the scroll will return to the top of the page. This will cause that the arrow disappears and the setting dropdown button returns to it's original position.

      Classic theme test:

      1. Set theme to standard classic theme.
      2. Go to that course and scroll down.
      3. When the scroll position if greater than 50 (usually two or three wheelhouse movements):
        1. A "Go to top" link with an arrow will also appear on the bottom-right part of the window.
        2. By clicking on the "Go to top" arrow link the scroll will return to the top of the page. This will cause that the arrow disappears.

       

      Show
      Prerequisites Create one big course Using the course generator tool. Boost theme Test Set theme to standard boost theme Go to the new course and scroll down When the scroll position if greater than 50 (usually two or three wheelhouse movements): the  Settings dropdown menu will set position to fixed under navbar element. Check it opens on click. A "Go to top" link with an arrow will also appear on the bottom-right part of the window. By clicking on the "Go to top" arrow link the scroll will return to the top of the page. This will cause that the arrow disappears and the setting dropdown button returns to it's original position. Classic theme test: Set theme to standard classic theme. Go to that course and scroll down. When the scroll position if greater than 50 (usually two or three wheelhouse movements): A "Go to top" link with an arrow will also appear on the bottom-right part of the window. By clicking on the "Go to top" arrow link the scroll will return to the top of the page. This will cause that the arrow disappears.  
    • Difficulty:
      Easy
    • Affected Branches:
      MOODLE_38_STABLE
    • Pull Master Branch:

      Description

      Some teachers complain that when courses grow it's tedious to got to top page. This situation is even worse when a teacher is reviewing the course content and want to go to edit mode in the middle of the page.

      To solve this situation I develop a small piece of javascript code and some CSS that detects when the user scrolls down and fixes a "Go to top" link and settings dropdown on the right site of the page (see attached image).

       

      How does it works

      The patch modifies these files:

      • theme/boost/amd/src/aria.js (and minified): adds a class called "shrink" to the body when the user scrolls down ("shrink" is the standard name for this kind of dynamics because mainly is it used to shrink the top navbar)
      •  theme/boost/templates/navbar.mustache (and classic theme equivalent): adds a go to top link
      •  theme/classic/templates/navbar.mustache (and classic theme equivalent): adds a go to top link
      • theme/boost/scss (and style): adding positions fixed when  user scrolls down
      • lang/en/access.php: add a new "Go to top" string

       

        Attachments

          Activity

            People

            • Assignee:
              tusefomal Ferran Recio
              Reporter:
              tusefomal Ferran Recio
              Peer reviewer:
              Pau Ferrer
              Participants:
              Component watchers:
              Amaia Anabitarte, Bas Brands, Carlos Escobedo, Sara Arjona (@sarjona), Víctor Déniz Falcón, Barbara Ramiro, Jake Dallimore, Jun Pataleta, Ryan Wyllie
            • Votes:
              1 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:

                Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 30 minutes
                30m