mobile handling of the sidebar SPR-840

This commit is contained in:
Andreas Gohr 2017-02-22 14:58:43 +01:00
commit 4055de39fa
3 changed files with 66 additions and 19 deletions

View file

@ -8,7 +8,9 @@
@icon-size: @font-size-big;
@menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong
> * {
margin-left: @menu-margin; // moves *all* sidebar content to the right
}
// the toggle element
a.nav {
@ -98,6 +100,36 @@
}
}
/**
* Sidebar handling in mobile view
*/
@media @screen_max-md {
// hide on medium and smaller screens
#dokuwiki__aside {
display: none;
}
// show when toggled
#dokuwiki__aside.show {
display: block;
position: absolute;
left: 0;
z-index: 200; // above all
border-right: @ini_border 1px solid;
box-shadow: @box-shadow;;
max-width: 100%;
min-width: 45%;
height: 100%;
background-color: @ini_background;
}
}
// FIXME check if the stuff below is still relevant
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
@ -125,6 +157,8 @@
}
}
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */

View file

@ -150,11 +150,22 @@ jQuery(function () {
};
/**
* Open and close the sidebar in mobile view
*/
const initMobileToggling = function () {
jQuery('.menu-togglelink').find('a').click(function (e) {
e.preventDefault();
jQuery('#dokuwiki__aside').toggleClass('show');
});
};
// main
initContentNav();
initSidebarToggling();
initMenuHandling();
initContentMinHeight();
initSearchToggling();
initMobileToggling();
});

View file

@ -50,6 +50,7 @@
<?php if($conf['breadcrumbs']): ?>
<nav class="nav-trace">
<a class="nav" role="heading" aria-level="2">
<span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
<span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
@ -68,4 +69,5 @@
?>
</ul>
</div>
</nav>
<?php endif ?>