docs sidebar nav

pull/509/head
Armağan Ünlü 7 years ago
parent 8ccf85e2f3
commit a777207e1b

@ -9,12 +9,15 @@ namespace Volo.Docs.Areas.Documents.Helpers.TagHelpers
[HtmlTargetElement("ul", Attributes = "root-node")]
public class TreeTagHelper : TagHelper
{
private const string LiItemTemplate = @"<li class='{6}'>
<a href='{0}' class='{5} {3}'>
<span class='plus-icon'><i class='fa fa-{4}'></i></span>{1}
</a>
{2}
private const string LiItemTemplateWithLink = @"<li class='{0}'>
<span class='plus-icon'><i class='fa fa-{1}'></i></span>
{2}
{3}
</li>";
private const string ListItemAnchor = @"<a href='{0}' class='{1}'>{2}</a>";
private const string ListItemSpan = @"<span class='{0}'>{1}</span>";
private const string UlItemTemplate = @"<ul class='nav nav-list tree' style='{1}'>
{0}
@ -95,23 +98,60 @@ namespace Volo.Docs.Areas.Documents.Helpers.TagHelpers
var anchorCss = node.Path.IsNullOrEmpty() ? "tree-toggle" : "";
var isNodeSelected = node.IsSelected(SelectedDocumentName);
//if (isNodeSelected)
//{
// anchorCss += " opened";
//}
var normalizedPath = node.Path != null && node.Path.EndsWith("." + ProjectFormat)
? node.Path.Left(node.Path.Length - ProjectFormat.Length - 1)
: node.Path;
return string.Format(LiItemTemplate,
node.Path.IsNullOrEmpty() ? "javascript:;" : "/documents/" + ProjectName + "/" + Version + "/" + normalizedPath,
node.Text.IsNullOrEmpty() ? "?" : node.Text,
content,
node.HasChildItems ? "nav-header" : "last-link",
node.HasChildItems ? "chevron-right" : "long-arrow-right",
anchorCss,
isNodeSelected ? "selected-tree" : "");
if (node.Path.IsNullOrEmpty() && !node.HasChildItems)
{
//span
var span = string.Format(ListItemSpan, anchorCss, node.Text.IsNullOrEmpty() ? "?" : node.Text);
var listItemCss = node.HasChildItems ? "nav-header" : "last-link";
if (isNodeSelected)
{
listItemCss += " selected-tree";
}
return string.Format(LiItemTemplateWithLink,
listItemCss,
node.HasChildItems ? "chevron-right" : "long-arrow-right",
span,
content);
}
else if (node.Path.IsNullOrEmpty() && node.HasChildItems)
{
//anchor
var path = "javascript:;";
var anchor = string.Format(ListItemAnchor, path, anchorCss, node.Text.IsNullOrEmpty() ? "?" : node.Text);
var listItemCss = node.HasChildItems ? "nav-header" : "last-link";
if (isNodeSelected)
{
listItemCss += " selected-tree";
}
return string.Format(LiItemTemplateWithLink,
listItemCss,
node.HasChildItems ? "chevron-right" : "long-arrow-right",
anchor,
content);
}
else
{
//anchor
var path = "/documents/" + ProjectName + "/" + Version + "/" + normalizedPath;
var anchor = string.Format(ListItemAnchor, path, anchorCss, node.Text.IsNullOrEmpty() ? "?" : node.Text);
var listItemCss = node.HasChildItems ? "nav-header" : "last-link";
if (isNodeSelected)
{
listItemCss += " selected-tree";
}
return string.Format(LiItemTemplateWithLink,
listItemCss,
node.HasChildItems ? "chevron-right" : "long-arrow-right",
anchor,
content);
}
}
}

@ -153,7 +153,7 @@
{
<div class="col-md-9 p-5 bg-white">
<p>@L["DocumentNotFound"]</p>
<a href="#">Go to home</a> /*Localize*/
<a href="#">Go to home</a>
</div>
}

@ -34,7 +34,6 @@
padding: 0 1rem;
margin: .5rem 0 1rem; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select {
padding: 1px;
border-radius: 8px; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text {
border: 0; }
@ -87,24 +86,29 @@
border-bottom: 1px solid #eeeff3; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover {
color: #000; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon {
font-size: .85em;
transition: .3s;
width: 18px;
height: 18px;
text-align: center;
padding: 0;
line-height: 1;
border-radius: 50%;
margin-right: 4px;
position: absolute;
left: 2px;
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link {
top: 11px;
color: #aaa;
cursor: pointer; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
top: 11px;
color: #aaa; }
color: #aaa; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
color: #999;
padding: 7px 0;
display: block;
border-bottom: 1px solid #eeeff3; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon {
font-size: .85em;
transition: .3s;
width: 18px;
height: 18px;
text-align: center;
padding: 0;
line-height: 1;
border-radius: 50%;
margin-right: 4px;
position: absolute;
left: 2px;
top: 11px;
color: #aaa;
cursor: pointer; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul {
padding: 0; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a {
@ -116,11 +120,11 @@
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
color: #000;
transition: .4s; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa {
color: #000; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa {
transform: rotate(90deg);
color: #000; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > span .fa {
transform: rotate(90deg);
color: #007bff; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
transform: rotate(0deg); }
.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
font-size: 1.5rem;
color: #000;
@ -280,6 +284,11 @@
cursor: pointer; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
top: 11px; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
color: #555;
padding: 7px 0;
display: block;
border-bottom: 1px solid #333; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
color: #fff;
transition: .4s; }

File diff suppressed because one or more lines are too long

@ -48,7 +48,6 @@ body {
margin: .5rem 0 1rem;
.version-select {
padding: 1px;
border-radius: 8px;
.input-group-text {
@ -129,29 +128,35 @@ body {
color: #000;
}
.plus-icon {
font-size: .85em;
transition: .3s;
width: 18px;
height: 18px;
text-align: center;
padding: 0;
line-height: 1;
border-radius: 50%;
margin-right: 4px;
position: absolute;
left: 2px;
&.last-link {
top: 11px;
color: #aaa;
cursor: pointer;
&.last-link {
top: 11px;
color: #aaa;
}
}
}
span.tree-toggle {
color: #999;
padding: 7px 0;
display: block;
border-bottom: 1px solid #eeeff3;
}
.plus-icon {
font-size: .85em;
transition: .3s;
width: 18px;
height: 18px;
text-align: center;
padding: 0;
line-height: 1;
border-radius: 50%;
margin-right: 4px;
position: absolute;
left: 2px;
top: 11px;
color: #aaa;
cursor: pointer;
}
ul {
padding: 0;
@ -178,15 +183,19 @@ body {
> a {
color: #000;
transition: .4s;
}
span {
.fa {
color: #000;
}
> span {
.fa {
transform: rotate(90deg);
color: #007bff;
}
}
&:not(.last-link) .fa {
transform: rotate(90deg);
color: #000;
&.last-link {
> span {
.fa {
transform: rotate(0deg);
}
}
}
@ -443,7 +452,7 @@ body {
a {
color: #aaa;
color: #aaa;
border-bottom: 1px solid #333;
&:hover {
@ -467,12 +476,19 @@ body {
cursor: pointer;
&.last-link {
top: 11px;
top: 11px;
}
}
}
span.tree-toggle {
color: #555;
padding: 7px 0;
display: block;
border-bottom: 1px solid #333;
}
&.selected-tree {
> a {
@ -642,8 +658,7 @@ body {
}
}
}
.for-mobile {
display: none;
@ -652,10 +667,7 @@ body {
.for-desktop {
display: inline-block;
}
pre[class*="language-"] {
padding: 1.4em 2em !important;
margin: 15px 0 25px !important;

@ -34,7 +34,6 @@
padding: 0 1rem;
margin: .5rem 0 1rem; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select {
padding: 1px;
border-radius: 8px; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text {
border: 0; }
@ -87,24 +86,29 @@
border-bottom: 1px solid #eeeff3; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover {
color: #000; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon {
font-size: .85em;
transition: .3s;
width: 18px;
height: 18px;
text-align: center;
padding: 0;
line-height: 1;
border-radius: 50%;
margin-right: 4px;
position: absolute;
left: 2px;
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link {
top: 11px;
color: #aaa;
cursor: pointer; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
top: 11px;
color: #aaa; }
color: #aaa; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
color: #999;
padding: 7px 0;
display: block;
border-bottom: 1px solid #eeeff3; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon {
font-size: .85em;
transition: .3s;
width: 18px;
height: 18px;
text-align: center;
padding: 0;
line-height: 1;
border-radius: 50%;
margin-right: 4px;
position: absolute;
left: 2px;
top: 11px;
color: #aaa;
cursor: pointer; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul {
padding: 0; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a {
@ -116,11 +120,11 @@
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
color: #000;
transition: .4s; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa {
color: #000; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa {
transform: rotate(90deg);
color: #000; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > span .fa {
transform: rotate(90deg);
color: #007bff; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa {
transform: rotate(0deg); }
.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand {
font-size: 1.5rem;
color: #000;
@ -280,6 +284,11 @@
cursor: pointer; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link {
top: 11px; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle {
color: #555;
padding: 7px 0;
display: block;
border-bottom: 1px solid #333; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a {
color: #fff;
transition: .4s; }

@ -1,4 +1,8 @@
$('.tree-toggle:not(.last-link)').click(function () {
$('li:not(.last-link) a.tree-toggle').click(function () {
$(this).parent().children('ul.tree').toggle(100);
$(this).closest("li").toggleClass("selected-tree");
});
$('li:not(.last-link) span.plus-icon').click(function () {
$(this).parent().children('ul.tree').toggle(100);
$(this).closest("li").toggleClass("selected-tree");
});

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save