From 6d616d0e5b92ee2f26efd0392c8a98ccd8806fe4 Mon Sep 17 00:00:00 2001
From: Andrej Badin <contact@andrejbadin.com>
Date: Sat, 21 May 2016 09:03:16 -0700
Subject: [PATCH] Improve Navigation panel column layout for landscape/portrait

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
---
 website/src/react-native/css/react-native.css | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index c768d8370..6209da651 100644
--- a/website/src/react-native/css/react-native.css
+++ b/website/src/react-native/css/react-native.css
@@ -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;
 }