Skip to content

Commit f2dcd2f

Browse files
toddparkertoddparker
committed
Panels: Scoped the responsive breakpoint preset rules to a .ui-responsive-panels class on the page wrapper, updated docs
1 parent 941f2e0 commit f2dcd2f

File tree

2 files changed

+37
-9
lines changed

2 files changed

+37
-9
lines changed

‎css/structure/jquery.mobile.panel.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -197,16 +197,16 @@
197197
}
198198

199199
/* wrap push on wide viewports once open */
200-
@media (min-width: 60em){
201-
.ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-push,
202-
.ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-reveal {
200+
@media (min-width:55em){
201+
.ui-responsive-panel .ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-push,
202+
.ui-responsive-panel .ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-reveal {
203203
margin-right: 17em;
204204
}
205-
.ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
206-
.ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
205+
.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,
206+
.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 {
207207
margin: 0 0 0 17em;
208208
}
209-
.ui-panel-dismiss-display-push {
209+
.ui-responsive-panel .ui-panel-dismiss-display-push {
210210
display: none;
211211
}
212212
}

‎docs/panels/index.html

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<script src="../../js/"></script>
1313
</head>
1414
<body>
15-
<div data-role="page">
15+
<div data-role="page" class="ui-responsive-panel">
1616

1717
<style>
1818
.panel-content { padding:15px; }
@@ -162,13 +162,15 @@ <h2>Panel animations</h2>
162162

163163
<h2>Panel + fixed positioning</h2>
164164

165-
<p>The panel will be displayed with the <code>position:fixed</code> CSS property so their contents will appear no matter how far down the page you're scrolled. The framework also checks to see if the panel contents will fit within the viewport before applying the fixed positioning because this property would prevent the panel contents from scrolling and using <code>overflow</code> is not well supported enough to use at this time. </p>
165+
<p>The panel will be displayed with the <code>position:fixed</code> CSS property so their contents will appear no matter how far down the page you're scrolled. The framework also checks to see if the panel contents will fit within the viewport before applying the fixed positioning because this property would prevent the panel contents from scrolling and using <code>overflow</code> is not well supported enough to use at this time.</p>
166166

167-
<p>If a browser doesn't support fixed positioning or if the panel contents are too long to fit within the viewport, the framework will simply display the panel without fixed positioning. If the user has scrolled down and opens a panel, they may need to scroll up to view the contents.</p>
167+
<p>If a browser doesn't support fixed positioning or if the panel contents are too long to fit within the viewport, the framework will simply display the panel without fixed positioning. If the user has scrolled down and opens a panel, they may need to scroll up to view the contents. </p>
168168

169169
<p>In general, we recommend that you place the buttons that open the panel at the very top of the screen which is the most common UI pattern for panels. This will avoid the need to scroll and also makes the transitions a bit smoother.</p>
170170

171171
<p>Making panels work with fixed toolbars is fairly complex, but the framework supports this combination. Just be aware that the animation performance will not quite a smooth as inline toolbars and that we must hide the fixed toolbar when the panel opens with the reveal or push display mode and you're scrolled down. We recommend using overlay style panels with fixed headers for best results.</p>
172+
173+
<p>Note that there are issues with fixed positioning within webviews within Android applications (not the browser) that can cause layout issues. We recommend that you turn off the fixed position panel option if deploying to an Android app.</p>
172174

173175
<h2>Styling panels</h2>
174176

@@ -181,6 +183,32 @@ <h2>Styling panels</h2>
181183

182184
<p>To add padding to a panel, we recommend adding a container inside the panel and applying styles to that to avoid any issues. All the examples on this page follow this pattern.</p>
183185

186+
<h2>Making the panel responsive</h2>
187+
188+
<p>When the push or reveal display is used, a panel pushes the page aside when it opens. Since some of the page is pushed offscreen, the panel is modal and must be closed to interact with the page content again. On larger screens, you may want to have the panel work more like a collapsible column that can be opened and used alongside the page to take better use of the screen real estate. </p>
189+
<p>To make the page work alongside the open panel, it needs to re-flow to a narrower width so it will fit next to the panel. This can be done purely with CSS by adding a left or right margin equal to the panel width (17em) to the page contents to force a re-flow. Second, the invisible layer placed over the page for the click out to dismiss behavior is hidden with CSS so you can click on the page and not close the menu. </p>
190+
<p>Here is an example of these rules wrapped in a media query to only apply this behavior above 35em (560px):</p>
191+
192+
<pre><code>
193+
/* wrap push on wide viewports once open */
194+
@media (min-width: 35em){
195+
.ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-push,
196+
.ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-reveal {
197+
margin-right: 17em;
198+
}
199+
.ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
200+
.ui-panel-content-wrap.ui-panel-content-wrap-open-complete.ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
201+
margin: 0 0 0 17em;
202+
}
203+
.ui-panel-dismiss-display-push {
204+
display: none;
205+
}
206+
}
207+
</code></pre>
208+
209+
<h4>Applying a preset breakpoint</h4>
210+
<p>Included in the widget styles is a breakpoint preset for this behavior that kicks in at 55em (880px). This breakpoint is not applied by default to make it easier for you to write custom breakpoints that work best for your content and design. To apply the breakpoint preset, add the <code>ui-responsive-panel</code> class to the <em>page wrapper</em> (not the panel).</p>
211+
184212

185213
<h2>Options</h2>
186214

0 commit comments

Comments
 (0)