[fixed] make docs content scrollable on some Android UA, resolves #31

- tested on WeChat: Mozilla/5.0 (Linux; Android 5.0; SM-N9008V Build/LRX21V) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.2 TBS/036215 Safari/537.36 MicroMessenger/6.3.16.49_r03ae324.780 NetType/WIFI Language/zh_CN - tested on UC: Mozilla/5.0 (Linux; U; Android 5.0; zh-CN; SM-N9008V Build/LRX21V) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 UCBrowser/10.9.10.788 U3/0.8.0 Mobile Safari/534.30
robyth · May 18, 2016 · 814f8dc · 814f8dc
1 parent 992df1f
commit 814f8dc
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git a/docs/_app/js/ComponentDoc.js b/docs/_app/js/ComponentDoc.js
@@ -75,7 +75,6 @@ const ComponentDoc = React.createClass({
 
     return (
       <Container
-        direction="row"
         fill
         role="doc-main"
       >

diff --git a/docs/_app/style/_doc-common.scss b/docs/_app/style/_doc-common.scss
@@ -18,8 +18,6 @@ body {
 }
 
 .container-fill > .container-fill {
-  -webkit-flex: 1 1 0;
-  -ms-flex: 1 1 0;
   flex: 1 1 0;
   position: relative;
 }
@@ -34,30 +32,22 @@ body {
 
 .container-column,
 .container-row {
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   max-height: 100%;
   width: 100%;
 }
 
 .container-column > .container-fill,
 .container-row > .container-fill {
-  -webkit-flex: 1 1 0;
-  -ms-flex: 1 1 0;
   flex: 1 1 0;
   position: relative;
 }
 
 .container-column {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
 }
 
 .container-row {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
   height: auto;
 }

diff --git a/docs/_app/style/_doc-content.scss b/docs/_app/style/_doc-content.scss
@@ -1,5 +1,20 @@
+[role="doc-main"] {
+  display: flex;
+
+  @media (min-width: 641px) {
+    flex-direction: row;
+  }
+
+  @media (max-width: 640px) {
+    flex-direction: column;
+    height: 100%;
+  }
+}
+
 .doc-content-container {
-  flex: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
   overflow-x: hidden;
   overflow-y: auto;
 }

diff --git a/docs/_app/style/_doc-sidebar.scss b/docs/_app/style/_doc-sidebar.scss
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 180px;
+  flex-shrink: 0;
   background: #fafafa;
   border-right: 1px solid #f0f0f0;