kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-03-29 22:41:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve Navigation panel column layout for landscape/portrait

Browse Source 
Summary:
Improve column layout for _phone vs. tablet_ & _portrait vs landscape_ variations.
This change only affects handheld devices, or devices with really small (physical) screen dimensions.

See previews bellow:

Phone - landscape
![phone-landscape](https://cloud.githubusercontent.com/assets/829963/15448311/53863428-1f5e-11e6-9e05-d98587b9752f.png)

Phone - portrait
![phone-portrait](https://cloud.githubusercontent.com/assets/829963/15448309/5385eb9e-1f5e-11e6-8d12-6bda7e1d2e7f.png)

Tablet - landscape
![tablet-landscape](https://cloud.githubusercontent.com/assets/829963/15448312/538719a6-1f5e-11e6-9a2c-52d0c9109f09.png)

Tablet - portrait
![tablet-portrait](https://cloud.githubusercontent.com/assets/829963/15448310/53862636-1f5e-11e6-87ff-727568d7dd1f.png)
Closes https://github.com/facebook/react-native/pull/7669

Differential Revision: D3332676

Pulled By: vjeux

fbshipit-source-id: 8cfc1903e35fd62c82fcd8dd1e05a1e2062c555d
This commit is contained in:
Andrej Badin
2016-05-21 09:03:16 -07:00
committed by Facebook Github Bot 7
parent 6961fd23ba
commit 6d616d0e5b
1 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -481,7 +481,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
border-bottom: 0;
}
@media screen and (max-device-width: 960px) {
@media only screen and (max-device-width: 1024px) {
.nav-docs {
position: fixed;
z-index: 90;
@@ -555,18 +555,38 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
}
}
@media screen and (min-device-width: 641px) and (max-device-width: 1024px) {
/**
* Multicolumn layout for phone (landscape only) & tablet (regardless its screen orientation)/
*/
@media only screen and (min-device-width : 375px) and (max-device-width : 1024px) {
.nav-docs-section ul {
display: flex;
flex-wrap: wrap;
}
/* Display 2 columns on tablet */
.nav-docs-section li {
width: 100%;
}
}
/* 2 columns layout */
@media
/*Phone, landscape screen orientation*/
only screen and (min-device-width : 375px) and (max-device-width : 1024px) and (orientation : landscape),
/*Tablet, portrait screen orientation*/
only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.nav-docs-section li {
width: 50%;
}
}
/* 3 columns layout on tablet (landscape screen orientation) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.nav-docs-section li {
width: 33%;
}
}
.nav-blog li {
margin-bottom: 5px;
}