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

fix(docs-infra): limit max content width on "Contributors" and "Cheat sheet" pages (#41051) 

Previously, the content width on the "Contributors" page (`/about`) and
the "Cheat sheet" guide (`/guide/cheatsheet`) was unlimited (i.e. the
content would take up all the available space horizontally). This was
not very ergonomic on large screens. Especially on the "Cheat sheet"
guide there was a lot of unnecessary whitespace between the code shown
on the left column and the description shown on the right column.

This commit fixes this by setting a max content width for both pages of
84em (1404px by default). This keeps the content at a more manageable
width and avoids unnecessary whitespace.

Before (contributors): ![contributors page on 2500px before][1]
Before (cheatsheet): ![cheatsheet on 2500px before][2]
After (contributors): ![contributors page on 2500px after][3]
After (cheatsheet): ![cheatsheet on 2500px after][4]

[1]: https://user-images.githubusercontent.com/8604205/109394323-1bb1e800-792f-11eb-9cd6-c5b83e5ae921.png
[2]: https://user-images.githubusercontent.com/8604205/109394329-1fde0580-792f-11eb-91c0-4ed7ad408b17.png
[3]: https://user-images.githubusercontent.com/8604205/109394319-181e6100-792f-11eb-9463-a281dfe80448.png
[4]: https://user-images.githubusercontent.com/8604205/109394330-210f3280-792f-11eb-9837-ddc7a8d01d19.png

PR Close #41051
This commit is contained in:
George Kalpakas 2021-03-09 14:15:47 +02:00 committed by Andrew Kushnir
parent 4907d644bb
commit 304a32b655
3 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
aio/content/guide/cheatsheet.md
View File

@ -1,3 +1,5 @@
<div class="center-layout-wide">
<h1 class="no-toc">Cheat Sheet</h1> <h1 class="no-toc">Cheat Sheet</h1>
<table class="is-full-width is-fixed-layout"> <table class="is-full-width is-fixed-layout">
@ -390,3 +392,5 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
</tr> </tr>
</tbody></table> </tbody></table>
</div>

2
aio/content/marketing/about.html
View File

@ -2,7 +2,7 @@
<h1 class="banner-headline no-toc no-anchor">Angular Contributors</h1> <h1 class="banner-headline no-toc no-anchor">Angular Contributors</h1>
</header> </header>
<article> <article class="center-layout-wide">
<h2>Building For the Future</h2> <h2>Building For the Future</h2>
<p> <p>
Angular is built by a team of engineers who share a passion for making web development feel Angular is built by a team of engineers who share a passion for making web development feel

5
aio/src/styles/1-layouts/_layout-global.scss
View File

@ -12,6 +12,11 @@ body,
max-width: 62.5em; max-width: 62.5em;
} }
.center-layout-wide {
margin: 0 auto;
max-width: 84em;
}
.github-links + .content h1 { .github-links + .content h1 {
max-width: 90%; max-width: 90%;
} }