honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: improve contrast of colors and body padding in boilerplate CSS (#40890) 

Shifts colors to pass WebAIM contrast checker and adds media
query so that body padding is smaller at smaller widths.
Body padding responsiveness will help on StackBlitz and small
screens.

PR Close #40890
This commit is contained in:
Kapunahele Wong 2021-02-12 15:57:24 -05:00 committed by Zach Arend
parent 54b088967a
commit 356d9a0537
3 changed files with 43 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
aio/content/examples/http/e2e/src/app.e2e-spec.ts
View File

@ -29,6 +29,26 @@ const checkLogForMessage = async (message: string) => {
};
describe('Http Tests', () => {
// It seems that currently Chrome/ChromeDriver fail to click a button that is just outside the
// viewport (or maybe only partially inside the viewport) - at least in headless mode.
// Possible solutions:
// 1. Click the element via JavaScript (with something like
// `browser.executeScript('arguments[0].click', elem)`).
// 2. Manually scroll the element into view before clicking:
// https://stackoverflow.com/questions/47776774/element-is-not-clickable-at-point-in-headless-mode-but-when-we-remove-headless
// 3. Explicitly set the window size to a bigger size:
// https://stackoverflow.com/questions/62003082/elementnotinteractableexception-element-not-interactable-element-has-zero-size
//
// Since the default 800x600 window size in headless mode (as used on CI) causes the
// `<app-config>` buttons to be in a position that trigger the above issue, we explicitly set the
// window size to 1920x1080 when in headless mode.
beforeAll(async () => {
const config = await browser.getProcessedConfig();
if (config.capabilities?.chromeOptions?.args?.includes('--headless')) {
browser.driver.manage().window().setSize(1920, 1080);
}
});
beforeEach(() => browser.get(''));
describe('Heroes', () => {

4
aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
View File

@ -193,7 +193,7 @@ describe('Tutorial part 6', () => {
for (const button of buttons) {
// Inherited styles from styles.css
expect(await button.getCssValue('font-family')).toBe('Arial, sans-serif');
expect(await button.getCssValue('font-family')).toBe('Arial, Helvetica, sans-serif');
expect(await button.getCssValue('border')).toContain('none');
expect(await button.getCssValue('padding')).toBe('1px 10px 3px');
expect(await button.getCssValue('border-radius')).toBe('4px');
@ -204,7 +204,7 @@ describe('Tutorial part 6', () => {
const addButton = element(by.buttonText('Add hero'));
// Inherited styles from styles.css
expect(await addButton.getCssValue('font-family')).toBe('Arial, sans-serif');
expect(await addButton.getCssValue('font-family')).toBe('Arial, Helvetica, sans-serif');
expect(await addButton.getCssValue('border')).toContain('none');
expect(await addButton.getCssValue('padding')).toBe('8px 24px');
expect(await addButton.getCssValue('border-radius')).toBe('4px');

39
aio/tools/examples/shared/boilerplate/common/src/styles.css
View File

@ -1,18 +1,26 @@
/* Global Styles */
h1 {
color: #369;
* {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: #264D73;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
padding: .5em;
max-width: 1000px;
margin: auto;
}
body, input[text], button {
@media (min-width: 600px) {
body {
padding: 2em;
}
}
body, input[text] {
color: #333;
font-family: Cambria, Georgia, serif;
}
@ -20,12 +28,12 @@ a {
cursor: pointer;
}
button {
font-family: Arial, sans-serif;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
color: black;
}
button:hover {
background-color: #cfd8dc;
@ -43,21 +51,16 @@ nav a {
margin-right: 10px;
margin-top: 10px;
display: inline-block;
background-color: #eee;
background-color: #e8e8e8;
color: #3d3d3d;
border-radius: 4px;
}
nav a:visited, a:link {
color: #607D8B;
}
nav a:hover {
color: #039be5;
background-color: #CFD8DC;
color: white;
background-color: #42545C;
}
nav a.active {
color: #039be5;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
color: white;
}