From 382d3ed1d24b0e0c2da37044f4be4da70940d94f Mon Sep 17 00:00:00 2001 From: Stefanie Fluin Date: Wed, 12 Jun 2019 14:11:35 -0700 Subject: [PATCH] fix(docs-infra): ui polish (#31013) - Change margin to the header so that the the label aligns with the header - Make code in API pages pre-wrap so that you can see the actual text on the screen - helps with issue #27296 - Modified text to be title case in label API to be consistent with rest of app labels - Removed unused table of contents SCSS file - TOC SCSS file reorg cleanup - Soften headers font-weight in API pages - Make linenums ordered list inside code examples always show as numbers PR Close #31013 --- aio/src/styles/1-layouts/_layouts-dir.scss | 1 - .../styles/1-layouts/_table-of-contents.scss | 10 - aio/src/styles/2-modules/_api-pages.scss | 215 +++++++------- aio/src/styles/2-modules/_code.scss | 7 +- aio/src/styles/2-modules/_toc.scss | 265 +++++++++--------- .../templates/api/lib/memberHelpers.html | 6 +- 6 files changed, 261 insertions(+), 243 deletions(-) delete mode 100644 aio/src/styles/1-layouts/_table-of-contents.scss diff --git a/aio/src/styles/1-layouts/_layouts-dir.scss b/aio/src/styles/1-layouts/_layouts-dir.scss index 9fd613c4e3..4fec149571 100644 --- a/aio/src/styles/1-layouts/_layouts-dir.scss +++ b/aio/src/styles/1-layouts/_layouts-dir.scss @@ -9,5 +9,4 @@ @import 'marketing-layout'; @import 'not-found'; @import 'sidenav'; -@import 'table-of-contents'; @import 'top-menu'; diff --git a/aio/src/styles/1-layouts/_table-of-contents.scss b/aio/src/styles/1-layouts/_table-of-contents.scss deleted file mode 100644 index 86a0e5194a..0000000000 --- a/aio/src/styles/1-layouts/_table-of-contents.scss +++ /dev/null @@ -1,10 +0,0 @@ -nav#main-table-of-contents { - width: 200px; - height: 900px; - position: fixed; - right: 0; - top: 50px; - bottom: 100px; - margin-left: 32px; - background-color: $blue; -} \ No newline at end of file diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/_api-pages.scss index f69e96eed4..0dad9c0306 100644 --- a/aio/src/styles/2-modules/_api-pages.scss +++ b/aio/src/styles/2-modules/_api-pages.scss @@ -2,112 +2,96 @@ max-width: 1200px; table { - margin: 12px 0 24px; + margin: 12px 0 24px; - th { - text-transform: none; - @include font-size(16); - font-weight: bold; + th { + text-transform: none; + @include font-size(16); + font-weight: bold; + } + + tr { + border-bottom: 1px solid $lightgray; + } + + td { + vertical-align: middle; + } + + // This is overriding a style here: + // https://github.com/angular/angular/blob/95993e1/aio/src/styles/2-modules/_table.scss#L58-L62 + tbody > tr > td tr td:first-child { + @media screen and (max-width: 480px) { + background-color: inherit; } + } + + hr { + margin: 16px 0; + } + + tr:last-child { + border-bottom: none; + } + + &.item-table { + td { + padding: 32px; + } + } + + &.list-table { + td { + padding: 16px 24px; + } + } + + .short-description { + margin-left: 0; + } + + &.parameters-table { + margin-top: 0; + @include font-size(14); + box-shadow: none; tr { - border-bottom: 1px solid $lightgray; + @media screen and (max-width: 480px) { + display: flex; + flex-direction: column; + } + + td:first-child { + font-weight: 600; + padding-left: 16px; + width: 20%; + } } td { - vertical-align: middle; + padding: 8px 8px 8px 0; + border: 0; + vertical-align: top; } + } - // This is overriding a style here: - // https://github.com/angular/angular/blob/95993e1/aio/src/styles/2-modules/_table.scss#L58-L62 - tbody > tr > td tr td:first-child { - @media screen and (max-width: 480px) { - background-color: inherit; - } - } - - hr { - margin: 16px 0; - } - - tr:last-child { - border-bottom: none; - } - - &.item-table { - td { - padding: 32px; - } - } - - &.list-table { - td { - padding: 16px 24px; - } - } - - .short-description { - margin-left: 0; - } - - &.parameters-table { - margin-top: 0; - @include font-size(14); - box-shadow: none; - - tr { - @media screen and (max-width: 480px) { - display: flex; - flex-direction: column; - } - - td:first-child { - font-weight: 600; - padding-left: 16px; - width: 20%; - } - } - - td { - padding: 8px 8px 8px 0; - border: 0; - vertical-align: top; - } - } - - &.property-table { - td { - vertical-align: top; - } + &.property-table { + td { + vertical-align: top; } + } } .class-overview { position: relative; code-example { - clear: left; + clear: left; } } .short-description { - margin: 6px 0 0 10px; - } -} - -.breadcrumb-container { - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.api-header { - display: flex; - align-items: center; - - @media screen and (max-width: 600px) { - flex-direction: column; - align-items: flex-start; + margin-top: 8px; } h1 { @@ -117,10 +101,12 @@ .github-links { float: right; + .material-icons { border-radius: 4px; padding: 4px; @include font-size(20); + &:hover { background-color: $mist; } @@ -128,19 +114,20 @@ } .api-body { - .class-overview { position: relative; code-example { - clear: left; + clear: left; } } - .method-table, .option-table, .list-table { + .method-table, + .option-table, + .list-table { td > code { background-color: inherit; - white-space: pre; + white-space: pre-wrap; } .with-github-links { @@ -161,7 +148,7 @@ h3 { margin: 6px 0; - font-weight: bold; + font-weight: 500; clear: left; } @@ -172,10 +159,9 @@ } } - .api-heading { - padding: 5px 0; @include font-size(14); + margin: 16px; } .parameters-table { @@ -244,7 +230,9 @@ } - .from-constructor, .read-only-property, .write-only-property { + .from-constructor, + .read-only-property, + .write-only-property { @include font-size(12); font-weight: 600; @include letter-spacing(0.5); @@ -259,7 +247,8 @@ padding: 0; } - .selector-list, .inherited-members-list { + .selector-list, + .inherited-members-list { ul { padding: 0; li { @@ -270,7 +259,8 @@ } .selector-list { - li, a { + li, + a { font-weight: bold; i { font-weight: normal; @@ -279,6 +269,39 @@ } } +.breadcrumb-container { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.api-header { + display: flex; + align-items: center; + margin-top: -4px; + + @media screen and (max-width: 600px) { + flex-direction: column; + align-items: flex-start; + } + + h1 { + margin: 0; + } +} + +.github-links { + float: right; + .material-icons { + border-radius: 4px; + padding: 4px; + font-size: 20px; + &:hover { + background-color: $mist; + } + } +} + .deprecated-api-item { text-decoration: line-through; } diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss index e2931b2313..9065bda550 100644 --- a/aio/src/styles/2-modules/_code.scss +++ b/aio/src/styles/2-modules/_code.scss @@ -1,6 +1,11 @@ -code-example, code-tabs { +code-example, +code-tabs { clear: both; display: block; + + ol { + list-style: decimal; + } } code-example { diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss index 87284ea7a8..b9800c9a56 100644 --- a/aio/src/styles/2-modules/_toc.scss +++ b/aio/src/styles/2-modules/_toc.scss @@ -30,159 +30,160 @@ &:hover { color: $accentblue; } - } } - button.toc-heading, - button.toc-more-items { - cursor: pointer; - display: inline-block; - background: 0; - background-color: transparent; - border: none; - box-shadow: none; - padding: 0; - text-align: start; + button { + &.toc-heading, + &.toc-more-items { + cursor: pointer; + display: inline-block; + background: 0; + background-color: transparent; + border: none; + box-shadow: none; + padding: 0; + text-align: start; - &.embedded:focus { - outline: none; - background: $lightgray; - } - } - - button.toc-heading { - mat-icon.rotating-icon { - height: 18px; - width: 18px; - position: relative; - left: -4px; - top: 5px; - } - - &:hover:not(.embedded) { - color: $accentblue; - } - } - - button.toc-more-items { - color: $mediumgray; - top: 10px; - position: relative; - - &:hover { - color: $accentblue; - } - - &::after { - content: 'expand_less'; - } - - &.collapsed::after { - content: 'more_horiz'; - } - } - - .mat-icon { - &.collapsed { - @include rotate(0deg); - } - - &:not(.collapsed) { - @include rotate(90deg); - } - } - - ul.toc-list { - list-style-type: none; - margin: 0; - padding: 0 8px 0 0; - - @media (max-width: 800px) { - width: auto; - } - - li { - box-sizing: border-box; - @include font-size(12); - @include line-height(16); - padding: 3px 0 3px 12px; - position: relative; - transition: all 0.3s ease-in-out; - - &.h1:after { - content: ''; - display: block; - height: 1px; - width: 40%; - margin: 7px 0 4px 0; + &.embedded:focus { + outline: none; background: $lightgray; - clear: both; + } + } + + &.toc-heading { + mat-icon.rotating-icon { + height: 18px; + width: 18px; + position: relative; + left: -4px; + top: 5px; } - &.h3 { - padding-left: 24px; + &:hover:not(.embedded) { + color: $accentblue; } + } - a { - color: lighten($darkgray, 10); - overflow: visible; - @include font-size(12); - display: table-cell; - } + &.toc-more-items { + color: $mediumgray; + top: 10px; + position: relative; &:hover { - * { - color: $accentblue; - } + color: $accentblue; } - &.active { - * { - color: $blue; - font-weight: 500; + &::after { + content: 'expand_less'; + } - &:before { - content: ''; - border-radius: 50%; - left: -3px; - top: 12px; - background: $blue; - position: absolute; - width: 6px; - height: 6px; + &.collapsed::after { + content: 'more_horiz'; + } + } + + .mat-icon { + &.collapsed { + @include rotate(0deg); + } + + &:not(.collapsed) { + @include rotate(90deg); + } + } + + ul.toc-list { + list-style-type: none; + margin: 0; + padding: 0 8px 0 0; + + @media (max-width: 800px) { + width: auto; + } + + li { + box-sizing: border-box; + @include font-size(12); + @include line-height(16); + padding: 3px 0 3px 12px; + position: relative; + transition: all 0.3s ease-in-out; + + &.h1:after { + content: ''; + display: block; + height: 1px; + width: 40%; + margin: 7px 0 4px 0; + background: $lightgray; + clear: both; + } + + &.h3 { + padding-left: 24px; + } + + a { + color: lighten($darkgray, 10); + overflow: visible; + @include font-size(12); + display: table-cell; + } + + &:hover { + * { + color: $accentblue; + } + } + + &.active { + * { + color: $blue; + font-weight: 500; + + &:before { + content: ''; + border-radius: 50%; + left: -3px; + top: 12px; + background: $blue; + position: absolute; + width: 6px; + height: 6px; + } } } } - } - &:not(.embedded) li { - &:before { - border-left: 1px solid $lightgray; - bottom: 0; - content: ''; - left: 0; - position: absolute; - top: 0; - } + &:not(.embedded) li { + &:before { + border-left: 1px solid $lightgray; + bottom: 0; + content: ''; + left: 0; + position: absolute; + top: 0; + } - &:first-child:before { - top: 13px; - } + &:first-child:before { + top: 13px; + } - &:last-child:before { - bottom: calc(100% - 14px); - } + &:last-child:before { + bottom: calc(100% - 14px); + } - &:not(.active):hover a:before { - content: ''; - border-radius: 50%; - left: -3px; - top: 12px; - background: $lightgray; - position: absolute; - width: 6px; - height: 6px; + &:not(.active):hover a:before { + content: ''; + border-radius: 50%; + left: -3px; + top: 12px; + background: $lightgray; + position: absolute; + width: 6px; + height: 6px; + } } } } diff --git a/aio/tools/transforms/templates/api/lib/memberHelpers.html b/aio/tools/transforms/templates/api/lib/memberHelpers.html index 020e8b30e7..94c3488e7e 100644 --- a/aio/tools/transforms/templates/api/lib/memberHelpers.html +++ b/aio/tools/transforms/templates/api/lib/memberHelpers.html @@ -208,9 +208,9 @@ {$ renderMemberSyntax(property) $} - {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}Read-only.{% endif %} - {%- if property.isSetAccessor and not property.isGetAccessor %}Write-only.{% endif %} - {% if property.constructorParamDoc %} Declared in constructor.{% endif %} + {%- if (property.isGetAccessor or property.isReadonly) and not property.isSetAccessor %}Read-Only{% endif %} + {%- if property.isSetAccessor and not property.isGetAccessor %}Write-Only{% endif %} + {% if property.constructorParamDoc %} Declared in Constructor{% endif %} {% if property.shortDescription %}{$ property.shortDescription | marked $}{% endif %} {$ (property.description or property.constructorParamDoc.description) | marked $} {%- if property.see.length %}