status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-13 19:15:05 +00:00
Code Issues Projects Releases Wiki Activity

Docs component grid laid out with CSS Grid

Browse Source 
Summary:
The component grid on Components and APIs
https://facebook.github.io/react-native/docs/components-and-apis.html
has a set height for each item. This causes content to overflow their
containers.

Before:
![image](https://user-images.githubusercontent.com/1337003/29373309-b67c0dea-82a5-11e7-9850-003d66571df2.png)

After:
![image](https://user-images.githubusercontent.com/1337003/29373337-d32b7214-82a5-11e7-8d12-958be9ff81aa.png)

I've quickly fixed this with CSS Grid. There is much more room for
improvement, but this prevents it being visually broken.

Tested by locally rendering. Jest passes OK.

Run docs website locally. Visually confirm correct rendering.
Closes https://github.com/facebook/react-native/pull/15514

Reviewed By: ericvicenti

Differential Revision: D5641555

Pulled By: TheSavior

fbshipit-source-id: 3b4002e06066c3c052a75ba15a74521e6e1e7d40
This commit is contained in:
Jodi Warren 2017-08-16 12:56:37 -07:00 committed by Facebook Github Bot
parent 6ad7e8281b
commit da9e51c92d
1 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
website/src/react-native/css/react-native.css
View File

@ -1764,6 +1764,13 @@ input#algolia-doc-search:focus {
margin: 2px;
}
@supports (display:grid) {
.component-grid {
display: grid;
grid-gap: 22px;
}
}
@media only screen and (min-device-width: 768px) {
.component-grid {
width: 768px;
@ -1777,6 +1784,17 @@ input#algolia-doc-search:focus {
margin: 0 22px 22px auto;
vertical-align: top;
}
@supports (display:grid) {
.component-grid {
grid-template-columns: repeat(3, 1fr);
}
.component {
width: auto;
height: auto;
margin: 0;
}
}
}
/** Showcase **/