Merge remote-tracking branch 'origin/mobilesidebar'
This commit is contained in:
commit
75a1a114df
7 changed files with 122 additions and 25 deletions
|
@ -3,3 +3,45 @@
|
||||||
*
|
*
|
||||||
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
||||||
*/
|
*/
|
||||||
|
#dokuwiki__header {
|
||||||
|
|
||||||
|
.menu-togglelink {
|
||||||
|
border: 1px solid @color-border;
|
||||||
|
border-radius: @border-radius;
|
||||||
|
text-align: center;
|
||||||
|
margin: @very-small-spacing -(@very-small-spacing) 0 0;
|
||||||
|
|
||||||
|
font-size: @font-size-small;
|
||||||
|
min-height: 2em;
|
||||||
|
min-width: 2em;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 2em;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: @transition color, @transition background-color, @transition border-color;
|
||||||
|
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: @font-size-default + (@font-scale-factor * 4);
|
||||||
|
width: @font-size-default + (@font-scale-factor * 4);
|
||||||
|
vertical-align: middle;
|
||||||
|
path {
|
||||||
|
fill: @color-nav
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background-color: @button_color;
|
||||||
|
border-color: @button_background;
|
||||||
|
svg path {
|
||||||
|
fill: @button_background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
@ -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 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||||
|
|
|
@ -153,6 +153,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.showSidebar {
|
.showSidebar {
|
||||||
|
|
1
img/menu.svg
Normal file
1
img/menu.svg
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
|
After (image error) Size: 143 B |
|
@ -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();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,14 @@
|
||||||
<?php
|
<?php
|
||||||
if(!defined('DOKU_INC')) die();
|
if(!defined('DOKU_INC')) die();
|
||||||
|
|
||||||
echo '<div class="menu-togglelink mobile-only"><a href=\'#\'>MOB</a></div>';
|
echo '<div class="menu-togglelink mobile-only">';
|
||||||
|
echo '<a href="#">';
|
||||||
|
echo inlineSVG(__DIR__ . '/../img/menu.svg');
|
||||||
|
echo '<span class="sr-out">'.tpl_getLang('a11y_sidebartoggle').'</span>';
|
||||||
|
echo '</a>';
|
||||||
|
echo '</div>';
|
||||||
|
|
||||||
echo '<div class="logo">';
|
echo '<div class="logo">';
|
||||||
|
|
||||||
\dokuwiki\template\sprintdoc\Template::getInstance()->mainLogo();
|
\dokuwiki\template\sprintdoc\Template::getInstance()->mainLogo();
|
||||||
|
echo '<hr class="structure" />';
|
||||||
echo "<hr class=\"structure\" /></div>";
|
echo '</div>';
|
||||||
|
|
|
@ -50,6 +50,7 @@
|
||||||
|
|
||||||
|
|
||||||
<?php if($conf['breadcrumbs']): ?>
|
<?php if($conf['breadcrumbs']): ?>
|
||||||
|
<nav class="nav-trace">
|
||||||
<a class="nav" role="heading" aria-level="2">
|
<a class="nav" role="heading" aria-level="2">
|
||||||
<span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
|
<span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
|
||||||
<span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
|
<span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
|
||||||
|
@ -68,4 +69,5 @@
|
||||||
?>
|
?>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue