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
Download patch file Download diff file Expand all files Collapse all files

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

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

3
js/sidebar.js
View file

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

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

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