option for ios7 header padding for statusbar overlay

[krisrak]

Issue

For iOS7 style statusbar overlay when building Cordova app, there needs to be option to enable a 20px padding in header for iOS7 theme.

Fix

• Added a new afui property called $.ui.overlayStatusbar, which is false by default.
• If set to true, then it will check for $.os.ios7 and then will add a class overlayStatusbar to .header elements.
• Defined overlayStatusbar class in ios7.css with padding-top:20px and height:64px
• Added this option in kitchensink $.ui.overlayStatusbar = true

Also fixed few minor issues in 2 more commits:

• default modal header had extra .header class
• sidemenu text color was wrong

[imaffett]

Hey @krisrak

I'm not 100% sure I like this. The developer should be handling it in Cordova (IMO), not in the framework.

[krisrak]

In Cordova, user can control whether they want overlayed statusbar like in ios7 or static statusbar like in ios6 and before, if they choose overlayed statusbar, then the app UI should have a 20px padding, something user has to do in UI. Ionic does the same. Either way, this Afui property is not the only way, the user can also manually add CSS to get this padding, which can be documented in tips and tricks.

[imaffett]

Sorry...backtracking on my thoughts on this. You are 100% correct, this should be here. I will merge it.

[dillix]

I think we also need this option for iOS8

[imaffett]

@dillix We have tested iOS8 yet. Once it gets closer to a GM we will. If someone else wants to test it and submit any updates, they can.

[dillix]

I found 2 issues in krisrak patch:

1. It does't work when I set $.ui.useOSThemes=false; (I want use one theme for iOS and Android)

2. Splitview border overlaps statusbar:
   

Is there a way to fix them? I use cordova-cli 3.5 and I want use $.ui.overlayStatusbar instead cordova StatusBar plugin, because with plugin I have issues with admob and other stuff...

[imaffett]

@dillix

I just checked in a fix that should handle all of this, including setting $.os.ios7 true for ios 8

[dillix]

@imaffett

Now statusbar is ok, but I have problems with footer:

[imaffett]

Yep - let's just say iOS 8 is buggy as heck right now :). I installed it and saw a lot of problems with Safari and rendering. I won't look into it again until it his GM.

[dillix]

@imaffett

This screenshot from iOS7 iPad mini 2

[imaffett]

Hm...my ipad looks fine. Can you post a sample somewhere so I can debug it?

[dillix]

I found how to fix bug. Then I run my app appframework sets height for div#afui = 1024 and then after running statusbar fix we have height div#afui = height + 20 (padding-top) = 1044, so we should set div#afui = height - 20px after running statusbar fix.

[imaffett]

@dillix

Fixing it now. It should be changed in the CSS, not setting the AFUI height

[dillix]

@imaffett & @krisrak

Thanks guys now my app works as desired with and without admob!