EH22/dokuwiki-template-sprintdoc-modified
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

finally align the menu items correctly

Browse source 
I had to wrap the labels in their own span and use flex box to make them
behave correctly. Simplifications welcome.
This commit is contained in:
Andreas Gohr 2017-02-16 16:58:36 +01:00
commit fa1028ad60
3 changed files with 27 additions and 16 deletions

26
css/area_main-sidebar-nav.less
View file

@ -13,23 +13,31 @@
// the toggle element
h6 {
cursor: pointer;
height: @line-height-big;
line-height: @line-height-big;
font-weight: normal;
margin-left: (@menu-margin * -1); // moves the toggles back to the left
color: @color-nav;
border: 1px solid transparent;
border-radius: @fix_border-radius;
// margin-bottom: -.3rem; FIXME
// padding: .7em 0 .7em (@margin-big + 1); FIXME WTF?
transition: @transition color, @transition background-color, @transition border-color;
height: @icon-size + @margin-small;
display: flex;
flex-direction: row;
align-items: center;
span {
display: inline-block;
vertical-align: middle;
}
span.lbl {
flex-grow: 1;
}
span.ico {
width: @menu-margin;
height: @line-height-big;
height: @icon-size;
flex-grow: 0;
border-right: 1px solid @color-border;
text-align: center;
margin-right: @margin-small;
@ -70,12 +78,12 @@
color: @button_background;
text-decoration: none;
span strong {
span.ico strong {
color: @button_background;
border-color: @button_background;
}
span svg path {
span.ico svg path {
fill: @button_background;
}
}

3
js/sidebar.js
View file

@ -65,7 +65,7 @@ jQuery(function () {
// prepare text and the optional icon
const data = $me.text().split('@', 2);
const text = data[0].trim();
const $icon = jQuery('<span>')
const $icon = jQuery('<span class="ico">')
.text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
.wrapInner('<strong>');
if (data[1]) {
@ -78,6 +78,7 @@ jQuery(function () {
.attr('role', 'heading')
.attr('aria-level', '2')
.text(text)
.wrapInner('<span class="lbl">')
.prepend($icon)
;

14
tpl/main-sidebar-nav.php
View file

@ -7,8 +7,8 @@
<nav class="nav-sitetools">
<h6 role="heading" aria-level="2">
<span><?php echo inlineSVG(__DIR__ . '/../img/sitemap.svg')?></span>
<?php echo $lang['site_tools']; ?>
<span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/sitemap.svg') ?></span>
<span class="lbl"><?php echo $lang['site_tools']; ?></span>
</h6>
<div class="nav-panel level1">
<ul>
@ -29,8 +29,9 @@
<nav class="nav-usermenu">
<h6 role="heading" aria-level="2">
<span><?php echo inlineSVG(__DIR__ . '/../img/account-settings.svg')?></span>
<?php echo $lang['user_tools']; ?></h6>
<span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/account-settings.svg') ?></span>
<span class="lbl"><?php echo $lang['user_tools']; ?></span>
</h6>
<div class="nav-panel level1">
<ul>
<?php /* dokuwiki user tools */
@ -51,8 +52,9 @@
<?php if($conf['breadcrumbs']): ?>
<nav class="nav-trace">
<h6 role="heading" aria-level="2">
<span><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg')?></span>
<?php echo tpl_getLang('head_menu_trace'); ?></h6>
<span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
<span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
</h6>
<div class="nav-panel level1">
<ul>
<?php /* trace breadcrumbs as list */