Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: style the nav based on version type (#55628)

Browse source 
PR Close #55628
This commit is contained in:
twerske 2024-05-01 17:50:51 -07:00 committed by Andrew Kushnir
parent 91b007e58f
commit 8dbeafea47
5 changed files with 29 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
adev/src/app/core/layout/navigation/navigation.component.html
View file

@ -61,6 +61,9 @@
<nav
class="adev-nav-primary docs-scroll-hide"
[class.adev-nav-primary--open]="isMobileNavigationOpened()"
[class.adev-nav-primary--rc]="currentDocsVersionMode === 'rc'"
[class.adev-nav-primary--next]="currentDocsVersionMode === 'next'"
[class.adev-nav-primary--deprecated]="currentDocsVersionMode === 'deprecated'"
>
<button
type="button"
@ -122,7 +125,6 @@
</clipPath>
</defs>
</svg>
<div class="adev-beta-version">Beta Docs</div>
</a>
<!-- Version picker for v18+ -->

28
adev/src/app/core/layout/navigation/navigation.component.scss
View file

@ -69,6 +69,27 @@
padding-block-end: 2rem;
box-sizing: border-box;
&.adev-nav-primary--rc {
// change nav background to indicate this is the rc docs
background: linear-gradient(
140deg,
color-mix(in srgb, var(--orange-red), transparent 60%) 0%,
color-mix(in srgb, var(--vivid-pink), transparent 40%) 15%,
color-mix(in srgb, var(--electric-violet), transparent 70%) 25%,
color-mix(in srgb, var(--bright-blue), transparent 60%) 90%,
);
}
&.adev-nav-primary--next {
// change nav background to indicate this is the rc docs
background-color: color-mix(in srgb, var(--orange-red), transparent 60%);
}
&.adev-nav-primary--deprecated {
// change nav background to indicate this is an outdated version of the docs
background-color: color-mix(in srgb, var(--symbolic-gray), transparent 30%);
}
// div containing mobile close button and adev-nav_top
> div {
display: flex;
@ -129,13 +150,6 @@
flex-direction: row;
}
.adev-beta-version {
font-family: 'Material Symbols Outlined';
text-transform: uppercase;
text-align: center;
line-height: normal;
}
// version dropdown button
.adev-version-button {
border: 1px solid var(--senary-contrast);

2
adev/src/app/core/layout/navigation/navigation.component.ts
View file

@ -102,6 +102,8 @@ export class Navigation implements OnInit {
openedMenu: MenuType | null = null;
currentDocsVersion = this.versionManager.currentDocsVersion;
currentDocsVersionMode = this.versionManager.currentDocsVersion()?.version;
// Set the values of the search label and title only on the client, because the label is user-agent specific.
searchLabel = this.isBrowser
? isApple

2
adev/src/app/core/services/version-manager.service.ts
View file

@ -15,7 +15,7 @@ export interface Version {
url: string;
}
export type VersionMode = 'stable' | 'rc' | 'next' | number;
export type VersionMode = 'stable' | 'deprecated' | 'rc' | 'next' | number;
export const INITIAL_DOCS_VERSION = 17;
export const VERSION_PATTERN_PLACEHOLDER = '{{version}}';

4
adev/src/app/features/home/home.component.html
View file

@ -3,8 +3,8 @@
<div class="adev-top-content">
<!-- Banner(s) can be edited here! -->
<a href="https://goo.gle/angular-dot-dev" class="adev-banner" target="_blank">
<h1 tabindex="-1">Welcome to Angular.dev &#8212; the future home for Angular!</h1>
<p class="adev-banner-cta">Read about our beta launch</p>
<h1 tabindex="-1">Welcome to Angular.dev &#8212; the new home for Angular!</h1>
<p class="adev-banner-cta">Read about our launch</p>
</a>
</div>
</div>