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

Improve display of long user and course names in Messaging

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.9
    • Fix Version/s: 3.0
    • Component/s: Messages
    • Labels:
    • Testing Instructions:
      Hide

      On Clean (not Base - this is a responsive improvement):
      Please test this issue in a range of browsers, including both mobile and desktop versions of

      1. Safari
      2. Chrome
      3. Firefox

      Also RTL

      • Create a test course of size S.
      • Rename the course to have the basename "myhellalonglonglonglonglongcoursename".
      • Rename one of the users to have a similarly long name (e.g. http://ooglag.tumblr.com/post/5013188889 )
      • Log in as one of the users and go to your messaging screen.
        • Observe that the dropdown box for messaging navigation no longer spills out of its container.
      • Switch to your long-named course.
        • Observe that the dropdown box still doesn't spill out.
      • Use the paging bar in the contact list to navigate to a page in the contact list containing your long-named user.
        • Observe that the user in question has their name wrapped onto multiple lines, an improvement over extant behaviour.
      Show
      On Clean (not Base - this is a responsive improvement): Please test this issue in a range of browsers, including both mobile and desktop versions of Safari Chrome Firefox Also RTL Create a test course of size S. Rename the course to have the basename "myhellalonglonglonglonglongcoursename". Rename one of the users to have a similarly long name (e.g. http://ooglag.tumblr.com/post/5013188889 ) Log in as one of the users and go to your messaging screen. Observe that the dropdown box for messaging navigation no longer spills out of its container. Switch to your long-named course. Observe that the dropdown box still doesn't spill out. Use the paging bar in the contact list to navigate to a page in the contact list containing your long-named user. Observe that the user in question has their name wrapped onto multiple lines, an improvement over extant behaviour.
    • Affected Branches:
      MOODLE_29_STABLE
    • Fixed Branches:
      MOODLE_30_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-50113-master

      Description

      Follow up from MDL-49848.

      The Messaging Interface should be improved when or mobile, or in a small browser window. We need to make sure it's useable with:

      • Extremely long course shortnames (the interface should look fine with the longest possible shortname)
      • Extremely long full names of users

      We also should move the contacts to be below the actual messages themselves, and fix the advanced search page (removing the tables, which are bad for accessibility)

      See this comment (about the advanced search page) and this comment

      In my site the .contactselector and .messagearea separator is overlapping .contactselector since 1280px. It depends on the selector options size, so a long course name breaks everything and with the current media query names longer than...20-30 chars would break it.
      I think that we should limit the select options lenght and expand / reduce the 1000px media query according to it.
      Also, to me, and this is a personal preference, I consider more important the conversation between 2 users than the list of users + courses selector, so when the media query is applied I would locate .messagearea on top of .contactsselector (if possible, without googling I don't know how to do it)

      If there's anything that can be fixed in the stable branches, we will need to create another bug issue or backport request to cover it.

        Attachments

        1. firefox-bad.png
          firefox-bad.png
          190 kB
        2. firefox-good.png
          firefox-good.png
          274 kB
        3. no-wrap.png
          no-wrap.png
          172 kB
        4. Screen Shot 2015-05-25 at 4.13.52 PM.png
          Screen Shot 2015-05-25 at 4.13.52 PM.png
          138 kB
        5. Screen Shot 2015-05-25 at 5.46.44 PM.png
          Screen Shot 2015-05-25 at 5.46.44 PM.png
          65 kB

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                5 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  16/Nov/15