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

Docs Language Select Design

pull/1296/head
Armağan Ünlü 7 years ago
parent
5324a11409
commit
032e86c9eb
4 changed files with 115 additions and 89 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. 56
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml
  2. 76
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
  3. 2
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css
  4. 70
      modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss

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

@ -90,24 +90,47 @@
</div> </div>
} }
@if (Model.VersionSelectItems.Any()) <div class="row">
{ <div class="col pr-0">
<div class="docs-version"> @if (Model.VersionSelectItems.Any())
<div class="version-select"> {
<div class="input-group"> <div class="docs-version pr-1">
<div class="input-group-prepend"> <div class="version-select">
<label class="input-group-text"> <div class="input-group">
<i class="fa fa-check-square-o" aria-hidden="true" data-toggle="tooltip" title="@L["Version"]"></i> <div class="input-group-prepend">
</label> <label class="input-group-text">
<i class="fa fa-check-square-o" aria-hidden="true" data-toggle="tooltip" title="@L["Version"]"></i>
</label>
</div>
<select asp-items="Model.VersionSelectItems" class="form-control" onchange="if (this.value) { window.location.replace(this.value) }"></select>
</div>
</div> </div>
</div>
}
<select asp-items="Model.VersionSelectItems" class="form-control" onchange="if (this.value) { window.location.replace(this.value) }"></select> </div>
<div class="col pl-0">
<div class="docs-version docs-language pl-1">
<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["Version"]"></i>
</label>
</div>
@if (Model.LanguageSelectListItems.Count > 1)
{
<select asp-items="Model.LanguageSelectListItems" class="form-control" onchange="window.location.replace(this.value)"></select>
}
</div>
</div> </div>
</div> </div>
</div> </div>
} </div>
<div class="docs-version"> <div class="docs-version mb-4">
<div class="version-select"> <div class="version-select">
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
@ -119,6 +142,7 @@
</div> </div>
</div> </div>
@if (Model.Navigation == null || Model.Navigation.Content.IsNullOrEmpty()) @if (Model.Navigation == null || Model.Navigation.Content.IsNullOrEmpty())
{ {
<div class="text-muted p-3"> <div class="text-muted p-3">
@ -138,7 +162,7 @@
} }
</div> </div>
</div> </div>
</div> </div>
@if (Model.Document != null) @if (Model.Document != null)
@ -159,11 +183,6 @@
</div> </div>
<div class="float-right"> <div class="float-right">
@if (Model.LanguageSelectListItems.Count > 1)
{
<select asp-items="Model.LanguageSelectListItems" class="mr-2" onchange="window.location.replace(this.value)"></select>
}
@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> @L["Edit"]</a> <a href="@Model.Document.EditLink" target="_blank"> <i class="fa fa-edit"></i> @L["Edit"]</a>
@ -207,6 +226,7 @@
<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 id="scroll-index" class="docs-inner-anchors mt-2"> <div id="scroll-index" class="docs-inner-anchors mt-2">
<h5>@L["InThisDocument"]</h5> <h5>@L["InThisDocument"]</h5>
<nav id="docs-sticky-index" class="navbar index-scroll"> <nav id="docs-sticky-index" class="navbar index-scroll">
</nav> </nav>

76
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
View File

@ -31,19 +31,29 @@
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version {
position: relative; position: relative;
padding: 0 1rem; padding: 0 1rem;
margin: .45rem 0; } margin: .25rem 0; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select {
border-radius: 8px; } border-radius: 3px;
border: 1px solid #e9ecef; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text {
border: 0; } padding: 0.375rem 0.6rem;
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control { font-size: .9rem;
width: 32px;
height: 30px;
line-height: 1; line-height: 1;
border-top-left-radius: 0; border-radius: 0px;
border-bottom-left-radius: 0; border: 1px solid #e9ecef; }
padding: .3em .5em .5em; .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
border: 0; } padding: 0 10px;
border: 0;
min-height: 30px;
height: 30px;
font-size: .85em;
border-radius: 1px; }
.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 input.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.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, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited {
box-shadow: none; } box-shadow: none; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control {
padding-left: 6px; }
.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter { .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter {
padding: 0 1rem; padding: 0 1rem;
margin: .5rem 0; margin: .5rem 0;
@ -232,12 +242,12 @@
.docs-page .docs-content article.docs-body table img { .docs-page .docs-content article.docs-body table img {
background-color: initial; } background-color: initial; }
.docs-page .docs-page-index { .docs-page .docs-page-index {
min-height: 100vh; } min-height: 96vh; }
.docs-page .docs-page-index #scroll-index { .docs-page .docs-page-index #scroll-index {
max-height: 100vh; } max-height: 96vh; }
.docs-page .docs-page-index .docs-inner-anchors { .docs-page .docs-page-index .docs-inner-anchors {
position: fixed; position: fixed;
top: 0px; top: 40px;
/* max-width: 270px; */ /* max-width: 270px; */
padding: 10px; padding: 10px;
font-size: .90em; font-size: .90em;
@ -284,33 +294,23 @@
max-width: 1080px; } max-width: 1080px; }
.docs-page .docs-sidebar.dark-sidebar { .docs-page .docs-sidebar.dark-sidebar {
background: #191919; } background: #191919; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select {
background: #333; border: 1px solid #333; }
border-color: #333; .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
color: #999; background: #191919;
font-size: .9em; border-color: #191919;
min-height: 40px; color: #999; }
padding-left: 8px; } .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control {
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control { background: #191919;
background: #333; border-color: #191919;
border-color: #333; color: #999; }
color: #999; .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder {
font-size: .9em; color: #999;
min-height: 40px; opacity: .5; }
padding-left: 12px; } .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select label {
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder { background: #333;
color: #999; border-color: #333;
opacity: .5; } color: #ddd; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select label {
background: #444;
border-color: #444;
color: #ddd;
width: 36px;
text-align: center;
padding-left: 0;
padding-right: 0;
display: inline-block;
line-height: 26px; }
.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .form-control { .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .form-control {
background: #333; background: #333;
color: #999; } color: #999; }

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

File diff suppressed because one or more lines are too long

70
modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
View File

@ -28,12 +28,15 @@ body {
left: 0; left: 0;
position: fixed; position: fixed;
.docs-language {
}
.docs-sidebar-wrapper { .docs-sidebar-wrapper {
width: 270px; width: 270px;
float: right; float: right;
input.form-control { input.form-control {
background: none; background: none;
background: #fff; background: #fff;
border: 0; border: 0;
@ -45,39 +48,50 @@ body {
.docs-version { .docs-version {
position: relative; position: relative;
padding: 0 1rem; padding: 0 1rem;
margin: .45rem 0; margin: .25rem 0;
.version-select { .version-select {
border-radius: 8px; border-radius: 3px;
border: 1px solid #e9ecef;
.input-group-text { .input-group-text {
border: 0; padding: 0.375rem 0.6rem;
font-size: .9rem;
width: 32px;
height: 30px;
line-height: 1;
border-radius: 0px;
border: 1px solid #e9ecef;
} }
select.form-control, input.form-control { select.form-control, input.form-control {
line-height: 1; padding: 0 10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: .3em .5em .5em;
border: 0; border: 0;
min-height: 30px;
height: 30px;
font-size: .85em;
border-radius: 1px;
&:focus, &:active, &:hover, &:visited { &:focus, &:active, &:hover, &:visited {
box-shadow: none; box-shadow: none;
} }
} }
select.form-control {
padding-left: 6px;
}
label { label {
} }
} }
} }
.docs-filter { .docs-filter {
padding: 0 1rem; padding: 0 1rem;
margin: .5rem 0; margin: .5rem 0;
font-size: .9em; font-size: .9em;
.filter-icon { .filter-icon {
i.fa { i.fa {
color: #ddd; color: #ddd;
@ -206,6 +220,7 @@ body {
} }
} }
.docs-top { .docs-top {
.navbar-logo { .navbar-logo {
.navbar-brand { .navbar-brand {
@ -398,15 +413,15 @@ body {
} }
.docs-page-index { .docs-page-index {
min-height: 100vh; min-height: 96vh;
#scroll-index { #scroll-index {
max-height: 100vh; max-height: 96vh;
} }
.docs-inner-anchors { .docs-inner-anchors {
position: fixed; position: fixed;
top: 0px; top: 40px;
/* max-width: 270px; */ /* max-width: 270px; */
padding: 10px; padding: 10px;
font-size: .90em; font-size: .90em;
@ -464,6 +479,7 @@ body {
} }
} }
.scroll-top-btn { .scroll-top-btn {
display: none; display: none;
font-size: .85em; font-size: .85em;
@ -493,22 +509,18 @@ body {
.docs-version { .docs-version {
.version-select { .version-select {
border: 1px solid #333;
select.form-control, input.form-control { select.form-control, input.form-control {
background: #333; background: #191919;
border-color: #333; border-color: #191919;
color: #999; color: #999;
font-size: .9em;
min-height: 40px;
padding-left: 8px;
} }
input.form-control { input.form-control {
background: #333; background: #191919;
border-color: #333; border-color: #191919;
color: #999; color: #999;
font-size: .9em;
min-height: 40px;
padding-left: 12px;
&::placeholder { &::placeholder {
color: #999; color: #999;
@ -517,15 +529,9 @@ body {
} }
label { label {
background: #444; background: #333;
border-color: #444; border-color: #333;
color: #ddd; color: #ddd;
width: 36px;
text-align: center;
padding-left: 0;
padding-right: 0;
display: inline-block;
line-height: 26px;
} }
} }
} }

Write Preview
Loading…
Cancel
Save