iPhone X Styles

With the iPhone X release, Apple introduced so called “safe areas”, when the 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:

  • ios-edges - add to element that is stick to left/right screen edges in landscape orientation
  • ios-left-edge - add to element that is stick to the left screen edge in landscape orientation
  • ios-right-edge - add to element that is stick to the right screen edge in landscape orientation
  • no-ios-edges - add to element which is is inside of ios-edges to remove additional horizontal spacing
  • no-ios-left-edge - add to element which is is inside of ios-edges to remove additional left spacing
  • no-ios-right-edge - add to element which is is inside of ios-edges 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:

  1. <body>
  2.   <!-- app root -->
  3.   <div id="app">
  4.     <!-- statusbar -->
  5.     <div class="statusbar"></div>
  7.     <!-- left panel doesn't require any additional classes -->
  8.     <div class="panel panel-left panel-cover">
  9.       ...
  10.     </div>
  12.     <!-- right panel doesn't require any additional classes -->
  13.     <div class="panel panel-right panel-reveal">
  14.       ...
  15.     </div>
  17.     <!-- main view, full-wide element, add "ios-edges" class -->
  18.     <div class="view view-main view-init ios-edges" data-url="/">
  19.       <div class="page">
  20.         <div class="navbar">
  21.           ...
  22.         </div>
  23.         <div class="page-content">
  24.           <!-- full-wide list, will inherit ios-edges from view -->
  25.           <div class="list">
  26.             ...
  27.           </div>
  28.           <!-- full-wide content block, will inherit ios-edges from view -->
  29.           <div class="block">
  30.             ...
  31.           </div>
  32.           <!--
  33.             two-columns blocks: need to
  34.               - remove extra spacing on right side for left block
  35.               - remove extra spacing on left side for right block
  36.           -->
  37.           <div class="row">
  38.             <!-- remove right spacing on left block -->
  39.             <div class="block col no-ios-right-edge">
  40.               ...
  41.             </div>
  42.             <!-- remove left spacing on right block -->
  43.             <div class="block col no-ios-left-edge">
  44.               ...
  45.             </div>
  46.           </div>
  47.           ...
  48.         </div>
  49.       </div>
  50.     </div>
  51.   </div>
  52.   <script src="../packages/core/js/framework7.min.js"></script>
  53.   <script src="js/routes.js"></script>
  54.   <script src="js/app.js"></script>
  55. </body>