refactor(docs-infra): minor refactorings/style changes (#42396)

This commit includes some minor refactorings and style changes as a
follow-up to PR #41129. (The changes were minor enough that didn't
warrant blocking the PR.)

PR Close #42396
This commit is contained in:
George Kalpakas 2021-05-30 22:11:25 +03:00 committed by Andrew Kushnir
parent aeb407296b
commit 3b97287758
6 changed files with 44 additions and 49 deletions

View File

@ -39,10 +39,10 @@ import { WindowToken, windowProvider } from 'app/shared/window';
import { CustomElementsModule } from 'app/custom-elements/custom-elements.module';
import { SharedModule } from 'app/shared/shared.module';
import { ThemeToggleComponent } from 'app/shared/theme-picker/theme-toggle.component';
import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module';
import {environment} from '../environments/environment';
import { ThemeToggleComponent } from './shared/theme-picker/theme-toggle.component';
import { environment } from '../environments/environment';
// These are the hardcoded inline svg sources to be used by the `<mat-icon>` component.
// tslint:disable: max-line-length
@ -171,7 +171,7 @@ export const svgIconProviders = [
SearchBoxComponent,
NotificationComponent,
TopMenuComponent,
ThemeToggleComponent
ThemeToggleComponent,
],
providers: [
Deployment,

View File

@ -1,5 +1,4 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import { ThemeStorage, ThemeToggleComponent } from './theme-toggle.component';
@ -7,18 +6,18 @@ class FakeThemeStorage implements ThemeStorage {
fakeStorage: string | null = null;
getThemePreference(): string | null {
return this.fakeStorage;
return this.fakeStorage;
}
setThemePreference(isDark: boolean): void {
this.fakeStorage = String(isDark);
this.fakeStorage = String(isDark);
}
}
let themeStorage: ThemeStorage;
// Verify that FakeThemeStorage behaves like ThemeStorage would
describe('FakeThemeStorage', () => {
let themeStorage: ThemeStorage;
beforeEach(() => {
themeStorage = new FakeThemeStorage();
});
@ -39,23 +38,19 @@ describe('FakeThemeStorage', () => {
});
let component: ThemeToggleComponent;
let fixture: ComponentFixture<ThemeToggleComponent>;
let debugElement: DebugElement;
describe('ThemeToggleComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ThemeToggleComponent ],
providers: [ { provide: ThemeStorage, useClass: FakeThemeStorage } ],
})
.compileComponents();
});
let component: ThemeToggleComponent;
let fixture: ComponentFixture<ThemeToggleComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ ThemeToggleComponent ],
providers: [ { provide: ThemeStorage, useClass: FakeThemeStorage } ],
});
fixture = TestBed.createComponent(ThemeToggleComponent);
component = fixture.componentInstance;
debugElement = fixture.debugElement;
fixture.detectChanges();
});
@ -81,12 +76,13 @@ describe('ThemeToggleComponent', () => {
});
it('should have the correct aria-label', () => {
expect(component.getToggleLabel()).toBe(`Switch to dark mode`);
expect(component.getToggleLabel()).toBe('Switch to dark mode');
component.toggleTheme();
expect(component.getToggleLabel()).toBe(`Switch to light mode`);
expect(component.getToggleLabel()).toBe('Switch to light mode');
});
});
function getToggleButton(): HTMLButtonElement {
return debugElement.query(By.css('button')).nativeElement;
}
// Helpers
function getToggleButton(): HTMLButtonElement {
return fixture.debugElement.query(By.css('button')).nativeElement;
}
});

View File

@ -16,18 +16,17 @@
color: if($is-dark-theme, constants.$offwhite, constants.$deepgray);
}
h6 {
color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray);
}
h2 {
border-top: 1px solid if($is-dark-theme, constants.$mediumgray, constants.$lightgray);
}
h6 {
color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray);
}
p,
ol,
ul,
ol,
li,
input,
a {

View File

@ -13,10 +13,6 @@
section#intro {
color: constants.$white;
.hero-logo {
background-image: url(/assets/images/logos/angular/angular.svg);
}
}
.announcement-bar {

View File

@ -46,6 +46,10 @@ section#intro {
margin: 0 auto -32px;
padding: 48px 0 0;
.hero-logo {
background-image: url(/assets/images/logos/angular/angular.svg);
}
@media (max-width: 780px) {
flex-direction: column;
justify-content: center;

View File

@ -203,24 +203,16 @@ mat-toolbar.app-toolbar {
flex-shrink: 0; // This is required for the icons to be displayed correctly in IE11.
height: 100%;
@media screen and (max-width: 350px) {
a[title="GitHub"] {
display: none;
}
}
a[title="Twitter"], a[title="YouTube"] {
@media screen and (max-width: 420px) {
display: none;
}
}
a {
display: flex;
align-items: center;
padding: 0;
margin: 24px 8px;
&:hover {
opacity: 0.8;
}
&:focus {
outline-offset: 8px;
}
@ -230,8 +222,16 @@ mat-toolbar.app-toolbar {
padding: 0;
}
&:hover {
opacity: 0.8;
@media screen and (max-width: 420px) {
&:not([title="GitHub"]) {
display: none;
}
}
@media screen and (max-width: 350px) {
&[title="GitHub"] {
display: none;
}
}
img {