From d72e6cee6622f92683c1c2b591ee37c8a9a63936 Mon Sep 17 00:00:00 2001
From: minwe <minwe@yunshipei.com>
Date: Wed, 18 May 2016 16:16:10 +0800
Subject: [PATCH] [improved] Grid compatible with browsers only support old
 flexbox (like Android UC)

@see #12

- fixes Col width
- fixes AVG grid
---
 docs/navbar/api.md                  |  4 ++--
 docs/notification/api.md            |  2 +-
 kitchen-sink/index.html             |  2 +-
 kitchen-sink/pages/NavBarExample.js |  1 +
 src/scss/components/_grid.scss      | 16 ++++++++++++++++
 src/scss/helper/_mixins.scss        | 15 +++++++++++----
 6 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/docs/navbar/api.md b/docs/navbar/api.md
index 23d8e29..58a4988 100644
--- a/docs/navbar/api.md
+++ b/docs/navbar/api.md
@@ -76,12 +76,12 @@ NavBar 两侧的链接（`.navbar-nav-item`）应用 `display: inline-flex` 以
 ```javascript
 var ua = navigator.userAgent;
 if (/android/i.test(ua) && /ucbrowser/i.test(ua)) {
-  document.documentElement.className += ' ua-android-uc';
+  document.documentElement.className += ' ua-stupid-uc';
 }
 ```
 
 ```css
-.ua-android-uc .navbar-nav-itme {
+.ua-stupid-uc .navbar-nav-itme {
   display: inline-block;
 }
 ```
diff --git a/docs/notification/api.md b/docs/notification/api.md
index 737b68a..4dc57cf 100644
--- a/docs/notification/api.md
+++ b/docs/notification/api.md
@@ -1,6 +1,6 @@
 # Notification
 
-通知组件，用于显示通知信息，
+通知组件，用于显示通知信息。
 
 ## 组件
 
diff --git a/kitchen-sink/index.html b/kitchen-sink/index.html
index ec71411..6fc04e5 100644
--- a/kitchen-sink/index.html
+++ b/kitchen-sink/index.html
@@ -67,7 +67,7 @@
   <script>
     var ua = navigator.userAgent;
     if (/android/i.test(ua) && /ucbrowser/i.test(ua)) {
-      document.documentElement.className += ' ua-android-uc';
+      document.documentElement.className += ' ua-stupid-uc';
     }
   </script>
 </body>
diff --git a/kitchen-sink/pages/NavBarExample.js b/kitchen-sink/pages/NavBarExample.js
index cc9a7dd..848ae34 100644
--- a/kitchen-sink/pages/NavBarExample.js
+++ b/kitchen-sink/pages/NavBarExample.js
@@ -69,6 +69,7 @@ const NavBarExample = React.createClass({
   render() {
     return (
       <Container {...this.props}>
+        {/*<p>{navigator.userAgent}</p>*/}
         <Group
           header="颜色样式"
         >
diff --git a/src/scss/components/_grid.scss b/src/scss/components/_grid.scss
index 08a33ef..3bb4b0a 100644
--- a/src/scss/components/_grid.scss
+++ b/src/scss/components/_grid.scss
@@ -11,6 +11,9 @@
     flex: 0 0 $percent;
     // max-width prevents columns from wrapping early in IE10/11
     max-width: $percent;
+
+    // fuck android uc
+    @include flex-basis-fallback($percent)
   } @else if ($size == shrink) {
     flex: 0 0 auto;
     overflow: visible;
@@ -62,6 +65,8 @@
     padding: 0 $grid-padding $grid-padding;
     flex: 0 0 percentage(1 / $cols);
     max-width: percentage(1 / $cols);
+
+    @include flex-basis-fallback(percentage(1 / $cols));
   }
 }
 //@see https://css-tricks.com/filling-space-last-row-flexbox/
@@ -125,6 +130,17 @@
   }
 }
 
+// FUCK Android UC
+// AVG Grid flex-wrap fallback
+.#{$legacy-android-uc} {
+  [class*="#{$grid-prefix}-avg-"] {
+    > li,
+    > div {
+      display: inline-block;
+    }
+  }
+}
+
 // modifier: col shrink
 .#{$col-prefix}-shrink {
   @include grid-size(shrink);
diff --git a/src/scss/helper/_mixins.scss b/src/scss/helper/_mixins.scss
index b5851b4..ea93ae6 100644
--- a/src/scss/helper/_mixins.scss
+++ b/src/scss/helper/_mixins.scss
@@ -160,8 +160,11 @@
 // Browser compatibility
 // -----------------------------------------------------------------------------
 
+// FUCK Android UC class namespace
+$legacy-android-uc: 'ua-stupid-uc';
+
 // 在安卓里 flex 里的子元素一定要是 block 元素，如果用行内元素 可以用flex-inline。
-// (不过flex-inline兼容也不好，所以全改成块元素就好了)
+// (不过 flex-inline 兼容也不好，所以全改成块元素就好了)
 // @see https://github.com/amazeui/amazeui-touch/issues/12#issuecomment-169879658
 @mixin fixes-flexbox-for-andriod {
   display: block;
@@ -170,7 +173,9 @@
 // flex-basis fallback
 @mixin flex-basis-fallback($width) {
   @if $legacyFlexBoxSupport {
-    width: $width;
+    .#{$legacy-android-uc} & {
+      width: $width;
+    }
   }
 }
 
@@ -179,7 +184,9 @@
 // - 测试环境：MI4 / Android 6.0.1 / MIUI 7 6.4.14 开发版
 // - 负面影响: 产生左侧的链接 icon 和 tile 顺序不对（`order` 失效）问题 -> JS 中已调整顺序
 @mixin navbar-item-android-uc-fallback() {
-  .ua-android-uc & {
-    display: inline-block;
+  @if $legacyFlexBoxSupport {
+    .#{$legacy-android-uc} & {
+      display: inline-block;
+    }
   }
 }