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

fix(docs-infra): avoid truncating several API list items (#41051) 

Previously, with the min width of 220px per item, several API list items
were truncated.

This commit increases the min width per item to 330px, which allows
almost all items to have their full text shown. It also increases the
API list page's max content width from 50em (800px) to 62.5em (1000px)
to allow items to be shown on three columns despite their increased
width. This increase in the content width shouldn't negatively affect
UX, since the API list page uses a multi-column layout (i.e. it does not
contain 1000px-lines of text.)

Before: ![api-list before][1]
After: ![api-list after][2]

[1]: https://user-images.githubusercontent.com/8604205/109396457-5f5e1f00-793a-11eb-80cf-1418f409325a.png
[2]: https://user-images.githubusercontent.com/8604205/109396659-499d2980-793b-11eb-95d3-f54250f7fab5.png

PR Close #41051
This commit is contained in:
George Kalpakas 2021-03-09 14:15:48 +02:00 committed by Andrew Kushnir
parent a926fd020b
commit 1054d554d8
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
aio/content/marketing/api.html
View File

@ -1,2 +1,4 @@
<h1 class="no-toc">API List</h1>
<aio-api-list></aio-api-list>
<div class="center-layout">
<h1 class="no-toc">API List</h1>
<aio-api-list></aio-api-list>
</div>

2
aio/src/styles/1-layouts/_content-layout.scss
View File

@ -18,7 +18,7 @@
padding: 80px 1rem 1rem;
}
@include marketing-pages($extraSelectors: ('.page-guide-cheatsheet'), $nestParentSelector: true) {
@include marketing-pages($extraSelectors: ('.page-api', '.page-guide-cheatsheet'), $nestParentSelector: true) {
max-width: none;
}

6
aio/src/styles/2-modules/_api-list.scss
View File

@ -89,9 +89,7 @@ aio-api-list {
.api-list-container {
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 1100px;
padding: 16px 16px 16px 0;
padding: 16px 0;
position: relative;
@media handheld and (max-width: $phone-breakpoint),
@ -124,7 +122,7 @@ aio-api-list {
float: left;
width: 33%;
overflow: hidden;
min-width: 220px;
min-width: 330px;
text-overflow: ellipsis;
white-space: nowrap;