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

Fix problems with message screen layout at certain window sizes (backport of MDL-53147)

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Login as two different users and send messages to the third user. Login as this third user and go to your messages. You will see two names on the left, click on one of them to see conversation (the attached screenshot is how the page used to look).

      Do the 'responsive resize scrub' - slowly change the browser width from very small to very big and note all the places where the layout is broken or non optimal:

      1. 260px - the two avatars stack weirdly
      2. 1200 - 1300px lots of wasted space
      3. 1305 - 1500px page is practically unusable

      Apply the patch and repeat and everything should be more smooth and usable at all widths

      Rinse and repeat with a right-to-left lang mode on. Run this in dev tools to toggle quickly:

      document.getElementById('page-message-index').classList.toggle("dir-rtl")
      

      If you have any trouble recreating the screenshot then comment out lines 498 and 500 of message/lib.php

      Having the navigation block on the right
      1. Login as an admin.
      2. Go to Site administration ► Appearance ► Default Dashboard page
      3. Click on Blocks editing on
      4. Click the gear icon on the Navigation block and click Configure Navigation block.
      5. On the Where this block appears sectionm set the Navigation block's Default region to Right.
      6. Click Save changes
      7. Back on the Default Dashboard page, click Reset Dashboard for all users.
      8. Login again as the third user and go to the Messages screen.
      9. Resize the browser window with various widths.
        • Confirm that the layout adapts responsively, does not break, and renders the messaging screen usable.
      10. Repeat the previous steps in RTL.
        • Confirm that the layout adapts responsively, does not break, and renders the messaging screen usable.
      Show
      Login as two different users and send messages to the third user. Login as this third user and go to your messages. You will see two names on the left, click on one of them to see conversation (the attached screenshot is how the page used to look). Do the 'responsive resize scrub' - slowly change the browser width from very small to very big and note all the places where the layout is broken or non optimal: 260px - the two avatars stack weirdly 1200 - 1300px lots of wasted space 1305 - 1500px page is practically unusable Apply the patch and repeat and everything should be more smooth and usable at all widths Rinse and repeat with a right-to-left lang mode on. Run this in dev tools to toggle quickly: document.getElementById('page-message-index').classList.toggle("dir-rtl") If you have any trouble recreating the screenshot then comment out lines 498 and 500 of message/lib.php Having the navigation block on the right Login as an admin. Go to Site administration ► Appearance ► Default Dashboard page Click on Blocks editing on Click the gear icon on the Navigation block and click Configure Navigation block . On the Where this block appears sectionm set the Navigation block's Default region to Right . Click Save changes Back on the Default Dashboard page, click Reset Dashboard for all users . Login again as the third user and go to the Messages screen. Resize the browser window with various widths. Confirm that the layout adapts responsively, does not break, and renders the messaging screen usable. Repeat the previous steps in RTL. Confirm that the layout adapts responsively, does not break, and renders the messaging screen usable.
    • Affected Branches:
      MOODLE_29_STABLE, MOODLE_30_STABLE
    • Fixed Branches:
      MOODLE_30_STABLE

      Description

      Related to MDL-53147 which was classed as an Improvement. This is a BUG and so request that the fix in MDL-53147 be back-ported to Moodle 2.9 and Moodle 3.0.

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                1 Vote for this issue
                Watchers:
                8 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  12/Sep/16