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

Improve UX of alpha chooser / initialbar in tablelib and make it responsive

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      1. Open up any page which uses the initialbar eg http://moodle.test.local/user/index.php?id=1, http://moodle.test.local/report/progress/index.php?course=2, http://moodle.test.local/report/completion/index.php?course=2 etc
      2. Do the 'responsive scrub' and make sure it looks decent at all reasonable widths
      3. In particular test that in English on a mobile at 320 pixels it wraps into 2 neat lines
      4. Rinse and repeat with a few other languages, in particular the ones with extreme word lengths and alphabet sizes, rtl languages, Persian (fa), Khmer (km) and Greenlandic (kl)
      5. Repeat all of the above in both clean and boost, and with the boost menu open and closed at various sizes
      6. Check if preferences are saved - filter by first/lastname letters, leave the page and return to it - preferences should be saved
      Show
      Open up any page which uses the initialbar eg http://moodle.test.local/user/index.php?id=1 , http://moodle.test.local/report/progress/index.php?course=2 , http://moodle.test.local/report/completion/index.php?course=2 etc Do the 'responsive scrub' and make sure it looks decent at all reasonable widths In particular test that in English on a mobile at 320 pixels it wraps into 2 neat lines Rinse and repeat with a few other languages, in particular the ones with extreme word lengths and alphabet sizes, rtl languages, Persian (fa), Khmer (km) and Greenlandic (kl) Repeat all of the above in both clean and boost, and with the boost menu open and closed at various sizes Check if preferences are saved - filter by first/lastname letters, leave the page and return to it - preferences should be saved
    • Affected Branches:
      MOODLE_32_STABLE
    • Fixed Branches:
      MOODLE_33_STABLE
    • Pull Master Branch:
      MDL-55941-initialbar-ux

      Description

      The alpha chooser layout jump around a bit depending on what letters are selected, and it doesn't work very nicely on smaller screens.

        Attachments

        1. names_above.png
          names_above.png
          12 kB
        2. names_to_left.png
          names_to_left.png
          12 kB
        3. screenshot-1.png
          screenshot-1.png
          19 kB
        4. screenshot-2.png
          screenshot-2.png
          38 kB
        5. screenshot-4.png
          screenshot-4.png
          14 kB
        6. screenshot-5.png
          screenshot-5.png
          65 kB
        7. screenshot-6.png
          screenshot-6.png
          66 kB
        8. screenshot-7.png
          screenshot-7.png
          67 kB
        9. screenshot-8.png
          screenshot-8.png
          57 kB
        10. screenshot-9.png
          screenshot-9.png
          69 kB

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  15/May/17