Safe Areas

With the iPhone X release and further iPhone XS and iPad Pro, Apple introduced so called safe areas, later implemented by Google Chrome with support in Android.

On devices with safe areas (like with top screen notch), app UI must include additional top/bottom spacing (to consider top notch and new bottom bar) in portrait orientation and additional left/righ spacing (to consider left/right notch) in landscape orientation.

In portrait orientation Framework7 will do required styles modifications automatically, but in landscape orientation some additional classes must be added to elements:

safe-areas - add to element that is stick to both left and right screen edges in landscape orientation
safe-area-left - add to element that is stick to the left screen edge in landscape orientation
safe-area-right - add to element that is stick to the right screen edge in landscape orientation
no-safe-areas - add to element which is is inside of safe-areas to remove additional horizontal spacing
no-safe-area-left - add to element which is is inside of safe-areas to remove additional left spacing
no-safe-area-right - add to element which is is inside of safe-areas to remove additional right spacing

The following elements don't require such classes:

Popup, Sheet - already considered as full screen elements that is required extra spacing on both left and right sides
Left Panel - already considered as element that is stick to the left screen edge and requires extra spacing on left side
Right Panel - already considered as element that is stick to the right screen edge and requires extra spacing on right side

Here is the example app layout with such classes:

<body>
  <!-- app root -->
  <div id="app">
    <!-- statusbar -->
    <div class="statusbar"></div>

    <!-- left panel doesn't require any additional classes -->
    <div class="panel panel-left panel-cover">
      ...
    </div>

    <!-- right panel doesn't require any additional classes -->
    <div class="panel panel-right panel-reveal">
      ...
    </div>

    <!-- main view, full-wide element, add "safe-areas" class -->
    <div class="view view-main view-init safe-areas" data-url="/">
      <div class="page">
        <div class="navbar">
          ...
        </div>
        <div class="page-content">
          <!-- full-wide list, will inherit safe-areas from view -->
          <div class="list">
            ...
          </div>
          <!-- full-wide content block, will inherit safe-areas from view -->
          <div class="block">
            ...
          </div>
          <!--
            two-columns blocks: need to
              - remove extra spacing on right side for left block
              - remove extra spacing on left side for right block
          -->
          <div class="row">
            <!-- remove right spacing on left block -->
            <div class="block col no-safe-area-right">
              ...
            </div>
            <!-- remove left spacing on right block -->
            <div class="block col no-safe-area-left">
              ...
            </div>
          </div>
          ...
        </div>
      </div>
    </div>
  </div>
  ...
</body>