Browse Source

Resolved #4332

pull/4431/head
Armağan Ünlü 6 years ago
parent
commit
58bbbe71dd
  1. 155
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
  2. 6
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js
  3. 89
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
  4. 2
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css
  5. 131
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss

155
modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml

@ -131,10 +131,10 @@
<div class="version-select">
<div class="input-group">
@*<div class="input-group-prepend">
<label class="input-group-text">
<i class="fa fa-globe" aria-hidden="true" data-toggle="tooltip" title="@L["Language"]"></i>
</label>
</div>*@
<label class="input-group-text">
<i class="fa fa-globe" aria-hidden="true" data-toggle="tooltip" title="@L["Language"]"></i>
</label>
</div>*@
<select asp-items="Model.LanguageSelectListItems"
class="form-control"
onchange="window.location.replace(this.value)">
@ -163,25 +163,6 @@
</div>
</div>
@if (Model.FullSearchEnabled)
{
<div class="docs-version mt-2 mb-4">
<div class="version-select">
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text"><i class="fa fa-search"></i></label>
</div>
<input class="form-control"
id="fullsearch"
type="search"
data-fullsearch-url="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/"
placeholder="@L["FullSearch"].Value"
aria-label="Filter">
</div>
</div>
</div>
}
@if (Model.Navigation == null || !Model.Navigation.HasChildItems)
{
@ -209,48 +190,60 @@
{
<div class="col-md-7 docs-content bg-white">
<div class="docs-link-btns">
<div class="float-left">
@(L["ShareOn"].Value + " :")
<a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
<i class="fa fa-twitter"></i>
</a>
<a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
<i class="fa fa-linkedin"></i>
</a>
<a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
<i class="fa fa-envelope-square"></i>
</a>
</div>
<div class="float-right">
@if (!string.IsNullOrEmpty(Model.Document.EditLink))
{
<a href="@Model.Document.EditLink" target="_blank">
<i class="fa fa-edit"></i>
@(L["Edit"])
<span class="for-desktop">(@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString())</span>
</a>
}
</div>
<div class="row">
<div class="col">
@if (Model.FullSearchEnabled)
{
<div class="search-area">
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text"><i class="fa fa-search"></i></label>
</div>
<div class="float-right mr-3">
@if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
{
<span class="for-desktop">
@(L["Contributors"].Value + " :") </span>
@foreach (var contributor in Model.Document.Contributors)
<input class="form-control"
id="fullsearch"
type="search"
data-fullsearch-url="/search/@Model.LanguageCode/@Model.ProjectName/@Model.Version/"
placeholder="@L["FullSearch"].Value"
aria-label="Filter">
</div>
</div>
}
</div>
<div class="col-auto">
<div class="cont-container">
@if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
{
<span class="for-desktop mr-3">
@(L["Contributors"].Value)
</span>
@foreach (var contributor in Model.Document.Contributors)
{
<a href="@contributor.UserProfileUrl" target="_blank" class="cont-avatar">
<img src="@contributor.AvatarUrl"
class="rounded-circle"
alt="Avatar"
height="21"
width="21"
title="@contributor.Username" />
</a>
}
}
</div>
</div>
<div class="col-auto">
@if (!string.IsNullOrEmpty(Model.Document.EditLink))
{
<a href="@contributor.UserProfileUrl" target="_blank">
<img src="@contributor.AvatarUrl"
class="rounded-circle"
alt="Avatar"
height="21"
width="21"
title="@contributor.Username" />
<a href="@Model.Document.EditLink" target="_blank">
<i class="fa fa-edit"></i>
@(L["Edit"])
<span class="for-desktop text-muted">@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()</span>
</a>
}
}
</div>
</div>
</div>
</div>
@ -318,8 +311,20 @@
</div>
</div>
</div>
<!-- Right Bar -->
<div class="col-md-2 docs-page-index position-relative bg-light">
<div class="doc-social-btns">
@(L["ShareOn"].Value + " :")
<a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
<i class="fa fa-twitter"></i>
</a>
<a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
<i class="fa fa-linkedin"></i>
</a>
<a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
<i class="fa fa-envelope-square"></i>
</a>
</div>
<div id="scroll-index" class="docs-inner-anchors mt-2">
<h5>@L["InThisDocument"]</h5>
<nav id="docs-sticky-index" class="navbar index-scroll">
@ -350,17 +355,17 @@
else
{
if (!Model.ProjectFound)
{
@(await Component.InvokeAsync<ErrorViewComponent>(new
{
model = new ErrorPageModel
{
RedirectUrl = Model.DocumentsUrlPrefix,
ErrorCode = "404",
ErrorMessage = L.GetString("ProjectNotFound")
}
}))
}
{
@(await Component.InvokeAsync<ErrorViewComponent>(new
{
model = new ErrorPageModel
{
RedirectUrl = Model.DocumentsUrlPrefix,
ErrorCode = "404",
ErrorMessage = L.GetString("ProjectNotFound")
}
}))
}
if (!Model.DocumentFound)
{
@ -370,9 +375,9 @@ else
{
RedirectUrl = Model.DocumentsUrlPrefix + Model.LanguageCode + "/" + Model.ProjectName + "/"
+ (Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version),
ErrorCode = "404",
ErrorCode = "404",
ErrorMessage = L.GetString("DocumentNotFound"),
AutoRedirect = !Model.DocumentName.IsNullOrWhiteSpace()
AutoRedirect = !Model.DocumentName.IsNullOrWhiteSpace()
}
}))
}

6
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js

@ -109,11 +109,13 @@
var wWidth = $(window).width();
if (wWidth > 766) {
$("#sidebar-scroll").mCustomScrollbar({
theme: "minimal"
theme: "minimal",
alwaysShowScrollbar: 0,
});
$("#scroll-index").mCustomScrollbar({
theme: "minimal-dark"
theme: "minimal-dark",
alwaysShowScrollbar: 0,
});
}
}

89
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css

@ -65,10 +65,12 @@
height: 100vh; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul {
display: block;
height: calc(100vh - 320px);
overflow-y: auto; }
height: calc(100vh - 230px);
overflow-y: auto;
margin-right: 12px !important;
margin-top: 20px !important; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul {
font-size: .935em;
font-size: .9em;
list-style: none;
padding: 0 1rem;
margin: 0; }
@ -179,26 +181,34 @@
.docs-page .docs-content .contributors a:hover {
text-decoration: none; }
.docs-page .docs-content .docs-link-btns {
border-bottom: 1px solid #f4f5f7;
background: #fdfdfd;
padding: 10px 20px;
background: #f5f7fa;
padding: 15px 30px;
margin: 0 -15px;
text-align: right;
font-size: .8em;
min-height: 40px; }
min-height: 48px; }
.docs-page .docs-content .docs-link-btns a {
color: #999; }
color: #222; }
.docs-page .docs-content .docs-link-btns a .text-muted {
color: #ccc !important; }
.docs-page .docs-content .docs-link-btns a:hover {
color: #444;
color: #000;
text-decoration: none; }
.docs-page .docs-content .docs-link-btns .twitter {
color: #00ACEE; }
.docs-page .docs-content .docs-link-btns .linkedin {
color: #0077B5; }
.docs-page .docs-content .docs-link-btns .email {
color: #5a5a5a; }
.docs-page .docs-content .docs-link-btns .share-button {
margin-left: 10px; }
.docs-page .docs-content .docs-link-btns .search-area {
margin: -5px 0 -5px -10px;
box-shadow: 0 0 10px #e8e8e8; }
.docs-page .docs-content .docs-link-btns .search-area .input-group-text {
background: white;
border: 0;
color: #000;
font-size: 1em; }
.docs-page .docs-content .docs-link-btns .search-area .form-control {
background: #fff;
border: 0;
font-size: 1em;
padding-left: 0;
outline: 0;
box-shadow: none; }
.docs-page .docs-content .docs-text-field {
padding: 2rem; }
.docs-page .docs-content article.docs-body {
@ -259,13 +269,46 @@
background-color: #f6f8fa; }
.docs-page .docs-content article.docs-body table img {
background-color: initial; }
.docs-page .doc-social-btns {
margin: 0 -15px 0;
font-size: .8em;
background: #e9ecf0;
height: 53px;
padding: 15px 20px;
position: fixed;
top: 0px;
width: 100%; }
.docs-page .doc-social-btns a:hover {
text-decoration: none; }
.docs-page .doc-social-btns .twitter {
color: #00ACEE; }
.docs-page .doc-social-btns .linkedin {
color: #0077B5; }
.docs-page .doc-social-btns .email {
color: #5a5a5a; }
.docs-page .doc-social-btns .share-button {
margin-left: 10px; }
.docs-page .cont-container a.cont-avatar {
position: relative; }
.docs-page .cont-container a.cont-avatar img {
width: 24px;
height: 24px;
box-shadow: 0 0 8px #c1bbbb;
border: 2px solid #fff;
margin-left: -10px;
display: inline-block;
margin-top: -2px;
transition: .2s; }
.docs-page .cont-container:hover a.cont-avatar img {
margin-left: -2px; }
.docs-page .docs-page-index {
min-height: 96vh; }
min-height: 90vh;
background-color: #f5f7fa !important; }
.docs-page .docs-page-index #scroll-index {
max-height: 96vh; }
max-height: 90vh; }
.docs-page .docs-page-index .docs-inner-anchors {
position: fixed;
top: 0px;
top: 50px;
padding: 10px;
font-size: .90em; }
.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills {
@ -617,3 +660,9 @@ div.code-toolbar > .toolbar a {
margin-left: -36px; } }
.scrolledMore .alert-criteria p.alert-p {
display: none; }
.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
opacity: 1 !important;
filter: "alpha(opacity=1)";
-ms-filter: "alpha(opacity=1)"; }

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

File diff suppressed because one or more lines are too long

131
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss

@ -26,7 +26,7 @@ body {
left: 0;
position: fixed;
background: #1d1d1d;
.input-group {
border-radius: 5px;
overflow: hidden;
@ -103,12 +103,14 @@ body {
> ul {
display: block;
height: calc(100vh - 320px);
height: calc(100vh - 230px);
overflow-y: auto;
margin-right: 12px !important;
margin-top: 20px !important;
}
ul {
font-size: .935em;
font-size: .9em;
list-style: none;
padding: 0 1rem;
margin: 0;
@ -298,37 +300,45 @@ body {
}
.docs-link-btns {
border-bottom: 1px solid #f4f5f7;
background: #fdfdfd;
padding: 10px 20px;
background: #f5f7fa;
padding: 15px 30px;
margin: 0 -15px;
text-align: right;
font-size: .8em;
min-height: 40px;
min-height: 48px;
a {
color: #999;
color: #222;
.text-muted {
color: #ccc !important;
}
&:hover {
color: #444;
color: #000;
text-decoration: none;
}
}
.twitter {
color: #00ACEE;
}
.linkedin {
color: #0077B5;
}
.search-area {
margin: -5px 0 -5px -10px;
box-shadow: 0 0 10px #e8e8e8;
.email {
color: #5a5a5a;
}
.input-group-text {
background: white;
border: 0;
color: #000;
font-size: 1em;
}
.share-button {
margin-left: 10px;
.form-control {
background: #fff;
border: 0;
font-size: 1em;
padding-left: 0;
outline: 0;
box-shadow: none;
}
}
}
@ -432,16 +442,73 @@ body {
}
}
.doc-social-btns {
margin: 0 -15px 0;
font-size: .8em;
background: #e9ecf0;
height: 53px;
padding: 15px 20px;
position: fixed;
top: 0px;
width: 100%;
a:hover {
text-decoration: none;
}
.twitter {
color: #00ACEE;
}
.linkedin {
color: #0077B5;
}
.email {
color: #5a5a5a;
}
.share-button {
margin-left: 10px;
}
}
.cont-container {
a.cont-avatar {
position: relative;
img {
width: 24px;
height: 24px;
box-shadow: 0 0 8px #c1bbbb;
border: 2px solid #fff;
margin-left: -10px;
display: inline-block;
margin-top: -2px;
transition: .2s;
}
}
&:hover {
a.cont-avatar {
img {
margin-left: -2px;
}
}
}
}
.docs-page-index {
min-height: 96vh;
min-height: 90vh;
background-color: #f5f7fa !important;
#scroll-index {
max-height: 96vh;
max-height: 90vh;
}
.docs-inner-anchors {
position: fixed;
top: 0px;
top: 50px;
padding: 10px;
font-size: .90em;
@ -517,11 +584,11 @@ body {
.docs-page {
.docs-sidebar {
.docs-sidebar {
.docs-sidebar-wrapper {
.docs-version {
.version-select {
.version-select {
select.form-control, input.form-control {
background: #000000;
@ -696,7 +763,6 @@ body {
.container {
max-width: 1080px;
}
}
@media (min-width: 1366px) {
@ -960,7 +1026,7 @@ div.code-toolbar > .toolbar a {
@media screen and (max-width: 767px) {
.navbar-logo {
.navbar-brand {
display: inline-block;
display: inline-block;
margin: 0 auto !important;
max-width: 70%;
overflow: hidden;
@ -1012,6 +1078,7 @@ div.code-toolbar > .toolbar a {
}
}
}
.scrolledMore {
padding-top: 107px;
@ -1034,4 +1101,10 @@ div.code-toolbar > .toolbar a {
}
}
}
.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
opacity: 1 !important;
filter: "alpha(opacity=1)";
-ms-filter: "alpha(opacity=1)";
}

Loading…
Cancel
Save