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

User tours: pop-up triangle can look bad next to the rounded corners

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 3.2.4, 3.3, 3.3.4, 3.4.1
    • Fix Version/s: 3.3.5, 3.4.2
    • Component/s: User Tours
    • Labels:
    • Testing Instructions:
      Hide
      1. Log in as manager.
      2. Go to the site home page.
      3. If no tour is shown, click the "Reset user tour on this page" link in the footer
      4. Step through each step of the tour
        1. Confirm that the triangle is in the correct location
      5. Navigate to Administration -> Appearance -> User tours
      6. Add a new tour which targets clean on the FRONTPAGE
      7. Add a new step which target .coursebox
      8. Enable the tour
      9. Switch to clean
      10. View the front page
        1. Confirm that the arrow is not cut off
      Show
      Log in as manager. Go to the site home page. If no tour is shown, click the "Reset user tour on this page" link in the footer Step through each step of the tour Confirm that the triangle is in the correct location Navigate to Administration -> Appearance -> User tours Add a new tour which targets clean on the FRONTPAGE Add a new step which target .coursebox Enable the tour Switch to clean View the front page Confirm that the arrow is not cut off
    • Affected Branches:
      MOODLE_32_STABLE, MOODLE_33_STABLE, MOODLE_34_STABLE
    • Fixed Branches:
      MOODLE_33_STABLE, MOODLE_34_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-60077-master

      Description

      Sometimes, the triangle that attaches the user tour pop-up to the item being annotated can appear at the far right side. That looks ugly. We probably need to move the triangle a few pixels left in this case.

      I struggled to reproduce this in standard Moodle (it is easier in the OU custom theme) but this worked - kind of.

      1. Go to qa.moodle.net, and log in as manager.
      2. Go to Site administration / Appearance / User tours.
      3. Edit the properties on the Boost - administrator tour, to show to all roles.
      4. Add a new step 'The user menu', with CSS selector '.usermenu .dropdown-toggle'
      5. For convenience, move that step to be first in the tour.
      6. Click to 'Force the tour to be displayed' link.
      7. Go to the site home page.

      Expected result: the tour pop-up displays, and looks nice.

      Actual result: The light-box greys out the entire page, but the pop-up is not visibile.

      8. So, open your browser developer tools, and find the <span id="tour-step-span tool_usertours_..." at the end of body. Disable the transform property. Then the dialogue appears, but in the wrong place.

      Actual result continued ...

      The triangle is at the far right of the dialogue, which looks ugly.

        Attachments

        1. arrow_in_boost.png
          37 kB
          Marina Glancy
        2. arrow_in_clean.png
          24 kB
          Marina Glancy
        3. dropdown.png
          18 kB
          Andrew Lyons
        4. image-2017-09-08-17-26-16-443.png
          5 kB
          Tim Hunt
        5. image-2017-09-08-17-26-34-944.png
          3 kB
          Tim Hunt
        6. image-2018-02-01-10-25-59-893.png
          100 kB
          Huong Nguyen
        7. usermenu.png
          13 kB
          Andrew Lyons
        8. usertour_db.png
          27 kB
          Marina Glancy

          Issue Links

            Activity

              People

              Assignee:
              HuongNV Huong Nguyen
              Reporter:
              timhunt Tim Hunt
              Integrator:
              Andrew Lyons Andrew Lyons
              Tester:
              Marina Glancy Marina Glancy
              Participants:
              Component watchers:
              Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              2 Vote for this issue
              Watchers:
              8 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                19/Mar/18