Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-02 03:44:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Page min-height was being calculated with JS and it was far too tall. This moves the values into CSS with values that are aimed towards iPhone (as this is addressing an iPhone transitions issue with the address bar show/hide).

Browse source
This commit is contained in:
scottjehl 2011-02-03 17:22:23 -05:00
parent 28e1187b08
commit bd79c32c9a
4 changed files with 8 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
js/jquery.mobile.media.js
View file

@ -105,14 +105,6 @@ $(document).bind("mobileinit.htmlclass", function(){
//add orientation class to HTML element on flip/resize.
if(event.orientation){
$html.removeClass( "portrait landscape" ).addClass( event.orientation );
//Set the min-height to the size of the fullscreen. This is to fix issue #455
if( event.orientation === 'portrait' ) {
$( '.ui-page' ).css( 'minHeight', ( screen.availHeight >= screen.availWidth ) ? screen.availHeight : screen.availWidth);
} else {
$( '.ui-page' ).css( 'minHeight', ( screen.availHeight <= screen.availWidth ) ? screen.availHeight : screen.availWidth);
}
$.mobile.silentScroll();
}
//add classes to HTML element for min/max breakpoints
detectResolutionBreakpoints();

6
js/jquery.mobile.page.js
View file

@ -37,12 +37,6 @@ $.widget( "mobile.page", $.mobile.widget, {
if ( this._trigger( "beforeCreate" ) === false ) {
return;
}
if( $( "html" ).hasClass( 'portrait' ) ) {
$elem.css( 'minHeight', ( screen.availHeight >= screen.availWidth ) ? screen.availHeight : screen.availWidth);
} else {
$elem.css( 'minHeight', ( screen.availHeight <= screen.availWidth ) ? screen.availHeight : screen.availWidth);
}
//some of the form elements currently rely on the presence of ui-page and ui-content
// classes so we'll handle page and content roles outside of the main role processing

12
themes/default/jquery.mobile.core.css
View file

@ -12,13 +12,15 @@
/* responsive page widths */
.ui-mobile-viewport { margin: 0; overflow-x: hidden; -webkit-text-size-adjust: none; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/*orientations from js are available */
.portrait { }
.landscape { }
/* "page" containers - full-screen views, one should always be in view post-pageload */
[data-role=page], [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; }
.ui-page-active { display: block; overflow: visible; min-height: 100%; }
.ui-page-active { display: block; overflow: visible; }
/*orientations from js are available */
.portrait,
.portrait .ui-page { min-height: 480px; }
.landscape,
.landscape .ui-page { min-height: 320px; }
/* loading screen */
.ui-loading .ui-mobile-viewport { overflow: hidden !important; }

1
themes/default/jquery.mobile.dialog.css
View file

@ -3,6 +3,7 @@
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.ui-dialog { min-height: 480px; }
.ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { margin: 15px; position: relative; }
.ui-dialog .ui-header, .ui-dialog .ui-footer { z-index: 10; width: auto; }
.ui-dialog .ui-content, .ui-dialog .ui-footer { margin-top: -15px; }