Uploaded image for project: 'Moodle app'
  1. Moodle app
  2. MOBILE-2676

Header margin-top is 0 when rotating and iPhone with Notch

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 3.5.2
    • Fix Version/s: 3.6.0
    • Component/s: Ionic
    • Labels:
    • Testing Instructions:
      Hide
      1. Open the app with an iPhone with notch (simulator is required).
      2. Rotate the screen to landscape and check the top bar is not huge.
      3. Check also left and right margins avoids hiding content bellow the notch.
      4. Not rotate again to portrait and check the top header has the same height as the initial.

      Note: In this issue there are some css changes introduced to avoid hiding content at right and left sides when the phone is on landscape. Much more work can be done but this is an initial step and the main content know is correctly shown. We should open a follow up issue to solve all the problems found in the current test and in the release test.

      Show
      Open the app with an iPhone with notch (simulator is required). Rotate the screen to landscape and check the top bar is not huge. Check also left and right margins avoids hiding content bellow the notch. Not rotate again to portrait and check the top header has the same height as the initial. Note: In this issue there are some css changes introduced to avoid hiding content at right and left sides when the phone is on landscape. Much more work can be done but this is an initial step and the main content know is correctly shown. We should open a follow up issue to solve all the problems found in the current test and in the release test.
    • Affected Branches:
      MOODLE_35_STABLE
    • Fixed Branches:
      MOODLE_36_STABLE
    • Pull Master Branch:
    • Sprint:
      Moodle Mobile 3.6.0

      Description

      It happens on the iPhone witth notch.

       

      When rotating, on landscape orientation there's too much space. Then, when on portrait, header space dissapears... It seems cordova is changing the value of the safe-area-inset-top when changing the orientation.

      .statusbar-padding{
         padding-top: calc(env(safe-area-inset-top) + 4px);
      }

        Attachments

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  11/Jan/19

                  Time Tracking

                  Estimated:
                  Original Estimate - 2 days
                  2d
                  Remaining:
                  0m
                  Logged:
                  Time Not Required
                  Not Specified