Framework7: [v1] iphone x support for version 1

[seme1]

For those of us who are still stuck with v1, we need the css/js tweaks to fully support iphone X till we are able to upgrade to v2.

This is a (multiple allowed):

• [] bug
• [x ] enhancement
• [ ] feature-discussion (RFC)

[elysiopires]

Really need this too... We built a huge app with the version 1 and have a lot of work to upgrade to v2... Do you have an upgrade recipe?

[seme1]

There is a migration guide here:
https://blog.framework7.io/migration-to-framework7-v2-eb6dc38ede3b
But my app is huge as well. The upgrade to v2 will probably take a while for me to complete and I'm perfectly happy wtih V1 for now. Only thing missing is its support for iphone X related styles.

[elysiopires]

Hello Seme!

I got full working here the version one. I made the following steps:

• Updated cordova ios platform to 4.5.4
• Updated the splashscreen plugin to the latest version;
• Created an image 2436x1125
• Added the entry to config.xml:
  <splash height="2436" src="res/ios/[email protected]" width="1125" />
• Altered the viewport meta tag to this (viewport-fit=cover do the trick):
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
• After that I created an css file called iphoneXfix.css and when I detect that is an iphoneX I attach this dinamically to my body with this function:
  //>>>>>JAVASCRIPT PART
  //FUNCTION TO DETECT IPHONEX I placed this below adding a view(mainView = myApp.addView...)
  if((window.screen.height * window.devicePixelRatio)==2436&&device.platform=="iOS"){ loadjscssfile("css/iphoneXfix.css", "css"); }
  //FUNCTION TO ATTACH DINAMICALLY A CSS FILE
  function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) }

//>>>>>CSS PART depends on your customizations you need to fix that like this... As my navbar was a
bigger than normal i didn't have problem with that
.navbar .left, .navbar .right, i.icon.icon-yourlogo { margin-top: 35px !important; }
That's all...
I hope it could help you...

Best regards,
Elysio

[seme1]

Thanks for your efforts. However, there are a few other components, other than navbar, that need to be fixed. From what I recall, this includes navbar, subnavbar, tabbar, autocomplete, and a few other modals. Perhaps there are other elements that need to be updated as well. Handling portrait and lanscanpe modes in iPhone X need to be considered, too.

It would be best if @nolimits4web can apply the fixes himself instead of applying incomplete patches here and there. The abrupt cease of updates to V1 for Framework7 without having previously announced a road map makes me really worried about the whole framework in the future. I'm not sure about others, this is also very discouraging for me to update to v2 of Framework7. After all, it'll take considerate amount of time for me to upgrade to v2.

[unstableair]

I could also really do with iPhone X support in F7 V1.
Apple have made iPhone X display support mandatory for app store submissions starting April 2018.
Dave Billington - Patreon backer since 26/9/2016 :)

"Starting April 2018 .... apps for iPhone, including universal apps, must support the Super Retina display of iPhone X."

[nolimits4web]

It is on the list guys, will do it as soon as get a bit more time, next week maximum

[nolimits4web]

1.7.0 Released with same iPhone X support as in v2

[dizzlr]

1.7.0 Released with same iPhone X support as in v2

could you please add this as releases with full files
here
https://github.com/framework7io/Framework7/releases/
that will be great :)