Uploaded image for project: 'Moodle app'
  1. Moodle app
  2. MOBILE-778 META: Migrate to Ionic
  3. MOBILE-876

Investigate, discuss and decide how to handle split views (tablet vs. phone)

    XMLWordPrintable

    Details

    • Type: Sub-task
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.0
    • Fix Version/s: 2.0
    • Component/s: Ionic
    • Labels:
    • Testing Instructions:
      Hide
      1. Install the app on a smartphone and check that the behavior is the usual (no split view) on pages like messages, calendar events, course contents, forum, ...
      2. Install the app on a tablet and check that the split view is shown and that the first item is loaded when the view is loaded.
      3. Check that going to the same state doesn't lose the right pane contents (e.g., clicking on "Calendar events" item while you're already in calendar events state.
      4. Check that going back to a split view doesn't lose the right pane contents (e.g. go to participants, select a participant, click "View grades" and then go back, the same participant should be loaded on right pane).
      5. In browser, resize the window to simulate a phone-tablet change and check that everything still works:
        • Load a split view on phone mode, make the window bigger (tablet) and check that the states are loaded on the right pane. Also, check that going back to this split view doesn't lose the right pane contents.
        • Load a split view on tablet mode, make the window smaller (phone) and check that clicking an item redirects you to a new view.
      Show
      Install the app on a smartphone and check that the behavior is the usual (no split view) on pages like messages, calendar events, course contents, forum, ... Install the app on a tablet and check that the split view is shown and that the first item is loaded when the view is loaded. Check that going to the same state doesn't lose the right pane contents (e.g., clicking on "Calendar events" item while you're already in calendar events state. Check that going back to a split view doesn't lose the right pane contents (e.g. go to participants, select a participant, click "View grades" and then go back, the same participant should be loaded on right pane). In browser, resize the window to simulate a phone-tablet change and check that everything still works: Load a split view on phone mode, make the window bigger (tablet) and check that the states are loaded on the right pane. Also, check that going back to this split view doesn't lose the right pane contents. Load a split view on tablet mode, make the window smaller (phone) and check that clicking an item redirects you to a new view.
    • Affected Branches:
      MOODLE_20_STABLE
    • Fixed Branches:
      MOODLE_20_STABLE

      Description

      Phones only need one view per screen, but on tablets it is often more user friendly when the screen is split in two parts, one to navigate, the other one for the content.

      We need to find a solution that works on Ionic with minimal code duplication between tablet and phone. Hacks should be avoided as much as possible

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              dpalou Dani Palou
              Reporter:
              fred Frédéric Massart
              Integrator:
              Juan Leyva Juan Leyva
              Tester:
              Juan Leyva Juan Leyva
              Participants:
              Component watchers:
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                31/Jul/15