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

User tours: step placement issues if screen too narrow

    XMLWordPrintable

Details

    • MOODLE_310_STABLE, MOODLE_311_STABLE, MOODLE_39_STABLE
    • MOODLE_310_STABLE, MOODLE_311_STABLE
    • MDL-72033-master
    • Hide
      1. Login as admin
      2. Navigate to Site administration -> Appearance -> User Tours
      3. Create a new tour (admin/tool/usertours/configure.php?action=newtour)
      4. Apply "Apply to URL match" to /course/view.php%
      5. Add a new step with these settings:
      • Target type: Selector
      • Target type: Selector
      • CSS selector: #section-1
      • Title: Topic 
      • Content: Courses can be divided into sections to organize resources and activities for students. Each section can have a description and can contain many activities and resources as the teacher desires.
      • Placement: Right
      1. Save the changes
      2. Go to a course
      3. Verify for tablet and mobile screen sizes
      4. If a step has been told to place the box to the left or right of an element, if a screen is too narrow, the step overlaps with the content it is trying to highlight and the arrow for the step is pointing in the wrong place

      Expected result: The step to display above.

      Show
      Login as admin Navigate to Site administration -> Appearance -> User Tours Create a new tour (admin/tool/usertours/configure.php?action=newtour) Apply "Apply to URL match" to /course/view.php% Add a new step with these settings: Target type: Selector Target type: Selector CSS selector: #section-1 Title: Topic  Content: Courses can be divided into sections to organize resources and activities for students. Each section can have a description and can contain many activities and resources as the teacher desires. Placement: Right Save the changes Go to a course Verify for tablet and mobile screen sizes If a step has been told to place the box to the left or right of an element, if a screen is too narrow, the step overlaps with the content it is trying to highlight and the arrow for the step is pointing in the wrong place Expected result: The step to display above.

    Description

      For tablet and mobile screen sizes, there are a few step placement issues in certain situations.

      If a step has been told to place the box to the left or right of an element, if a screen is too narrow, the step overlaps with the content it is trying to highlight and the arrow for the step is pointing in the wrong place. This is typically an issue for tablet sized screens, but also some smaller desktop views. It would be sensible for the step to display above instead, but only if there is not enough room for the step to display as intended.

      Attachments

        1. af1a6f67-8f72-4c8e-bd2d-a84e062e9f32.png
          af1a6f67-8f72-4c8e-bd2d-a84e062e9f32.png
          39 kB
        2. andrewnicols.JPG
          andrewnicols.JPG
          53 kB
        3. fixed.JPG
          fixed.JPG
          55 kB
        4. MDL-72033_Test Passed.PNG
          MDL-72033_Test Passed.PNG
          35 kB

        Issue Links

          Activity

            People

              thachleh Thach Le
              thachleh Thach Le
              Sam Marshall Sam Marshall
              Ilya Tregubov Ilya Tregubov
              Gladys Basiana Gladys Basiana
              Votes:
              1 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 hour, 15 minutes
                  1h 15m

                  Clockify

                    Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.