feat(aio): first pass API docs redesign (#21874)
Includes: * display ToC for API docs * update dgeni-packages to 0.24.1 * add floating sidebar in API docs * add breadcrumbs and structured data for Google crawler * improved rendering of method overloads * properties rendered in a table * params rendered with docs * removal of outdated "infobox" from all API docs PR Close #21874
This commit is contained in:
Pete Bacon Darwin
committed by
Miško Hevery
Miško Hevery
parent
bc1e22922a
commit
7007f51c35
@ -143,13 +143,13 @@ th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p > code, li > code, table code {
|
||||
p > code, li > code, td > code, th > code {
|
||||
font-family: $code-font;
|
||||
font-size: 85%;
|
||||
color: $darkgray;
|
||||
letter-spacing: 0;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
padding: 2px 0;
|
||||
background-color: $backgroundgray;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
text-transform: none;
|
||||
padding: 8px 24px;
|
||||
}
|
||||
|
||||
|
||||
tbody {
|
||||
pre {
|
||||
white-space: normal;
|
||||
@ -36,34 +36,44 @@
|
||||
}
|
||||
}
|
||||
|
||||
.api-body {
|
||||
|
||||
.api-header label {
|
||||
border-radius: 4px;
|
||||
padding: 4px 16px;
|
||||
display: inline;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
margin: 0 8px 0 16px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
display: block;
|
||||
margin: 8px 0;
|
||||
}
|
||||
max-width: 1200px;
|
||||
|
||||
&.api-status-label {
|
||||
background-color: $mediumgray;
|
||||
}
|
||||
table {
|
||||
|
||||
&.api-type-label {
|
||||
background-color: $accentblue;
|
||||
th {
|
||||
text-transform: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@each $name, $symbol in $api-symbols {
|
||||
&.#{$name} {
|
||||
background: map-get($symbol, background);
|
||||
tr {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.item-table {
|
||||
td {
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&.list-table {
|
||||
td {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -37,3 +37,11 @@ aio-shell.page-docs {
|
||||
margin: 24px 0px;
|
||||
background: $lightgray;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
right: 24px;
|
||||
}
|
||||
@ -1,23 +1,102 @@
|
||||
.api-info-bar {
|
||||
max-width: 800px;
|
||||
text-align: left;
|
||||
.api-body {
|
||||
|
||||
span {
|
||||
margin: 0 16px 0 0;
|
||||
.class-overview {
|
||||
position: relative;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
display: block;
|
||||
code-example {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
|
||||
border-radius: 2px;
|
||||
background: #FAFAFA;
|
||||
float: right;
|
||||
margin: 20px;
|
||||
padding: 0 24px 14px;
|
||||
|
||||
h2 {
|
||||
margin: 18px 0 4px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
.inline-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
.inline-sidebar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.method-table {
|
||||
h3 {
|
||||
margin: 6px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.api-heading {
|
||||
padding: 5px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.properties-table {
|
||||
font-size: 14px;
|
||||
|
||||
thead th {
|
||||
&:nth-child(1) {
|
||||
width: 20%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parameters-table {
|
||||
margin-top: 0;
|
||||
font-size: 14px;
|
||||
td:nth-child(1) {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
details.overloads {
|
||||
margin-left: -8px;
|
||||
|
||||
summary {
|
||||
height: inherit;
|
||||
padding: 8px 12px;
|
||||
h4 {
|
||||
margin: 0;
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-section aio-code {
|
||||
background-color: rgba(241, 241, 241, 0.2);
|
||||
}
|
||||
|
||||
.from-constructor {
|
||||
font-style: italic;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.api-heading {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.overloads .detail-contents {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@ -69,7 +69,7 @@ code-tabs mat-tab-body-content .fadeIn {
|
||||
aio-code pre {
|
||||
display: flex;
|
||||
min-height: 32px;
|
||||
margin: 16px 32px;
|
||||
margin: 16px 24px;
|
||||
white-space: pre-wrap;
|
||||
align-items: center;
|
||||
|
||||
|
||||
@ -25,16 +25,13 @@ summary {
|
||||
display: none; // Remove the built in details marker in webkit
|
||||
}
|
||||
|
||||
&::after {
|
||||
&::before {
|
||||
content: '\E5CE'; // See https://material.io/icons/#ic_expand_less
|
||||
font-family: 'Material Icons';
|
||||
font-size: 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@include rotate(0deg); // We will rotate 180 degrees when details is open
|
||||
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 22px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,7 +42,7 @@ details {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
&[open] > summary::after {
|
||||
&[open] > summary::before {
|
||||
@include rotate(180deg); // Rotate the icon
|
||||
}
|
||||
}
|
||||
|
||||
55
aio/src/styles/2-modules/_label.scss
Normal file
55
aio/src/styles/2-modules/_label.scss
Normal file
@ -0,0 +1,55 @@
|
||||
label.raised, .api-header label {
|
||||
border-radius: 4px;
|
||||
padding: 4px 16px;
|
||||
display: inline;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
display: block;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
&.page-label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $mist;
|
||||
color: $mediumgray;
|
||||
margin-bottom: 8px;
|
||||
width: 140px;
|
||||
|
||||
.material-icons {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.property-type-label {
|
||||
font-size: 12px;
|
||||
background-color: $darkgray;
|
||||
color: $white;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.api-header label {
|
||||
|
||||
&.api-status-label {
|
||||
background-color: $mediumgray;
|
||||
}
|
||||
|
||||
&.api-type-label {
|
||||
background-color: $accentblue;
|
||||
|
||||
@each $name, $symbol in $api-symbols {
|
||||
&.#{$name} {
|
||||
background: map-get($symbol, background);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -30,3 +30,4 @@
|
||||
@import 'select-menu';
|
||||
@import 'deploy-theme';
|
||||
@import 'notification';
|
||||
@import 'label';
|
||||
|
||||
@ -12,7 +12,7 @@ table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
thead {
|
||||
thead > {
|
||||
vertical-align: middle;
|
||||
border-color: inherit;
|
||||
|
||||
@ -21,20 +21,20 @@ table {
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
th {
|
||||
tr > th {
|
||||
background: rgba($lightgray, 0.2);
|
||||
border-bottom: 1px solid $lightgray;
|
||||
color: $darkgray;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 8px 32px;
|
||||
padding: 8px 24px;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tbody > tr > {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
@ -70,7 +70,7 @@ table {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
&:last-child td {
|
||||
border: none;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
table tbody th{
|
||||
table > tbody > tr > th {
|
||||
border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user