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

Mobile-friendly way to display blocks on small screen

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Open
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: 2.5
    • Fix Version/s: FRONTEND
    • Component/s: Themes
    • Labels:
    • Story Points:
      100

      Description

      "Bootstrap" themes: define the way to display blocks on small screen. At the moment all blocks are displayed at the bottom of the page. In real usage it may be a minor issue (the user only scrolls there when a user needs to go there, so the issue frequency depends how many time a user need to access a block), but it doesn't feel mobile friendly.

      Possible alternatives to existing:

      • all blocks could be move on a side bar on the right. The bar could be slided (left swipe or hamburger button).
      • each block names could be integrated to a new mobile navigation menu (like the HTML5 mobile app). When you click on the block, it is displayed in one entire page.

        Balsamiq Wireframes

          Attachments

          1. martin app mockup 1.bmml
            18 kB
          2. martin app mockup 1.bmml
            9 kB
          3. martin app mockup 1.png
            martin app mockup 1.png
            106 kB
          4. minimal-tweak.jpg
            minimal-tweak.jpg
            71 kB
          5. minimal-tweak-2a.jpg
            minimal-tweak-2a.jpg
            36 kB
          6. minimal-tweak-2a-revised.jpg
            minimal-tweak-2a-revised.jpg
            34 kB
          7. minimal-tweak-2b.jpg
            minimal-tweak-2b.jpg
            31 kB
          8. minimal-tweak-2c.jpg
            minimal-tweak-2c.jpg
            38 kB
          9. minimal-tweak-tablet.jpg
            minimal-tweak-tablet.jpg
            295 kB
          10. minimal-tweak-tablet-2.jpg
            minimal-tweak-tablet-2.jpg
            119 kB
          11. minimal-tweak-tablet-collapsed-by-default.jpg
            minimal-tweak-tablet-collapsed-by-default.jpg
            284 kB
          12. similar-to-moodle-app.jpg
            similar-to-moodle-app.jpg
            70 kB
          13. similar-to-moodle-app-small-screen-home-page.jpg
            similar-to-moodle-app-small-screen-home-page.jpg
            308 kB
          14. similar-to-moodle-app-tablet-blocks-page-2.jpg
            similar-to-moodle-app-tablet-blocks-page-2.jpg
            64 kB
          15. similar-to-moodle-app-tablet-course-page.jpg
            similar-to-moodle-app-tablet-course-page.jpg
            266 kB
          16. similar-to-moodle-app-tablet-course-page-2.jpg
            similar-to-moodle-app-tablet-course-page-2.jpg
            70 kB
          17. similar-to-moodle-app-tablet-home-page.jpg
            similar-to-moodle-app-tablet-home-page.jpg
            274 kB

            Issue Links

              Activity

                People

                Assignee:
                barbararamiro Barbara Ramiro
                Reporter:
                jerome Jérôme Mouneyrac
                Participants:
                Component watchers:
                Bas Brands
                Votes:
                0 Vote for this issue
                Watchers:
                13 Start watching this issue

                  Dates

                  Created:
                  Updated: