Browse Source

Implemented filter docs for navigation items.

pull/441/head
Alper Ebicoglu 8 years ago
parent
commit
5252505840
  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

@ -1,13 +1,5 @@
@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.Docs.Areas.Documents.Helpers
@using Volo.Docs
@using Volo.Docs.Pages.Documents.Project
@inject IThemeManager ThemeManager
@model IndexModel
@ -38,6 +30,7 @@
<div class="row justify-content-end">
<div class="col-md-3 docs-sidebar dark-sidebar">
<div class="docs-sidebar-wrapper">
<div class="docs-top">
<nav class="navbar navbar-logo">
@ -48,13 +41,11 @@
</strong>
</a>
<a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site">
<i class="fa fa-chevron-left"></i>
Back to Website
</a>
<div class="for-mobile">
<div class="navbar-light">
<button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
@ -63,17 +54,15 @@
</div>
</div>
</nav>
</div>
<div class="docs-tree-list">
<div class="docs-search">
<form class="form-inline">
<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>
<div class="docs-filter">
<input class="form-control" type="search" placeholder="Filter topics" aria-label="Filter">
<span class="my-2 filter-icon my-sm-0">
<i class="fa fa-filter"></i>
</span>
</div>
@if (Model.Versions.Any())
@ -84,9 +73,8 @@
<div class="input-group-prepend">
<label class="input-group-text">Version</label>
</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>
@ -99,12 +87,13 @@
id="sidebar-scroll"
class="nav nav-list"></ul>
</div>
</div>
</div>
<div class="col-md-7 docs-content bg-white">
<div class="docs-link-btns">
@if (!string.IsNullOrEmpty(Model.Document.EditLink))
{
<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 class="col-md-2 docs-page-index position-relative bg-light">
<div class="docs-inner-anchors mt-2">
<nav class="navbar p-0 pt-2" data-toggle="toc">
<h5 class="inner-title">In this article</h5>
</nav>
<div class="row">
<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>
</div>
</div>
</div>
</div>
</div>
</div>

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

@ -1,38 +1,13 @@
(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) {
$item.removeClass("doc-hidden");
};
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);
};
/*<FILTERING DOCUMENT ITEMS (LEFT-SIDEBAR)>*/
var navigationElementId = "sidebar-scroll";
var $navigation = $("#" + navigationElementId);
var getShownDocumentLinks = function () {
return $("#bd-docs-nav li > a:visible");
return $navigation.find(".mCSB_container > li a:visible").not(".tree-toggle");
};
var gotoFilteredDocumentIfThereIsOnlyOne = function () {
@ -42,23 +17,21 @@
}
};
var filterDocumentItems = function(filterText) {
var navigationElementId = "bd-docs-nav";
var $navigation = $("#" + navigationElementId);
if (!filterText) {
$navigation.find("*").show();
var filterDocumentItems = function (filterText) {
$navigation.find(".mCSB_container .opened").removeClass("opened");
$navigation.find(".mCSB_container > li, .mCSB_container > li ul").hide();
if (!filterText) {
$navigation.find(".mCSB_container > li").show();
return;
}
var filterTextUpper = filterText.toUpperCase();
var parentTagsToShow = ["p", "h3"];
$navigation.find("*").hide();
$navigation.find("li > a").filter(function () {
return $(this).text().toUpperCase().indexOf(filterTextUpper) > -1;
}).each(function () {
var filteredItems = $navigation.find("li > a").filter(function () {
return $(this).text().toUpperCase().indexOf(filterText.toUpperCase()) > -1;
});
filteredItems.each(function () {
var $el = $(this);
$el.show();
@ -71,10 +44,7 @@
}
$parent.show();
parentTagsToShow.forEach(function (parentTag) {
$parent.closest("ul").prevAll(parentTag + ":first").show();
});
$parent.find("> li > label").not(".last-link").addClass("opened");
$parent = $parent.parent();
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);
if (e.key === "Enter") {
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)>*/
});

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

@ -32,19 +32,22 @@
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 {
box-shadow: none; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-search {
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter {
position: relative;
padding: 0 1rem;
margin: .5rem 0;
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;
top: 0px;
padding: 8px 10px;
line-height: 1;
left: 16px;
background: none; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-search .btn-search i.fa {
background: none;
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; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul {
display: block;
@ -82,7 +85,7 @@
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle .plus-icon {
font-size: .85em; }
.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; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link {
top: 9px;
@ -233,13 +236,13 @@
background: #444;
border-color: #444;
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;
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-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; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle {
color: #666; }
@ -308,10 +311,10 @@
z-index: 100;
background: #f5f7f9;
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;
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; }
.docs-page .docs-sidebar .docs-top .navbar-logo {
padding: 0rem;

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

File diff suppressed because one or more lines are too long

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

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

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

@ -32,19 +32,22 @@
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 {
box-shadow: none; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-search {
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter {
position: relative;
padding: 0 1rem;
margin: .5rem 0;
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;
top: 0px;
padding: 8px 10px;
line-height: 1;
left: 16px;
background: none; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-search .btn-search i.fa {
background: none;
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; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul {
display: block;
@ -82,7 +85,7 @@
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle .plus-icon {
font-size: .85em; }
.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; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle.last-link {
top: 9px;
@ -233,13 +236,13 @@
background: #444;
border-color: #444;
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;
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-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; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li label.tree-toggle {
color: #666; }
@ -308,10 +311,10 @@
z-index: 100;
background: #f5f7f9;
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;
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; }
.docs-page .docs-sidebar .docs-top .navbar-logo {
padding: 0rem;

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

@ -25,27 +25,28 @@ $(document).ready(function () {
return false;
});
});
$(function () {
var navSelector = '#docs-sticky-index';
var $myNav = $(navSelector);
Toc.init($myNav);
$('body').scrollspy({
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;
});
}
$(function () {
var navSelector = '#docs-sticky-index';
var $myNav = $(navSelector);
Toc.init($myNav);
$('body').scrollspy({
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;
});
}
});
$('.btn-toggle').on("click", function () {
$(".toggle-row").slideToggle(400);

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

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