Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Change push to pan, add responsive sizing,make tests pass

  • Loading branch information...
commit cdbe09869a107e2c55a2ebf8bf29d428c5899d40 1 parent 4fb8972
@jefflembeck jefflembeck authored
View
70 css/structure/jquery.mobile.panel.css
@@ -1,9 +1,32 @@
.ui-panel{
+ width: 80%;
+}
+.ui-panel-position-left{
+ left: -85%;
+}
+.ui-panel-position-right{
+ left: 100%;
+}
+.ui-panel-position-left.ui-panel-active{
+ left: 0;
+}
+.ui-panel-position-right.ui-panel-active{
+ left: 20%;
+}
+
+.panel-page .panel-shift-left{
+ left:80%;
+}
+.panel-page .panel-shift-right{
+ right:80%;
+}
+
+.ui-panel{
position: absolute;
display: none;
- width: 25%;
height: 100%;
}
+
.ui-panel-position-left, .ui-panel-position-right{
display: block;
-webkit-transition: left 200ms ease-in-out;
@@ -13,19 +36,6 @@
transition: left 200ms ease-in-out;
}
-.ui-panel-position-left{
- left: -30%;
-}
-.ui-panel-position-right{
- left: 100%;
-}
-.ui-panel-position-left.ui-panel-active{
- left: 0;
-}
-.ui-panel-position-right.ui-panel-active{
- left: 75%;
-}
-
.panel-page .ui-content, .panel-page .ui-header, .panel-page .ui-footer {
position: relative;
-webkit-transition: left 200ms ease-in-out, right 200ms ease-in-out;
@@ -35,12 +45,6 @@
transition: left 200ms ease-in-out, right 200ms ease-in-out;
}
-.panel-page .panel-shift-left{
- left:25%;
-}
-.panel-page .panel-shift-right{
- right:25%;
-}
.ui-panel-display-overlay{
z-index: 2;
}
@@ -55,3 +59,29 @@
.hidden{
display: none;
}
+
+@media screen and (min-width: 30em){
+ .ui-panel{
+ width: 25%;
+ }
+
+ .ui-panel-position-left{
+ left: -30%;
+ }
+ .ui-panel-position-right{
+ left: 100%;
+ }
+ .ui-panel-position-left.ui-panel-active{
+ left: 0;
+ }
+ .ui-panel-position-right.ui-panel-active{
+ left: 75%;
+ }
+
+ .panel-page .panel-shift-left{
+ left:25%;
+ }
+ .panel-page .panel-shift-right{
+ right:25%;
+ }
+}
View
12 docs/panels/index.html
@@ -27,15 +27,15 @@
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
- <h2>Push Panel</h2>
- <a href="#mypanel" data-role="button" data-inline="true" data-rel="panel" data-display="push" data-position="left" data-dismissible="false">Left</a>
- <a href="#mypanel" data-role="button" data-inline="true" data-rel="panel" data-display="push" data-position="right" data-dismissible="true">Right</a>
+ <h2>Pan Panel</h2>
+ <a href="#mypanel" data-role="button" data-inline="true" data-rel="panel" data-display="pan" data-position="left" data-dismissible="false">Left</a>
+ <a href="#mypanel" data-role="button" data-inline="true" data-rel="panel" data-display="pan" data-position="right" data-dismissible="true">Right</a>
<h2>Overlay Panel</h2>
<a href="#mypanel" data-role="button" data-inline="true" data-rel="panel" data-display="overlay" data-position="left" data-dismissible="false">Left</a>
<a href="#mypanel" data-role="button" data-inline="true" data-rel="panel" data-display="overlay" data-position="right" data-dismissible="false">Right</a>
- <h2>Push Panel 2</h2>
- <a href="#mypanel1" data-role="button" data-inline="true" data-rel="panel" data-display="push" data-position="left" data-dismissible="false">Left</a>
- <a href="#mypanel1" data-role="button" data-inline="true" data-rel="panel" data-display="push" data-position="right" data-dismissible="false">Right</a>
+ <h2>Pan Panel 2</h2>
+ <a href="#mypanel1" data-role="button" data-inline="true" data-rel="panel" data-display="pan" data-position="left" data-dismissible="false">Left</a>
+ <a href="#mypanel1" data-role="button" data-inline="true" data-rel="panel" data-display="pan" data-position="right" data-dismissible="false">Right</a>
<h2>Overlay Panel 2</h2>
<a href="#mypanel1" data-role="button" data-inline="true" data-rel="panel" data-display="overlay" data-position="left" data-dismissible="true">Left</a>
<a href="#mypanel1" data-role="button" data-inline="true" data-rel="panel" data-display="overlay" data-position="right" data-dismissible="false">Right</a>
View
5 js/widgets/panel.js
@@ -18,7 +18,7 @@ $.widget( "mobile.panel", $.mobile.widget, {
link: null,
position: "left",
dismissible: true,
- display: "push",
+ display: "pan",
initSelector: ":jqmData(role='panel')"
},
_handleLink: function( roleType , callback ){
@@ -121,9 +121,10 @@ $.widget( "mobile.panel", $.mobile.widget, {
})
.then( function(){
$el.addClass( klass + "-active" );
- if( o.display === "push" ){
+ if( o.display === "pan" ){
$( ".ui-content, .ui-header, .ui-footer" ).addClass( "panel-shift-" + o.position );
}
+ self._trigger( "open" , "open" , { link: o.link } );
deferred.resolve();
});
return deferred.promise();
View
8 tests/unit/panel/index.html
@@ -75,19 +75,19 @@ <h2 id="qunit-userAgent"></h2>
</div>
<div data-nstest-role="content">
<a id="link-1" href="#link-panel-advanced-panel-1" data-nstest-rel="panel" data-nstest-position="left"
- data-nstest-dismissible="true" data-nstest-display="push">Open Panel</a>
+ data-nstest-dismissible="true" data-nstest-display="pan">Open Panel</a>
<a id="link-2" href="#link-panel-advanced-panel-1" data-nstest-rel="panel" data-nstest-position="left"
data-nstest-dismissible="true" data-nstest-display="overlay">Open Panel</a>
<a id="link-3" href="#link-panel-advanced-panel-1" data-nstest-rel="panel" data-nstest-position="left"
- data-nstest-dismissible="false" data-nstest-display="push">Open Panel</a>
+ data-nstest-dismissible="false" data-nstest-display="pan">Open Panel</a>
<a id="link-4" href="#link-panel-advanced-panel-1" data-nstest-rel="panel" data-nstest-position="left"
data-nstest-dismissible="false" data-nstest-display="overlay">Open Panel</a>
<a id="link-5" href="#link-panel-advanced-panel-1" data-nstest-rel="panel" data-nstest-position="right"
- data-nstest-dismissible="true" data-nstest-display="push">Open Panel</a>
+ data-nstest-dismissible="true" data-nstest-display="pan">Open Panel</a>
<a id="link-6" href="#link-panel-advanced-panel-1" data-nstest-rel="panel" data-nstest-position="right"
data-nstest-dismissible="true" data-nstest-display="overlay">Open Panel</a>
<a id="link-7" href="#link-panel-advanced-panel-1" data-nstest-rel="panel" data-nstest-position="right"
- data-nstest-dismissible="false" data-nstest-display="push">Open Panel</a>
+ data-nstest-dismissible="false" data-nstest-display="pan">Open Panel</a>
<a id="link-8" href="#link-panel-advanced-panel-1" data-nstest-rel="panel" data-nstest-position="right"
data-nstest-dismissible="false" data-nstest-display="overlay">Open Panel</a>
</div>
View
14 tests/unit/panel/panel_core.js
@@ -38,13 +38,13 @@
$uipanel.on( "panelopen" , function(){
var $this = $( this );
position = $this.hasClass( "ui-panel-position-right" );
- display = $this.hasClass( "ui-panel-display-push" );
+ display = $this.hasClass( "ui-panel-display-pan" );
dismissible = $this.hasClass( "ui-panel-dismissible-true" );
});
$uipanel.on( "panelclose" , function(){
var $this = $( this );
position = $this.hasClass( "ui-panel-position-right" );
- display = $this.hasClass( "ui-panel-display-push" );
+ display = $this.hasClass( "ui-panel-display-pan" );
dismissible = $this.hasClass( "ui-panel-dismissible-true" );
});
},
@@ -52,7 +52,7 @@
$panel.open({
position: "right",
dismissible: "true",
- display: "push"
+ display: "pan"
});
},
function() {
@@ -142,7 +142,7 @@
$panel = $uipanel.data( "mobile-panel" );
equal( $panel.element.jqmData( "position" ) , "left" , "Link-1: Position upon clicking link is 'left'" );
equal( $panel.element.jqmData( "dismissible" ) , true , "Link-1: Dimissible upon clicking link is true" );
- equal( $panel.element.jqmData( "display" ) , "push" , "Link-1: Display upon clicking link is push" );
+ equal( $panel.element.jqmData( "display" ) , "pan" , "Link-1: Display upon clicking link is pan" );
} , 800 );
},
function() {
@@ -166,7 +166,7 @@
$panel = $uipanel.data( "mobile-panel" );
equal( $panel.element.jqmData( "position" ) , "left" , "Link-3: Position upon clicking link is 'left'" );
equal( $panel.element.jqmData( "dismissible" ) , false , "Link-3: Dimissible upon clicking link is false" );
- equal( $panel.element.jqmData( "display" ) , "push" , "Link-3: Display upon clicking link is push" );
+ equal( $panel.element.jqmData( "display" ) , "pan" , "Link-3: Display upon clicking link is pan" );
} , 800 );
},
function() {
@@ -190,7 +190,7 @@
$panel = $uipanel.data( "mobile-panel" );
equal( $panel.element.jqmData( "position" ) , "right" , "Position upon clicking link is 'right'" );
equal( $panel.element.jqmData( "dismissible" ) , true , "Dimissible upon clicking link is true" );
- equal( $panel.element.jqmData( "display" ) , "push" , "Display upon clicking link is push" );
+ equal( $panel.element.jqmData( "display" ) , "pan" , "Display upon clicking link is pan" );
} , 800 );
},
function() {
@@ -214,7 +214,7 @@
$panel = $uipanel.data( "mobile-panel" );
equal( $panel.element.jqmData( "position" ) , "right" , "Position upon clicking link is 'right'" );
equal( $panel.element.jqmData( "dismissible" ) , false , "Dimissible upon clicking link is false" );
- equal( $panel.element.jqmData( "display" ) , "push" , "Display upon clicking link is push" );
+ equal( $panel.element.jqmData( "display" ) , "pan" , "Display upon clicking link is pan" );
} , 800 );
},
function() {
Please sign in to comment.
Something went wrong with that request. Please try again.