[improved] Grid compatible with browsers only support old flexbox (li…

…ke Android UC) @see #12 - fixes Col width - fixes AVG grid
robyth · May 18, 2016 · d72e6ce · d72e6ce
1 parent 814f8dc
commit d72e6ce
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 8 deletions.
diff --git 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
@@ -1,6 +1,6 @@
 # Notification
 
-通知组件，用于显示通知信息，
+通知组件，用于显示通知信息。
 
 ## 组件
 

diff --git 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
@@ -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
@@ -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
@@ -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;
+    }
   }
 }