Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Merge branch 'panel-refactor-part2'
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaspermdegroot
jaspermdegroot committed Jan 14, 2013
2 parents b671eaf + 8293ac6 commit 2707936
Show file tree
Hide file tree
Showing 10 changed files with 560 additions and 540 deletions.
13 changes: 0 additions & 13 deletions css/structure/jquery.mobile.fixedToolbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,3 @@
.ui-android-2x-fixed .ui-li-has-thumb {
-webkit-transform: translate3d(0,0,0);
}
.ui-panel-content-wrap.ui-panel-content-wrap-display-push .ui-header-fixed,
.ui-panel-content-wrap.ui-panel-content-wrap-display-reveal .ui-header-fixed {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
position: absolute;
top: 0;
}
.ui-panel-content-wrap-closed .ui-header-fixed {
-webkit-transform: none;
}
4 changes: 2 additions & 2 deletions css/structure/jquery.mobile.listview.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.ui-listview { margin: 0; }
ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
.ui-content .ui-listview { margin: -15px; }
.ui-content .ui-listview, .ui-panel-inner > .ui-listview { margin: -15px; }
.ui-collapsible-content > .ui-listview { margin: -10px -15px; }
.ui-content .ui-listview-inset { margin: 1em 0; }
.ui-content .ui-listview-inset, .ui-panel-inner .ui-listview-inset { margin: 1em 0; }
.ui-collapsible-content .ui-listview-inset { margin: .5em 0; }
.ui-listview, .ui-li { list-style: none; padding: 0; }
.ui-li, .ui-li.ui-field-contain { display: block; margin: 0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; }
Expand Down
281 changes: 144 additions & 137 deletions css/structure/jquery.mobile.panel.css
View file
Original file line number Diff line number Diff line change
@@ -1,142 +1,177 @@
/* panel */

.ui-panel {
width: 17em;
min-height: 100%;
border-width:0;
border-width: 0;
position: absolute;
top: 0;
display: block;
width: 17em;
}
.ui-panel-closed {
width: 0;
overflow: hidden;
}

/* animate class is added to panel and wrapper, toggling on transitions */
.ui-panel-animate {
-webkit-transition: -webkit-transform 350ms ease;
-moz-transition: -moz-transform 350ms ease;
-o-transition: -o-transform 350ms ease;
-ms-transition: -ms-transform 350ms ease;
transition: transform 350ms ease;
.ui-panel-fixed {
position: fixed;
bottom: -1px; /* fixes gap on Chrome for Android */
padding-bottom: 1px;
}

/* a bit of hardware acceleration for iOS 6 blinking */
.ui-panel-3dtransforms.ui-panel-content-wrap,
.ui-panel-3dtransforms ~.ui-panel-content-wrap .ui-header {
-webkit-backface-visibility: hidden;
.ui-panel-display-overlay {
z-index: 1001; /* fixed toolbars have z-index 1000 */
}

/* don't animate reveal - it stays in place */
.ui-panel-display-reveal {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
z-index: 0;
}
.ui-panel-display-push {
z-index: 999;
}
.ui-panel-inner {
padding: 15px;
}

/* content-wrap */
.ui-panel-content-wrap {
position: relative;
left: 0;
min-height: inherit;
border: none;
z-index: 999;
}
.ui-panel-content-wrap-display-overlay,
.ui-panel-animate.ui-panel-content-wrap > .ui-header, /* ios4 fix */
.ui-panel-content-wrap-closed {
position: static;
}

/* z stacking */
.ui-panel-display-overlay,
.ui-panel-display-push,
.ui-panel-content-wrap,
/* dismiss */
.ui-panel-dismiss {
z-index: 99999;
position: absolute;
top: 0;
left:0;
height: 100%;
width: 100%;
z-index: 1002;
display: none;
}
.ui-panel-display-reveal {
z-index: 0;
.ui-panel-dismiss-open {
display: block;
}
.ui-panel,
.ui-panel.ui-panel-unfixed {
position: absolute;

/* animate class is added to panel, wrapper and fixed toolbars */
.ui-panel-animate {
-webkit-transition: -webkit-transform 350ms ease;
-moz-transition: -moz-transform 350ms ease;
transition: transform 350ms ease;
}
/* display and reveal */
.ui-panel-3dtransforms {
position: fixed;

/* hardware acceleration for smoother transitions */
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal),
.ui-panel-animate.ui-panel:not(.ui-panel-display-reveal) > div,
.ui-panel-animate.ui-panel-content-wrap,
.ui-panel-animate.ui-panel-content-fixed-toolbar {
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
}

/* panel default positions */
.ui-panel-position-left,
.ui-panel-3dtransforms.ui-panel-position-left.ui-panel-open,
.ui-panel-3dtransforms.ui-panel-position-left.ui-panel-display-reveal {
/* positioning: panel */
/* panel left */
.ui-panel-position-left {
left: -17em;
}
.ui-panel-position-right,
.ui-panel-3dtransforms.ui-panel-position-right.ui-panel-open,
.ui-panel-3dtransforms.ui-panel-position-right.ui-panel-display-reveal {
right: -17em;
/* animated: panel left (for overlay and push) */
.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
left: 0;
-webkit-transform: translate3d(-17em,0,0);
-moz-transform: translate3d(-17em,0,0);
transform: translate3d(-17em,0,0);
}
/* non-3d positioning */
/* panel left open */
.ui-panel-position-left.ui-panel-display-reveal, /* negate "panel left" for reveal */
.ui-panel-position-left.ui-panel-open {
left: 0;
}
/* animated: panel left open (for overlay and push) */
.ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-left.ui-panel-open.ui-panel-display-push {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* panel right */
.ui-panel-position-right {
right: -17em;
}
/* animated: panel right (for overlay and push) */
.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
right: 0;
-webkit-transform: translate3d(17em,0,0);
-moz-transform: translate3d(17em,0,0);
transform: translate3d(17em,0,0);
}
/* panel right open */
.ui-panel-position-right.ui-panel-display-reveal, /* negate "panel right" for reveal */
.ui-panel-position-right.ui-panel-open {
right: 0;
}

/* panel open positions */
.ui-panel-3dtransforms.ui-panel-open,
.ui-panel-3dtransforms.ui-panel-position-left.ui-panel-display-reveal {
-webkit-transform: translateX(17em);
-moz-transform: translateX(17em);
-ms-transform: translateX(17em);
-o-transform: translateX(17em);
transform: translateX(17em);
}
/* this exception is here to keep reveal in place until the closed class is added, which is after hide */
.ui-panel-3dtransforms.ui-panel-display-reveal.ui-panel-closed {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.ui-panel-3dtransforms.ui-panel-open.ui-panel-position-right,
.ui-panel-3dtransforms.ui-panel-position-right.ui-panel-display-reveal {
-webkit-transform: translateX(-17em);
-moz-transform: translateX(-17em);
-ms-transform: translateX(-17em);
-o-transform: translateX(-17em);
transform: translateX(-17em);
/* animated: panel right open (for overlay and push) */
.ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-overlay,
.ui-panel-animate.ui-panel-position-right.ui-panel-open.ui-panel-display-push {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

/* dismiss */
.ui-panel-dismiss{
position: absolute;
top: 0;
left:0;
height: 100%;
width: 100%;
display: none;
}
.ui-panel-dismiss-open{
display: block;
/* positioning: content wrap, fixed toolbars and dismiss */
/* panel left open */
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open,
.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open,
.ui-panel-dismiss-position-left.ui-panel-dismiss-open {
left: 17em;
}

/* content-wrap */
.ui-panel-content-wrap {
position: relative;
background: inherit;
z-index: 1;
/* animated: panel left open (for reveal and push) */
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
left: 0;
min-height: inherit;
-webkit-transform: translate3d(17em,0,0);
-moz-transform: translate3d(17em,0,0);
transform: translate3d(17em,0,0);
}
/* panel right open */
.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open,
.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open,
.ui-panel-dismiss-position-right.ui-panel-dismiss-open {
left: -17em;
}
.ui-panel-content-wrap-display-overlay {
position: static;
/* animated: panel right open (for reveal and push) */
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
.ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
left: 0;
-webkit-transform: translate3d(-17em,0,0);
-moz-transform: translate3d(-17em,0,0);
transform: translate3d(-17em,0,0);
}
/* a bit of hardware acceleration for iOS 6 blinking */
.ui-panel-3dtransforms ~.ui-panel-content-wrap ,
.ui-panel-3dtransforms ~.ui-panel-content-wrap .ui-header-fixed {
-webkit-backface-visibility: hidden;
/* negate "panel left/right open" for overlay */
.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-overlay,
.ui-panel-content-wrap-open.ui-panel-content-wrap-display-overlay {
left: 0;
}
.ui-panel-3dtransforms ~.ui-panel-content-wrap .ui-header:not(.ui-header-fixed), /* ios4 fix */
.ui-panel-content-wrap-closed {
position: static;

/* always disable overflow-x to prevent zoom issue on Android */
.ui-page-active.ui-page-panel {
overflow-x: hidden;
}

/* shadows and borders */
.ui-panel-display-reveal {
-webkit-box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
-moz-box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
box-shadow: inset -5px 0 5px rgba(0,0,0,.15);
}
.ui-panel-position-right.ui-panel-display-reveal {
Expand All @@ -158,57 +193,29 @@
border-right-width: 1px;
margin-right: -1px;
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push {
margin-left: 1px;
}
.ui-panel-display-push.ui-panel-open.ui-panel-position-right {
border-left-width: 1px;
margin-left: -1px;
}

/* dismiss and content wrap open positions */
.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
.ui-panel-dismiss-open.ui-panel-dismiss-display-reveal,
.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push,
.ui-panel-dismiss-open.ui-panel-dismiss-display-push,
.ui-panel-dismiss-open.ui-panel-dismiss-display-overlay {
left: 17em;
}
.ui-panel-3dtransforms.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
.ui-panel-3dtransforms.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
-webkit-transform: translateX(17em);
-moz-transform: translateX(17em);
-ms-transform: translateX(17em);
-o-transform: translateX(17em);
transform: translateX(17em);
left: 0;
}
.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right,
.ui-panel-dismiss-open.ui-panel-dismiss-display-reveal.ui-panel-dismiss-position-right,
.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
.ui-panel-dismiss-open.ui-panel-dismiss-display-push.ui-panel-dismiss-position-right,
.ui-panel-dismiss-open.ui-panel-dismiss-display-overlay.ui-panel-dismiss-position-right {
left: -17em;
}
.ui-panel-3dtransforms ~.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right,
.ui-panel-3dtransforms ~.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right {
-webkit-transform: translateX(-17em);
-moz-transform: translateX(-17em);
-ms-transform: translateX(-17em);
-o-transform: translateX(-17em);
transform: translateX(-17em);
left: 0;
}
/* while open, page x overflow is disabled */
.ui-page-active.ui-panel-page-block {
overflow-x:hidden;
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push {
margin-right: 1px;
}

/* wrap push on wide viewports once open */
@media (min-width:55em){
.ui-responsive-panel .ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-push,
.ui-responsive-panel .ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-reveal {
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal {
margin-right: 17em;
}
.ui-responsive-panel .ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
.ui-responsive-panel .ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-wrap-display-push.ui-panel-content-fixed-toolbar-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-wrap-display-reveal.ui-panel-content-fixed-toolbar-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
margin: 0 0 0 17em;
}
.ui-responsive-panel .ui-panel-dismiss-display-push {
Expand Down
2 changes: 1 addition & 1 deletion docs/demos/panels/panel-nav-form-fixed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ <h2>Panel: Menu + form</h2>

<div data-role="panel" data-position="left" data-position-fixed="true" data-display="reveal" id="nav-panel" data-theme="a">

<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-1px;" class="nav-search">
<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
<li data-icon="delete" style="background-color:#111;">
<a href="#" data-rel="close">Close menu</a>
</li>
Expand Down
Loading

0 comments on commit 2707936

Please sign in to comment.