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
          arrow_in_boost.png
          37 kB
        2. arrow_in_clean.png
          arrow_in_clean.png
          24 kB
        3. dropdown.png
          dropdown.png
          18 kB
        4. image-2017-09-08-17-26-16-443.png
          image-2017-09-08-17-26-16-443.png
          5 kB
        5. image-2017-09-08-17-26-34-944.png
          image-2017-09-08-17-26-34-944.png
          3 kB
        6. image-2018-02-01-10-25-59-893.png
          image-2018-02-01-10-25-59-893.png
          100 kB
        7. usermenu.png
          usermenu.png
          13 kB
        8. usertour_db.png
          usertour_db.png
          27 kB

          Issue Links

            Activity

              People

              • Votes:
                2 Vote for this issue
                Watchers:
                7 Start watching this issue

                Dates

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