Skip to content
This repository
Browse code

Panel: Fix for incorrect fixed toolbars width and position if animate…

… is false.
  • Loading branch information...
commit 740e4db0de17ce657d22ea84f51c87a0479f067e 1 parent 93b3180
Jasper de Groot jaspermdegroot authored

Showing 2 changed files with 24 additions and 28 deletions. Show diff stats Hide diff stats

  1. +14 14 css/structure/jquery.mobile.panel.css
  2. +10 14 docs/panels/index.html
28 css/structure/jquery.mobile.panel.css
@@ -129,6 +129,7 @@
129 129 .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open,
130 130 .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
131 131 left: 17em;
  132 + right: -17em;
132 133 }
133 134 /* animated: panel left open (for reveal and push) */
134 135 .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
@@ -136,6 +137,7 @@
136 137 .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
137 138 .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
138 139 left: 0;
  140 + right: 0;
139 141 -webkit-transform: translate3d(17em,0,0);
140 142 -moz-transform: translate3d(17em,0,0);
141 143 transform: translate3d(17em,0,0);
@@ -145,6 +147,7 @@
145 147 .ui-panel-content-wrap-position-right.ui-panel-content-wrap-open,
146 148 .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
147 149 left: -17em;
  150 + right: 17em;
148 151 }
149 152 /* animated: panel right open (for reveal and push) */
150 153 .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal,
@@ -152,6 +155,7 @@
152 155 .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal,
153 156 .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
154 157 left: 0;
  158 + right: 0;
155 159 -webkit-transform: translate3d(-17em,0,0);
156 160 -moz-transform: translate3d(-17em,0,0);
157 161 transform: translate3d(-17em,0,0);
@@ -205,24 +209,20 @@
205 209
206 210 /* wrap on wide viewports once open */
207 211 @media (min-width:55em){
208   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
209   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left {
210   - right: 17em;
211   - }
212   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
213   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
  212 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
  213 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
  214 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
  215 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
214 216 margin-right: 17em;
215 217 }
216   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
217   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right {
218   - left: 17em;
219   - }
220   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
221   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
  218 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
  219 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
  220 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
  221 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
222 222 margin-left: 17em;
223 223 }
224   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
225   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal {
  224 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
  225 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
226 226 width: auto;
227 227 }
228 228 .ui-responsive-panel .ui-panel-dismiss-display-push {
24 docs/panels/index.html
@@ -194,24 +194,20 @@ <h2 id="demo-links">Panels</h2>
194 194 <pre><code>
195 195 /* wrap on wide viewports once open */
196 196 @media (min-width:55em){
197   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
198   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left {
199   - right: 17em;
200   - }
201   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
202   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
  197 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
  198 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
  199 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
  200 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
203 201 margin-right: 17em;
204 202 }
205   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
206   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right {
207   - left: 17em;
208   - }
209   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
210   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
  203 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
  204 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
  205 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
  206 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
211 207 margin-left: 17em;
212 208 }
213   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push,
214   - .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal {
  209 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
  210 + .ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
215 211 width: auto;
216 212 }
217 213 .ui-responsive-panel .ui-panel-dismiss-display-push {

0 comments on commit 740e4db

Please sign in to comment.
Something went wrong with that request. Please try again.