Add an arrow to open sub-trees, fixes #277

This commit is contained in:
Stéphane Goetz 2016-04-02 13:39:04 +02:00
parent 2b3893a768
commit 2bd1978f0e
7 changed files with 61 additions and 20 deletions

View File

@ -78,10 +78,13 @@ class Template
$nav = ""; $nav = "";
foreach ($entries as $entry) { foreach ($entries as $entry) {
if (array_key_exists('children', $entry)) { if (array_key_exists('children', $entry)) {
$icon = '<i class="arrow">&nbsp;</i>';
if (array_key_exists('href', $entry)) { if (array_key_exists('href', $entry)) {
$link = '<a href="' . $entry['href'] . '" class="folder">' . $entry['title'] . '</a>'; $link = '<a href="' . $entry['href'] . '" class="folder">' . $icon . $entry['title'] . '</a>';
} else { } else {
$link = '<a href="#" class="aj-nav folder">' . $entry['title'] . '</a>'; $link = '<a href="#" class="aj-nav folder">' . $icon . $entry['title'] . '</a>';
} }
$link .= $this->renderNavigation($entry['children']); $link .= $this->renderNavigation($entry['children']);
@ -110,7 +113,7 @@ class Template
$nav[] = [ $nav[] = [
'title' => $node->getTitle(), 'title' => $node->getTitle(),
'href' => $base_page . $link, 'href' => $base_page . $link,
'class' => ($current_url === $link) ? 'active' : '' 'class' => $current_url === $link ? 'active' : '',
]; ];
} elseif ($node instanceof Directory) { } elseif ($node instanceof Directory) {
if (!$node->hasContent()) { if (!$node->hasContent()) {
@ -121,7 +124,7 @@ class Template
$folder = [ $folder = [
'title' => $node->getTitle(), 'title' => $node->getTitle(),
'class' => (strpos($current_url, $link) === 0) ? 'open' : '', 'class' => strpos($current_url, $link) === 0 ? 'open' : '',
]; ];
if ($mode === Daux::STATIC_MODE) { if ($mode === Daux::STATIC_MODE) {
@ -136,6 +139,10 @@ class Template
$new_path = ($path === '') ? $url : $path . '/' . $url; $new_path = ($path === '') ? $url : $path . '/' . $url;
$folder['children'] = $this->buildNavigation($node, $new_path, $current_url, $base_page, $mode); $folder['children'] = $this->buildNavigation($node, $new_path, $current_url, $base_page, $mode);
if (!empty($folder['children'])) {
$folder['class'] .= ' has-children';
}
$nav[] = $folder; $nav[] = $folder;
} }
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -98,6 +98,12 @@ $(function () {
$(this).next().slideToggle(); $(this).next().slideToggle();
}); });
// New Tree navigation
$("ul.nav.nav-list > li.has-children > a > .arrow").click(function() {
$(this).parent().parent().toggleClass('open');
return false;
});
// Responsive navigation // Responsive navigation
$('#menu-spinner-button').click(function () { $('#menu-spinner-button').click(function () {
$('#sub-nav-collapse').slideToggle(); $('#sub-nav-collapse').slideToggle();

View File

@ -70,19 +70,44 @@ code {
//Sidebar Nav List //Sidebar Nav List
.nav.nav-list { .nav.nav-list {
padding-left: 0px; padding-left: 0;
padding-right: 0px; padding-right: 0;
li { li {
a { a {
margin: 0px; margin: 0;
padding: 6px 15px; padding: 6px 15px 6px 20px;
.roboto-slab.regular; .roboto-slab.regular;
color: @dark; color: @dark;
font-size: 15px; font-size: 15px;
text-shadow: none; text-shadow: none;
border-color: @lines; border-color: @lines;
.arrow {
display: inline-block;
position: relative;
width: 16px;
margin-left: -16px;
&:before {
position:absolute;
display:block;
content:"";
margin:-.25em 0 0 -.4em;
left:50%;
top: 50%;
width: 0.5em;
height: 0.5em;
border-right: 0.15em solid @dark;
border-top: 0.15em solid @dark;
transform: rotate(45deg);
transition-duration:.3s;
}
}
&:hover { &:hover {
color: @dark; color: @dark;
text-shadow: none; text-shadow: none;
@ -100,11 +125,16 @@ code {
> ul { > ul {
display: block; display: block;
} }
> a {
&, &:focus, &:hover {
background-color:transparent;
} }
&:last-child { > .arrow:before {
&.open { margin-left:-.25em;
//border-bottom: none; transform: rotate(135deg);
}
} }
} }
@ -128,14 +158,12 @@ code {
} }
} }
&.active { &.active a {
a {
color: @dark; color: @dark;
} }
} }
} }
} }
}
} }
.page-header { .page-header {