mobile handling of the sidebar SPR-840
This commit is contained in:
parent
52983d2382
commit
4055de39fa
3 changed files with 66 additions and 19 deletions
|
@ -8,7 +8,9 @@
|
||||||
@icon-size: @font-size-big;
|
@icon-size: @font-size-big;
|
||||||
@menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong
|
@menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong
|
||||||
|
|
||||||
margin-left: @menu-margin; // moves *all* sidebar content to the right
|
> * {
|
||||||
|
margin-left: @menu-margin; // moves *all* sidebar content to the right
|
||||||
|
}
|
||||||
|
|
||||||
// the toggle element
|
// the toggle element
|
||||||
a.nav {
|
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
|
// FIXME check if the stuff below is still relevant
|
||||||
|
|
||||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||||
|
@ -125,6 +157,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||||
|
|
|
@ -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
|
// main
|
||||||
initContentNav();
|
initContentNav();
|
||||||
initSidebarToggling();
|
initSidebarToggling();
|
||||||
initMenuHandling();
|
initMenuHandling();
|
||||||
initContentMinHeight();
|
initContentMinHeight();
|
||||||
initSearchToggling();
|
initSearchToggling();
|
||||||
|
initMobileToggling();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -50,22 +50,24 @@
|
||||||
|
|
||||||
|
|
||||||
<?php if($conf['breadcrumbs']): ?>
|
<?php if($conf['breadcrumbs']): ?>
|
||||||
<a class="nav" role="heading" aria-level="2">
|
<nav class="nav-trace">
|
||||||
<span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
|
<a class="nav" role="heading" aria-level="2">
|
||||||
<span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
|
<span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
|
||||||
</a>
|
<span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
|
||||||
<div class="nav-panel level1">
|
</a>
|
||||||
<ul>
|
<div class="nav-panel level1">
|
||||||
<?php /* trace breadcrumbs as list */
|
<ul>
|
||||||
// FIXME move to helper class
|
<?php /* trace breadcrumbs as list */
|
||||||
$crumbs = breadcrumbs();
|
// FIXME move to helper class
|
||||||
$crumbs = array_reverse($crumbs, true);
|
$crumbs = breadcrumbs();
|
||||||
foreach($crumbs as $id => $name) {
|
$crumbs = array_reverse($crumbs, true);
|
||||||
echo '<li>';
|
foreach($crumbs as $id => $name) {
|
||||||
tpl_link(wl($id), hsc($name), 'title="' . $id . '"');
|
echo '<li>';
|
||||||
echo '</li>';
|
tpl_link(wl($id), hsc($name), 'title="' . $id . '"');
|
||||||
}
|
echo '</li>';
|
||||||
?>
|
}
|
||||||
</ul>
|
?>
|
||||||
</div>
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue