Include bootstrap breakpoints for "distanceX"

[lbarker]

It would be awesome to have the ability to define multiple "distanceX" for one scotch panel at the different breakpoints in Bootstrap (xs, sm, md, lg). At smaller screens, an offcanvas navigations needs to be wider than a larger screen.

For example:

$(function() {
$('.scotch-panel').scotchPanel({
containerSelector: '#super-container',
enableEscapeKey: true, // Allow the user to quickly shut this down if unwelcomed
distanceXS: '80%', // phones ,  .visible-xs
distanceSM: '70%', // tablets.  .visible-sm
distanceMD: '50%', // desktop, .visible-md
distanceLG: '30%' //  large, visible-lg
});
});

[whatnickcodes]

I definitely agree. I definitely want to do that down the road. In the meantime, you could just override it with CSS. Here's an example for the panel "#main-nav" that comes from the left:

@media only screen and (max-width : 480px) {
#main-nav {
width: 240px !important;
left: -240px !important;
}
.scotch-panel-canvas.scotch-is-showing {
-o-transform: translate3d(240px, 0px, 0px) !important;
-ms-transform: translate3d(240px, 0px, 0px) !important;
-moz-transform: translate3d(240px, 0px, 0px) !important;
-webkit-transform: translate3d(240px, 0px, 0px) !important;
transform: translate3d(240px, 0px, 0px) !important;
}
}

[lbarker]

Thanks!

[kjprince]

That worked for me as well. Thanks!