* fix(aio): make the search-pane larger
Fixes#17094
* feat(aio): give the search-box a type of "search"
This enables browsers to style it better (e.g. add an `x` button for clearing
the field, which allows users to quickly reset the search query and hide
results).
There seems to have been a bad rebase of #16228 on top of #16959, which affected
ToC styles from both PRs. This commit restores the horizontal line under `.h1`
elements and the vertical blue bar on the left-hand side of the ToC (with the
circle running along the bar to indicate the active section).
Fixes#17098
- Add styling for active TOC item
- Add sidenav styles
- Change header tags to divs from index marketing page to remove anchors
- Fix use of card mixin and create separate card-docs class
- Add marketing styling
- Topnav styling when on home landing page
- Remove hamburger menu on home page
- Add fully rounded border to top nav toolbar search input
- Add mobile styles
- Add title banner to other marketing pages
Use this file if we need to turn off the service worker in deployed sites
in an emergency where the worker has a bug that is blocking the application
from working.
Closes#16897
this means we'll be temporarily duplicating the helpers (onces included via scripts
and secondly imported via es imports) - once rxjs, core and material migrate over
to tslib, we can drop the scripts/global dupe.
The `TopBarNarrow` now only shows a single top level container, "About Angular",
and the original `TopBar` items will be children of this container.
The `TopBarNarrow` styling is changed to match the rest of the `SideNav`.
* refactor(aio): use explicit CSS class for TOC container
This makes the styling less fragile to changes in the HTML
* fix(aio): schedule TocComponent.activeIndex updates via AsapScheduler
We use the `asap` scheduler because updates to `activeItemIndex` are triggered by DOM changes,
which, in turn, are caused by the rendering that happened due to a ChangeDetection.
Without asap, we would be updating the model while still in a ChangeDetection handler,
which is disallowed by Angular.
* refactor(aio): do not instantiate floating ToC if not displayed
* feat(aio): display the h1 at the top of the floating TOC
Closes#16900
* refactor(aio): combine the TOC booleans flags into a "type" state
* refactor(aio): remove unnecessary `hostElement` property
* fix(aio): ensure that transition works on TOC
* fix(aio): use strict equality in ToC template
If there is a `TopBarNarrow` nav view then use this when the screen is narrow.
Otherwise just use the normal `TopBar`.
This commit also creates such a narrow topbar view where the "Docs" item is
in a different position
Closes#16940
Previously we hardcoded the current version into the navigation items.
Now only previous versions are included there. The current version is
computed from the currentVersion info.
Closes#16909
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
- Use buttons for the TOC “Contents” label when embedded-and-expandable or TOC on the right to satisfy a11y.
- Add aria-pressed setting for the toggles in TOC and NavItem.
- Clicking the right panel TOC “Contents” button scrolls to top.
- When embedded use same rotating caret as sidebar
- When embedded and no secondaries, “Content” is just a label.
- Gray background for focused buttons rather than outline because can’t get carets to work with outline.
Sidenav headers had been anchors w/o hrefs. These can’t take focus which makes you can’t navigate through them with keyboard. For a11y purposes, this PR turns them into buttons.
By reflex we began all component tests with an async `beforeEach` that called `compileComponents`.
In at least one case (`live-example.component.spec.ts`) that led to the `it` tests being async as well.
There is no need to call `.compileComponents` because CLI web pack + plugin inlines all templates and styles.
While `.compileComponents` was harmless, it added complexity and distraction which we should not inflict on future readers and testers.
Previously the logic for deciding when to display
the search result was spread between different
parts of the application and used non-intuitive logic
such as sending a blank results set to the searchResults.
This commit moves the management of displaying
the search results (and also setting focus of the
search input box) to the AppComponent. This makes
it easier to understand what happens and why; but
also allows the search UI components to be more
easily reused (such as embedding them in the 404
page).
Since abb36e3cb, we no longer rely on the cli to set up ServiceWorker, but do it
manually as part of `yarn build`. When using `ng serve`, registering the
ServiceWorker fails, because we haven't created `ngsw-manifest.json` nor copied
`worker-basic.min.js` into dist.
This commit works around this, by only registering the service worker in
production mode (which is what the cli does too).
Caveat:
It is not possible to enable ServiceWorker with `ng serve`/`yarn start` and
using the `--prod` flag will try to register it, but fail because the necessary
files (`ngsw-manifest.json` and `worker-basic.min.js`) will not be available.
(As a work-around, you can use `yarn build` and serve the files in `dist/` with
`yarn http-server -- dist -p 4200`.)
* fix(aio): allow code blocks to clear floated images
Previously the negative margin on the code headings were causing
floated images to overlay the start of a code block. Now all code block
successfully clear all floated elements.
* feat(aio): add a `.clear` class for clearing floating images
* fix(aio): tidy up image styles
The css rules for `img.right` and `img.left` allow authors easy
access to floating an image on the left or right, respectively.
The `.image-display` rule which was always found on a figure
has been simplified so that all figures have this styling. It is very
unlikely that a figure will be used outside the content area; and
at this time it seems like `figure` is as good an indicator that we
want this kind of styling as anything.
Now that images are all tagged with width and height values, we cannot
assume to modify these dimensions via CSS as it can cause the image to
lose its correct proportions. Until we find a better solition we must set
`height` to `auto` when the screen width is below 1300px to ensure that
these images maintain their proportions as they get shrunk to fit.
* docs(aio): general tidy up of image HTML in guides
Previously, the guides have a lot of inline image styling and unnecessary
use of the `image-display` css class.
Images over 700px are problematic for guide docs, so those have been given
specific widths and associated heights.
* docs(aio): use correct anchor for "back to the top" link
The `#toc` anchor does not work when the page is
wide enough that the TOC is floating to the side.
* build(aio): add `#top-of-page` to path variants for link checking
Since the `#top-of-page` is outside the rendered docs
the `checkAnchorLinks` processor doesn't find them
as valid targets for links.
Adding them as a `pathVariant` solves this problem
but will still catch links to docs that do not actually exist.
* fix(aio): ensure that headings clear floated images
* fix(aio): do not force live-example embedded image to 100% size
This made them look too big, generally. Leaving them with no size means
that they will look reasonable in large viewports and switch to 100% width
in narrow viewports.
