tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

docs sidebar nav

pull/509/head
Armağan Ünlü 8 years ago
parent
8ccf85e2f3
commit
a777207e1b
8 changed files with 177 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 76
      modules/docs/src/Volo.Docs.Web/Areas/Documents/Helpers/TagHelpers/TreeTagHelper.cs
  2. 2
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
  3. 55
      modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.css
  4. 2
      modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.min.css
  5. 82
      modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.scss
  6. 55
      modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.css
  7. 6
      modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.js
  8. 2
      modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.min.css

76
modules/docs/src/Volo.Docs.Web/Areas/Documents/Helpers/TagHelpers/TreeTagHelper.cs
View File

@ -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);
}
}
}

2
modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
View File

@ -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>
}

55
modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.css
View File

@ -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; }

2
modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.min.css
View File

File diff suppressed because one or more lines are too long

82
modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.scss
View File

@ -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;

55
modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.css
View File

@ -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; }

6
modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.js
View File

@ -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");
});

2
modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.min.css
View File

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