Merge pull request #3380 from fabrixxm/feature/frio/fixedaside2
Frio: better UX for aside bar
This commit is contained in:
commit
4a47361116
4 changed files with 78 additions and 0 deletions
|
@ -315,6 +315,44 @@ $(document).ready(function(){
|
|||
$(document).on('change', 'textarea', function(event) {
|
||||
autosize.update(event.target);
|
||||
});
|
||||
|
||||
/*
|
||||
* Sticky aside on page scroll
|
||||
* We enable the sticky aside only when window is wider than
|
||||
* 976px - which is the maximum width where the aside is shown in
|
||||
* mobile style - because on chrome-based browsers (desktop and
|
||||
* android) the sticky plugin in mobile style causes the browser to
|
||||
* scroll back to top the main content, making it impossible
|
||||
* to navigate.
|
||||
* A side effect is that the sitky aside isn't really responsive,
|
||||
* since is enabled or not at page loading time.
|
||||
*/
|
||||
if ($(window).width() > 976) {
|
||||
$("aside").stick_in_parent({
|
||||
offset_top: 100, // px, header + tab bar + spacing
|
||||
recalc_every: 10
|
||||
});
|
||||
// recalculate sticky aside on clicks on <a> elements
|
||||
// this handle height changes on expanding submenus
|
||||
$("aside").on("click", "a", function(){
|
||||
$(document.body).trigger("sticky_kit:recalc");
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Add or remove "aside-out" class to body tag
|
||||
* when the mobile aside is shown or hidden.
|
||||
* The class is used in css to disable scroll in page when the aside
|
||||
* is shown.
|
||||
*/
|
||||
$("aside")
|
||||
.on("shown.bs.offcanvas", function() {
|
||||
$("body").addClass("aside-out");
|
||||
})
|
||||
.on("hidden.bs.offcanvas", function() {
|
||||
$("body").removeClass("aside-out");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function openClose(theID) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue