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

Improve message screen layout at certain window sizes

    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_30_STABLE
    • Fixed Branches:
      MOODLE_31_STABLE
    • Pull Master Branch:
      MDL-53147-inbox-layout

      Description

      The responsive css for the message window is buggy and at certain window sizes either completely or partially hides incoming messages. I've reproduced this on a clean moodle on master and also on moodle.org

        Gliffy Diagrams

          Attachments

          1. after-patch-ltr.png
            after-patch-ltr.png
            130 kB
          2. after-patch-rtl.png
            after-patch-rtl.png
            122 kB
          3. clean master.png
            clean master.png
            121 kB
          4. moodle.org.png
            moodle.org.png
            182 kB
          5. stable30-rtl.png
            stable30-rtl.png
            148 kB

            Issue Links

              Activity

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved:
                    Fix Release Date:
                    23/May/16