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

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

    XMLWordPrintable

    Details

    • Affected Branches:
      MOODLE_32_STABLE
    • Fixed Branches:
      MOODLE_33_STABLE
    • Pull Master Branch:
      MDL-55941-initialbar-ux
    • 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

      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

              Assignee:
              ilyatregubov Ilya Tregubov
              Reporter:
              brendanheywood Brendan Heywood
              Peer reviewer:
              Marina Glancy Marina Glancy
              Integrator:
              Dan Poltawski Dan Poltawski
              Tester:
              Elizabeth Dalton Elizabeth Dalton
              Participants:
              Component watchers:
              Huong Nguyen, Barbara Ramiro, Bas Brands, Mathew May, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Sara Arjona (@sarjona)
              Votes:
              0 Vote for this issue
              Watchers:
              6 Start watching this issue

                Dates

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