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

Implemented filter docs for navigation items.

pull/441/head
Alper Ebicoglu 8 years ago
parent
28979e1d3c
commit
5252505840
8 changed files with 95 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
  2. 72
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js
  3. 23
      modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.css
  4. 2
      modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.min.css
  5. 19
      modules/docs/src/Volo.Docs.Web/Pages/Documents/_docs.scss
  6. 23
      modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.css
  7. 41
      modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.js
  8. 2
      modules/docs/src/Volo.Docs.Web/Pages/Documents/vs.min.css

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

@ -1,13 +1,5 @@
@page @page
@using System.Globalization
@using System.Net
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Http.Extensions
@using Microsoft.AspNetCore.Mvc.Rendering
@using Microsoft.Extensions.Options
@using Volo.Abp.AspNetCore.Mvc.UI.Theming @using Volo.Abp.AspNetCore.Mvc.UI.Theming
@using Volo.Docs.Areas.Documents.Helpers
@using Volo.Docs
@using Volo.Docs.Pages.Documents.Project @using Volo.Docs.Pages.Documents.Project
@inject IThemeManager ThemeManager @inject IThemeManager ThemeManager
@model IndexModel @model IndexModel
@ -38,6 +30,7 @@
<div class="row justify-content-end"> <div class="row justify-content-end">
<div class="col-md-3 docs-sidebar dark-sidebar"> <div class="col-md-3 docs-sidebar dark-sidebar">
<div class="docs-sidebar-wrapper"> <div class="docs-sidebar-wrapper">
<div class="docs-top"> <div class="docs-top">
<nav class="navbar navbar-logo"> <nav class="navbar navbar-logo">
@ -48,13 +41,11 @@
</strong> </strong>
</a> </a>
<a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site"> <a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site">
<i class="fa fa-chevron-left"></i> <i class="fa fa-chevron-left"></i>
Back to Website Back to Website
</a> </a>
<div class="for-mobile"> <div class="for-mobile">
<div class="navbar-light"> <div class="navbar-light">
<button type="button" class="open-dmenu navbar-toggler" aria-label="Close"> <button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
@ -63,17 +54,15 @@
</div> </div>
</div> </div>
</nav> </nav>
</div> </div>
<div class="docs-tree-list"> <div class="docs-tree-list">
<div class="docs-search"> <div class="docs-filter">
<form class="form-inline"> <input class="form-control" type="search" placeholder="Filter topics" aria-label="Filter">
<input class="form-control" type="search" placeholder="Filter Topics" aria-label="Search">
<button class="my-2 btn btn-search my-sm-0" type="submit">
<i class="fa fa-filter"></i>
</button>
</form>
<span class="my-2 filter-icon my-sm-0">
<i class="fa fa-filter"></i>
</span>
</div> </div>
@if (Model.Versions.Any()) @if (Model.Versions.Any())
@ -84,9 +73,8 @@
<div class="input-group-prepend"> <div class="input-group-prepend">
<label class="input-group-text">Version</label> <label class="input-group-text">Version</label>
</div> </div>
<select asp-items="Model.VersionSelectItems" class="form-control" onchange="window.location.replace(this.value)"></select> <select asp-items="Model.VersionSelectItems" class="form-control" onchange="window.location.replace(this.value)"></select>
</div> </div>
</div> </div>
</div> </div>
@ -99,12 +87,13 @@
id="sidebar-scroll" id="sidebar-scroll"
class="nav nav-list"></ul> class="nav nav-list"></ul>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-7 docs-content bg-white"> <div class="col-md-7 docs-content bg-white">
<div class="docs-link-btns"> <div class="docs-link-btns">
@if (!string.IsNullOrEmpty(Model.Document.EditLink)) @if (!string.IsNullOrEmpty(Model.Document.EditLink))
{ {
<a href="@Model.Document.EditLink" target="_blank"> <i class="fa fa-edit"></i> Edit @*TODO: localize*@</a> <a href="@Model.Document.EditLink" target="_blank"> <i class="fa fa-edit"></i> Edit @*TODO: localize*@</a>
@ -121,18 +110,23 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-2 docs-page-index position-relative bg-light"> <div class="col-md-2 docs-page-index position-relative bg-light">
<div class="docs-inner-anchors mt-2"> <div class="docs-inner-anchors mt-2">
<nav class="navbar p-0 pt-2" data-toggle="toc"> <nav class="navbar p-0 pt-2" data-toggle="toc">
<h5 class="inner-title">In this article</h5> <h5 class="inner-title">In this article</h5>
</nav> </nav>
<div class="row"> <div class="row">
<div class="col mt-4 p-0"> <div class="col mt-4 p-0">
<a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> Go to Top</a> <a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> Go to Top</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

72
modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js
View File

@ -1,38 +1,13 @@
(function ($) { (function ($) {
$(function () { $(function () {
$("#DocumentVersion").change(function () {
document.location.href = $(this).val();
});
/*<FILTERING DOCUMENT ITEMS (LEFT-SIDEBAR)>*/
var hideDocElement = function ($item) {
$item.addClass("doc-hidden");
};
var showDocElement = function ($item) { /*<FILTERING DOCUMENT ITEMS (LEFT-SIDEBAR)>*/
$item.removeClass("doc-hidden"); var navigationElementId = "sidebar-scroll";
}; var $navigation = $("#" + navigationElementId);
var showHideAllDocumentItems = function (isShown) {
if (isShown) {
showDocElement($("#bd-docs-nav .doc-hidden"));
} else {
hideDocElement($("#bd-docs-nav").children());
}
};
var showAllDocumentItems = function () {
showHideAllDocumentItems(true);
};
var hideAllDocumentItems = function () {
showHideAllDocumentItems(false);
};
var getShownDocumentLinks = function () { var getShownDocumentLinks = function () {
return $("#bd-docs-nav li > a:visible"); return $navigation.find(".mCSB_container > li a:visible").not(".tree-toggle");
}; };
var gotoFilteredDocumentIfThereIsOnlyOne = function () { var gotoFilteredDocumentIfThereIsOnlyOne = function () {
@ -42,23 +17,21 @@
} }
}; };
var filterDocumentItems = function(filterText) { var filterDocumentItems = function (filterText) {
var navigationElementId = "bd-docs-nav";
var $navigation = $("#" + navigationElementId); $navigation.find(".mCSB_container .opened").removeClass("opened");
$navigation.find(".mCSB_container > li, .mCSB_container > li ul").hide();
if (!filterText) {
$navigation.find("*").show(); if (!filterText) {
$navigation.find(".mCSB_container > li").show();
return; return;
} }
var filterTextUpper = filterText.toUpperCase(); var filteredItems = $navigation.find("li > a").filter(function () {
var parentTagsToShow = ["p", "h3"]; return $(this).text().toUpperCase().indexOf(filterText.toUpperCase()) > -1;
$navigation.find("*").hide(); });
$navigation.find("li > a").filter(function () {
return $(this).text().toUpperCase().indexOf(filterTextUpper) > -1;
}).each(function () {
filteredItems.each(function () {
var $el = $(this); var $el = $(this);
$el.show(); $el.show();
@ -71,10 +44,7 @@
} }
$parent.show(); $parent.show();
$parent.find("> li > label").not(".last-link").addClass("opened");
parentTagsToShow.forEach(function (parentTag) {
$parent.closest("ul").prevAll(parentTag + ":first").show();
});
$parent = $parent.parent(); $parent = $parent.parent();
hasParent = $parent.length > 0; hasParent = $parent.length > 0;
@ -82,20 +52,16 @@
}); });
}; };
$("#filterInput").keyup(function (e) { $(".docs-page .docs-filter input[type='search']").keyup(function (e) {
filterDocumentItems(e.target.value); filterDocumentItems(e.target.value);
if (e.key === "Enter") { if (e.key === "Enter") {
gotoFilteredDocumentIfThereIsOnlyOne(); gotoFilteredDocumentIfThereIsOnlyOne();
} }
}); });
//fix for after collapsing navigation menu height of nav stays 30px
$('#bd-docs-nav').on('hidden.bs.collapse', function () {
$("#bd-docs-nav").css("height", "");
});
/*</FILTERING DOCUMENT ITEMS (LEFT-SIDEBAR)>*/ /*</FILTERING DOCUMENT ITEMS (LEFT-SIDEBAR)>*/
}); });

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

@ -32,19 +32,22 @@
padding: .3em .5em .5em; } padding: .3em .5em .5em; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited {
box-shadow: none; } box-shadow: none; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-search { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter {
position: relative; position: relative;
padding: 0 1rem; padding: 0 1rem;
margin: .5rem 0; margin: .5rem 0;
font-size: .9em; } font-size: .9em; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-search .btn-search { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon {
position: absolute; position: absolute;
top: 0px; top: 0px;
padding: 8px 10px; padding: 8px 10px;
line-height: 1; line-height: 1;
left: 16px; left: 16px;
background: none; } background: none;
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-search .btn-search i.fa { padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
color: #ddd; } color: #ddd; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul {
display: block; display: block;
@ -82,7 +85,7 @@
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle .plus-icon { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle .plus-icon {
font-size: .85em; } font-size: .85em; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:not(.last-link).opened { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:not(.last-link).opened {
transform: rotate(180deg); transform: rotate(-90deg);
color: #000; } color: #000; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link {
top: 9px; top: 9px;
@ -233,13 +236,13 @@
background: #444; background: #444;
border-color: #444; border-color: #444;
color: #ddd; } color: #ddd; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-search .form-control { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .form-control {
background: #333; background: #333;
color: #999; } color: #999; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-search select { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter select {
border: 0; border: 0;
border-radius: 6px; } border-radius: 6px; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-search .btn-search i.fa { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
color: #aaa; } color: #aaa; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle {
color: #666; } color: #666; }
@ -308,10 +311,10 @@
z-index: 100; z-index: 100;
background: #f5f7f9; background: #f5f7f9;
display: none; } display: none; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-search { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter {
position: relative; position: relative;
padding: 0 0 1rem !important; } padding: 0 0 1rem !important; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-search .btn-search { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter .filter-icon {
left: 0px; } left: 0px; }
.docs-page .docs-sidebar .docs-top .navbar-logo { .docs-page .docs-sidebar .docs-top .navbar-logo {
padding: 0rem; padding: 0rem;

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

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

@ -51,19 +51,22 @@
} }
} }
.docs-search { .docs-filter {
position: relative; position: relative;
padding: 0 1rem; padding: 0 1rem;
margin: .5rem 0; margin: .5rem 0;
font-size: .9em; font-size: .9em;
.btn-search { .filter-icon {
position: absolute; position: absolute;
top: 0px; top: 0px;
padding: 8px 10px; padding: 8px 10px;
line-height: 1; line-height: 1;
left: 16px; left: 16px;
background: none; background: none;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
i.fa { i.fa {
color: #ddd; color: #ddd;
@ -118,7 +121,7 @@
} }
&:not(.last-link).opened { &:not(.last-link).opened {
transform: rotate(180deg); transform: rotate(-90deg);
color: #000; color: #000;
} }
@ -400,7 +403,7 @@
} }
} }
.docs-search { .docs-filter {
.form-control { .form-control {
background: #333; background: #333;
color: #999; color: #999;
@ -411,7 +414,7 @@
border-radius: 6px; border-radius: 6px;
} }
.btn-search { .filter-icon {
i.fa { i.fa {
color: #aaa; color: #aaa;
} }
@ -540,11 +543,11 @@
background: #f5f7f9; background: #f5f7f9;
display: none; display: none;
.docs-search { .docs-filter {
position: relative; position: relative;
padding: 0 0 1rem !important; padding: 0 0 1rem !important;
.btn-search { .filter-icon {
left: 0px; left: 0px;
} }
} }
@ -626,6 +629,7 @@ pre[class*="language-"] {
margin: 15px 0 25px !important; margin: 15px 0 25px !important;
border-radius: 6px; border-radius: 6px;
} }
code { code {
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
margin: 0; margin: 0;
@ -634,4 +638,3 @@ code {
border-radius: 3px; border-radius: 3px;
color: #28a745; color: #28a745;
} }

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

@ -32,19 +32,22 @@
padding: .3em .5em .5em; } padding: .3em .5em .5em; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited {
box-shadow: none; } box-shadow: none; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-search { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter {
position: relative; position: relative;
padding: 0 1rem; padding: 0 1rem;
margin: .5rem 0; margin: .5rem 0;
font-size: .9em; } font-size: .9em; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-search .btn-search { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon {
position: absolute; position: absolute;
top: 0px; top: 0px;
padding: 8px 10px; padding: 8px 10px;
line-height: 1; line-height: 1;
left: 16px; left: 16px;
background: none; } background: none;
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-search .btn-search i.fa { padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
color: #ddd; } color: #ddd; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul {
display: block; display: block;
@ -82,7 +85,7 @@
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle .plus-icon { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle .plus-icon {
font-size: .85em; } font-size: .85em; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:not(.last-link).opened { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle:not(.last-link).opened {
transform: rotate(180deg); transform: rotate(-90deg);
color: #000; } color: #000; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link {
top: 9px; top: 9px;
@ -233,13 +236,13 @@
background: #444; background: #444;
border-color: #444; border-color: #444;
color: #ddd; } color: #ddd; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-search .form-control { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .form-control {
background: #333; background: #333;
color: #999; } color: #999; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-search select { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter select {
border: 0; border: 0;
border-radius: 6px; } border-radius: 6px; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-search .btn-search i.fa { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa {
color: #aaa; } color: #aaa; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle {
color: #666; } color: #666; }
@ -308,10 +311,10 @@
z-index: 100; z-index: 100;
background: #f5f7f9; background: #f5f7f9;
display: none; } display: none; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-search { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter {
position: relative; position: relative;
padding: 0 0 1rem !important; } padding: 0 0 1rem !important; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-search .btn-search { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter .filter-icon {
left: 0px; } left: 0px; }
.docs-page .docs-sidebar .docs-top .navbar-logo { .docs-page .docs-sidebar .docs-top .navbar-logo {
padding: 0rem; padding: 0rem;

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

@ -25,27 +25,28 @@ $(document).ready(function () {
return false; return false;
}); });
}); });
$(function () { $(function () {
var navSelector = '#docs-sticky-index'; var navSelector = '#docs-sticky-index';
var $myNav = $(navSelector); var $myNav = $(navSelector);
Toc.init($myNav); Toc.init($myNav);
$('body').scrollspy({ $('body').scrollspy({
target: navSelector target: navSelector
});
});
$("#docs-sticky-index a").on('click', function (event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
window.location.hash = hash;
});
}
}); });
});
$("#docs-sticky-index a").on('click', function (event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
window.location.hash = hash;
});
}
});
$('.btn-toggle').on("click", function () { $('.btn-toggle').on("click", function () {
$(".toggle-row").slideToggle(400); $(".toggle-row").slideToggle(400);

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