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

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

    XMLWordPrintable

    Details

    • Database:
      Any
    • Testing Instructions:
      Hide

      Prerequisites

      1. Create one large course Using the course generator tool.
      2. Test both scenarios using several browsers. At least, Chrome, Firefox, Safari, Opera, IE and Edge.
        • NOTE: on IE and Edge (version <= 18) the sticky property is not compatible and the go to top will be displayed with a fixed position.

      Boost and Classic theme scenario

      1. Go to the new course and scroll down
      2. When the scroll position if greater than 2 times the window height:
        1. A "Go to top" link with an arrow will 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 and the setting dropdown button returns to its original position.

       

      Show
      Prerequisites Create one large course Using the course generator tool. Test both scenarios using several browsers. At least, Chrome, Firefox, Safari, Opera, IE and Edge. NOTE : on IE and Edge (version <= 18) the sticky property is not compatible and the go to top will be displayed with a fixed position. Boost and Classic theme scenario Go to the new course and scroll down When the scroll position if greater than 2 times the window height: A "Go to top" link with an arrow will 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 its original position.  
    • Difficulty:
      Easy
    • Affected Branches:
      MOODLE_38_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull Master Branch:
      MDL-66463-master
    • Sprint:
      Moppies Kanban

      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

        1. image-2019-10-04-12-47-20-069.png
          image-2019-10-04-12-47-20-069.png
          833 kB
        2. MDL-66463_go_to_top.jpg
          MDL-66463_go_to_top.jpg
          85 kB
        3. MDL-66463_message.gif
          MDL-66463_message.gif
          459 kB
        4. screenshot-1.png
          screenshot-1.png
          161 kB
        5. Selecció_481.png
          Selecció_481.png
          88 kB
        6. smooth_scroll_moodle.gif
          smooth_scroll_moodle.gif
          833 kB

          Issue Links

            Activity

              People

              Assignee:
              tusefomal Ferran Recio
              Reporter:
              tusefomal Ferran Recio
              Peer reviewer:
              Pau Ferrer
              Integrator:
              Sara Arjona (@sarjona)
              Tester:
              Janelle Barcega
              Participants:
              Component watchers:
              Bas Brands, Barbara Ramiro, Bas Brands
              Votes:
              1 Vote for this issue
              Watchers:
              12 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                15/Jun/20

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day, 2 hours, 5 minutes
                  1d 2h 5m