Bug in documentation example "Making the panel responsive"

[SeanBannister]

In the documentation for panels http://view.jquerymobile.com/master/demos/widgets/panels/ there's a section titled "Making the panel responsive" which contains some example code, it appears since that example was written that the ui-responsive-panel class is no longer used and the class ui-panel-dismiss-display-push wasn't active in my code either so I replaced it with ui-panel-dismiss-display-reveal

The updated code:

@media (min-width:35em){
  /* wrap on wide viewports once open */
  .ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
  .ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
  .ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
  .ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
      margin-right: 17em;
  }
  .ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
  .ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
  .ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
  .ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
      margin-left: 17em;
  }
  .ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
  .ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
      width: auto;
  }

  /* disable "dismiss" on wide viewports for "push" panels */
  .ui-panel-dismiss-display-reveal {
      display: none;
  }
}

[jaspermdegroot]

@SeanBannister

You are right. You can add class ui-responsive-panel to the page to apply the framework presets (see the next paragraph). If you add the rules from the CSS example to your custom CSS using the ui-responsive-panel is not needed. I will remove it from the example.

Re: disabling dismiss at wider screens. In our example we show how it's done for panels with display mode "push". If you don't use those, but panels with display mode "reveal" you can indeed use class ui-panel-dismiss-display-reveal. I will add another example, so we have one example that shows how you can disable it for all modes and one how to do this for a specific mode.

Thanks!

[SeanBannister]

I noticed that paragraph after I posted but then I thought there still was a bug in the CSS there in the example and the code at https://github.com/jquery/jquery-mobile/blob/master/css/structure/jquery.mobile.panel.css#L232 on line 232.

I know you mentioned this above but shouldn't it also apply to panels that "reveal", there was also mention of this at #5889 . After all the rest of the code in that example and the code in jquery.mobile.panel.css also applies to reveal. The code that would fix this :

  .ui-responsive-panel .ui-panel-dismiss-display-push,
  .ui-responsive-panel .ui-panel-dismiss-display-reveal {
    display: none;
  } 

[jaspermdegroot]

@SeanBannister

To do this only for "push" mode is intentional. The "overlay" and "reveal" panels are on top / underneath the page and are similar to a popup, from a UI perspective. A "push" panel is at the same level as the page, which makes them a bit different. That's why we choose to only allow interactions with the page for the "push" mode in the preset.

[SeanBannister]

I totally understand for the overlay but the for the reveal I still think it makes sense where you want the animation and look but want it to continue to display. I'll add it to my custom code.