Commit Graph
53 Commits
Author SHA1 Message Date
George Kalpakas 7a27cd262f refactor(docs-infra): simplify code snippet indentation in the "Cheat sheet" guide (#41051)
Previously, the indentation of code snippets in the "Cheat sheet" guide
was done using `<br>` elements (for line breaks) and `&emsp;` HTML
entities (for space). This was laborious and put the onus on the author
to remember to use these symbols (instead of regular whitespace
characters).
(Discussed in
https://github.com/angular/angular/pull/41051#discussion_r585651621.)

This commit changes the way `<code>` elements are styles inside the
"Cheat sheet" guide to allow using regular whitespace characters in code
snippets. It also changes all `<br>`/`&emsp;` occurrences to `\n`/`  `
respectively to make code snippets more readable in the source code.

PR Close #41051
2021-03-09 08:52:52 -08:00
George Kalpakas 76daca800e refactor(docs-infra): remove unnecessary wrapper <div> from the "Cheat sheet" guide (#41051)
This commit removes an unnecessary wrapper `<div>` from the
"Cheat sheet" guide. The CSS styles that referenced the element's ID
(`#cheatsheet`) have been updated to use `.page-guide-cheatsheet`
instead.

PR Close #41051
2021-03-09 08:52:51 -08:00
George Kalpakas f85a178a49 fix(docs-infra): fix <code> styling in the "Cheat sheet" guide (#41051)
Since #40944, `<code>` elements have a distinctive background to make
them stand out from regular text. However, this styling is not desirable
in certain cells of the "Cheat sheet" guide's tables, which exclusively
contain code.

This commit updates the `<code>` styling to remove the distinctive
background in those "Cheat sheet" cells.

Before #40944: ![cheatsheet code before PR 40944][1]
Since #40944: ![cheatsheet code since PR 40944][2]
After this commit: ![cheatsheet code after][3]

[1]: https://user-images.githubusercontent.com/8604205/109383633-4f215200-78f0-11eb-95e2-2a2c4fb3a31f.png
[2]: https://user-images.githubusercontent.com/8604205/109383634-50527f00-78f0-11eb-8c48-ff5f96918c4d.png
[3]: https://user-images.githubusercontent.com/8604205/109383635-50eb1580-78f0-11eb-9cf2-98851692ddd9.png

PR Close #41051
2021-03-09 08:52:51 -08:00
George Kalpakas d80d6ea3f6 fix(docs-infra): fix styling of <code> elements on older browsers (#41051)
Previously, styling of `<code>` elements utilized the `:not()` CSS
pseudo-class with multiple selectors (`:not(h1, h2, ...)`). It turns out
that older browsers (such as IE11) do not support multiple selectors in
a single `:not()` instance.
(See [MDN][1] and [CanIUse][2] for more info.)

This commit fixes `<code>` styling to use multiple separate `:not()`
instances instead (`:not(h1):not(h2)...`), so that they are styled
correctly on older browsers as well.

NOTE:
This change seems to trigger some kind of bug in LightHouse that causes
the a11y score of `/start` to be calculated as 0 (which is clearly
wrong). This happens on Linux (tested on CI and locally using the
Windows Subsystem for Linux (WSL)) - on Windows the score is computed
correctly as 98/100.
([Example failure][3])

The bug seems to be related to the layout of the content and goes away
if we change the viewport size (for example, switching to LightHouse's
`desktop` config) or make another change that affects the content's
layout (for example, reducing the padding of `<code>` elements).

To work around the issue, this commit updates the `test-aio-a11y.js`
script to test `/start-routing` instead of `/start`.

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:not#description:~:text=Using%20two%20selectors
[2]: https://caniuse.com/css-not-sel-list
[3]: https://circleci.com/gh/angular/angular/931038

PR Close #41051
2021-03-09 08:52:51 -08:00
George KalpakasandStefanie Fluin d97b45d82a fix(docs-infra): make inline code stand out more (#40944)
This commit improves the styling of inline code blocks to make them
stand out more.

Before: ![code formatting before][1]
After: ![code formatting after][2]

This change has been extracted from #36045.

[1]: https://user-images.githubusercontent.com/8604205/108554295-8e521080-72fc-11eb-94e8-09246ae334c8.png
[2]: https://user-images.githubusercontent.com/8604205/108553733-c9077900-72fb-11eb-8001-1f0baf8b95bc.png

Co-authored-by: Stefanie Fluin <[email protected]>

PR Close #40944
2021-02-26 15:39:29 -08:00
George Kalpakas 7bcef26852 refactor(docs-infra): remove unnecessary font-family styles (#40881)
This commit removes some unnecessary styles setting `font-family` to
`$main-font`. These styles are redundant, because the targeted elements
already inherit this style from `<body>`.

PR Close #40881
2021-02-19 09:14:59 -08:00
George Kalpakas 93e2aea4bd fix(docs-infra): dim line-numbers in code examples (#40802)
This commit ensures that the line-numbers in code examples appear
"dimmed" to make it clearer that they are not part of the actual code.

Based on the CSS rules, it seems that the intention was to make it so,
but the color was incorrectly set on the `<ol>` elements instead of
targeting `li::marker`.

Before: ![line-numbers before][1]
After: ![line-numbers after][2]

[1]: https://user-images.githubusercontent.com/8604205/106937191-23aeab80-6726-11eb-9178-bdc067fa3d09.png
[2]: https://user-images.githubusercontent.com/8604205/106937184-227d7e80-6726-11eb-81d1-f709537b6a56.png

PR Close #40802
2021-02-16 08:39:48 -08:00
George Kalpakas ae1a00760d refactor(docs-infra): move common .code-anchor styles to _code.scss (#40704)
The `.code-anchor` class can be used anywhere where we have code
examples (including API pages and docs guides). Previously, global
styles for `.code-anchor` were defined in `_api-list.scss` (i.e. the
styles from `_api-list.scss` were also applied to `.code-anchor`
elements in other pages/components).

This commit moves the `.code-anchor` styles to `_code.scss`, which
contains other common code-related styles.

PR Close #40704
2021-02-09 10:47:19 -08:00
George Kalpakas 852010e31a refactor(docs-infra): scope code example styles to the <aio-code> element (#40704)
This commit ensures that all styles for the code examples (which are
defined in `_code.scss`) only apply to elements inside an `<aio-code>`
element. This will prevent the styles accidentally taking effect on a
different part of the app.

PR Close #40704
2021-02-09 10:47:19 -08:00
George Kalpakas b2ee4e2091 refactor(docs-infra): merge style rules in _code.scss (#40704)
This commit cleans up the styles in `_code.scss` by merging together
blocks that target the same elements.

It also normalizes the rules targeting Angular Material tabs to use
consistent selectors and use class names instead of tag names.

PR Close #40704
2021-02-09 10:47:19 -08:00
George Kalpakas 72814f9dc5 refactor(docs-infra): remove unused styles from _code.scss (#40704)
This commit removes some styles from `_code.scss` that are no longer
used (i.e. either their CSS selectors do not match any element in the
app or they are overridden by other rules).

PR Close #40704
2021-02-09 10:47:18 -08:00
Saif ee22aa592e fix(docs-infra): correctly display copy button in IE11 (#38186)
Fix button top portion was clipped in IE11 by setting overflow to visible

Fixes #37816

PR Close #38186
2020-07-23 11:07:28 -07:00
Stefanie Fluin 382d3ed1d2 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
2019-08-05 12:53:02 -07:00
Stefanie Fluin 65974154e2 feat(docs-infra): change typography font sizes to be rem based (#31118)
PR Close #31118
2019-06-21 14:22:20 -07:00
Stefanie Fluin 699283c4ee feat(docs-infra): layout ui polish (#30883)
PR Close #30883
2019-06-11 14:20:35 -07:00
Pete Bacon Darwin f22deb2e2d build(docs-infra): improve directive API doc templates (#25768)
Closes #22790
Closes #25530

PR Close #25768
2018-10-01 09:36:32 -07:00
George Kalpakas 255463ed48 fix(aio): remove unnecessary scrollbar in code-tabs (#24207)
PR Close #24207
2018-06-04 12:07:25 -07:00
Pete Bacon Darwin ddd6124802 feat(aio): display code-tabs in a Material Design "card" (#24027)
This helps to connect the "content" of the tab to its label.

Closes #23985

PR Close #24027
2018-05-29 16:52:06 -04:00
Pete Bacon Darwin 96a0e131bf feat(aio): render hover status on code-tabs (#24027)
The Material Design spec states that there should be a change
of background when hovering over a tab label.

See https://material.io/design/components/tabs.html#states

Related to #23985

PR Close #24027
2018-05-29 16:52:06 -04:00
George Kalpakas 3f20a5c7c8 refactor(aio): use the same selectors for screen and print styles (#23538)
PR Close #23538
2018-05-04 15:21:13 -07:00
Stefanie Fluin 7078fbffb4 fix(aio): improve printing styles (#19651)
printfix

PR Close #19651
2018-02-15 09:52:32 -08:00
Matias Niemelä ba9cd5bbc4 Revert "fix(aio): improve printing styles (#19651)"
This reverts commit b54ad053f9.
2018-02-14 22:55:24 -05:00
Stefanie Fluin b54ad053f9 fix(aio): improve printing styles (#19651)
printfix

PR Close #19651
2018-02-14 18:49:58 -05:00
Pete Bacon Darwin 7007f51c35 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
2018-02-09 13:05:16 -08:00
Igor Minar 415e75716a build(aio): upgrade to @angular/{material,cdk}@2.0.0-beta.11 + md->mat migration (#19702)
all the non-npm changes were made by the angular-material-prefix-updater tool.

the tool missed a few things, which I'll fix in a separate commit to preserve the diff.

-rw-r--r--  1 iminar  eng   14942 Oct 13 13:09 dist/0.b19e913fbdd6507d346b.chunk.js
-rw-r--r--  1 iminar  eng    1535 Oct 13 13:09 dist/inline.0592c25ceb544d6aca3d.bundle.js
-rw-r--r--  1 iminar  eng  578250 Oct 13 13:09 dist/main.45d4edca3facc6d621e7.bundle.js
-rw-r--r--  1 iminar  eng   37402 Oct 13 13:09 dist/polyfills.f8409a9eb69060ac1aa6.bundle.js

PR Close #19702
2017-11-01 15:24:42 -07:00
Georgios Kalpakas 92179bcc64 fix(aio): do not wrap <code-tabs> tab labels
Fixes #17751
2017-07-18 17:43:59 +01:00
Georgios Kalpakas 4d45fe6fb5 fix(aio): fix tab animations on CodeTabsComponent
In our attempt to remove the material ripple effect from tab labels, we were
killing all `transform`-based animations on other `md-tab-group` elements, such
as animating the content when entering/leaving. (This wasn't an issue on Chrome,
because it didn't respect our `!important` flag.)
This commit fixes it by properly hiding the ripple effect (using a feature
introduced in angular/material2@e4789c7b8) and allowing other animations to
execute normally.

Fixes #17998
2017-07-11 11:49:22 -07:00
Ward Bell 41a765d715 fix(aio): re-color code pretty print
closes #17246
2017-06-08 14:00:16 -07:00
Stefanie Fluin 391ed6334d fix(aio): copy code button overlap fix on mobile (#17302) 2017-06-08 12:08:03 -07:00
Ward Bell a42322da0c feat(aio): code copy button has tooltip and aria-label
Based on optional title passed in from parent element such as CodeExample or CodeTabs.
Darkens uncovered copy button slightly as recommended for a11y.
PR #16808
2017-05-19 09:42:48 +01:00