From 81c4c1a23fa5fca4a3352e3a8711a79fa04d7b3b Mon Sep 17 00:00:00 2001 From: minwe Date: Mon, 16 Nov 2015 16:35:41 +0800 Subject: [PATCH] - adjust range style on Safari - update getting-started doc - update amazeui-touch path in examples --- docs/_utils/Prism/Prism.js | 4 ++-- docs/getting-started/getting-started.md | 3 +++ gulpfile.babel.js | 3 +++ kitchen-sink/{UI.js => amazeui-touch.js} | 0 kitchen-sink/pages/About.js | 2 +- kitchen-sink/pages/AccordionExample.js | 2 +- kitchen-sink/pages/BadgeExample.js | 2 +- kitchen-sink/pages/ButtonExample.js | 2 +- kitchen-sink/pages/CardExample.js | 2 +- kitchen-sink/pages/FormExample.js | 2 +- kitchen-sink/pages/GridExample.js | 2 +- kitchen-sink/pages/IconExample.js | 2 +- kitchen-sink/pages/ListExample.js | 2 +- kitchen-sink/pages/LoaderExample.js | 2 +- kitchen-sink/pages/ModalExample.js | 2 +- kitchen-sink/pages/NavBarExample.js | 2 +- kitchen-sink/pages/NotificationExample.js | 2 +- kitchen-sink/pages/OffCanvasExample.js | 6 +++--- kitchen-sink/pages/PopoverExample.js | 2 +- kitchen-sink/pages/SliderExample.js | 2 +- kitchen-sink/pages/TabBarExample.js | 2 +- kitchen-sink/pages/TabsExample.js | 2 +- kitchen-sink/pages/TypographyExample.js | 2 +- package.json | 2 +- src/scss/components/_container.scss | 10 +++++++++- src/scss/components/_form-range.scss | 1 + 26 files changed, 40 insertions(+), 25 deletions(-) rename kitchen-sink/{UI.js => amazeui-touch.js} (100%) diff --git a/docs/_utils/Prism/Prism.js b/docs/_utils/Prism/Prism.js index 17685f3..032783f 100644 --- a/docs/_utils/Prism/Prism.js +++ b/docs/_utils/Prism/Prism.js @@ -604,11 +604,11 @@ Prism.amtHighlight = function(options) { } var grammar = Prism.languages[language]; - var highlightedCode = text.replace("} from '../UI';", "} from 'amazeui-touch';"); var langClassName = `language-${grammar ? language : 'unknown'}`; + var highlightedCode; if (grammar) { - highlightedCode = Prism.highlight(highlightedCode, grammar); + highlightedCode = Prism.highlight(text, grammar); } if (ln) { diff --git a/docs/getting-started/getting-started.md b/docs/getting-started/getting-started.md index b4c7a4f..dbecf44 100644 --- a/docs/getting-started/getting-started.md +++ b/docs/getting-started/getting-started.md @@ -35,6 +35,9 @@ - [Flexbox](http://caniuse.com/#feat=flexbox) Amaze UI Touch 完全基于 flexbox 布局。由于[旧版规范](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)中没有 `flex-shrink`、`flex-basis` 对应的属性，导致只支持旧版规范的浏览器无法正常渲染布局，暂时[没有找到解决方法（望赐教）](https://github.com/amazeui/amazeui-touch/issues/12) :( 。 + + - **致各[浏览器毒瘤](http://www.zhihu.com/question/37361845)：**没有金刚钻，别揽瓷器活。乃们美其名曰自主研发，不如说是从不同体位搞残开源内核，浪费社会资源，阻碍行业发展。搞些狗皮膏功能用得着修改内核么？拜托乃们行行好，不要给前端开发者制造麻烦了！ + - **致从业者：**请推荐周围的人使用 Safari、Chrome、Firefox 等现代浏览器，抵制膏药浏览器，保障数据安全，节约社会资源，关爱你身边的前端开发者。 - [CSS3 Transitions](http://caniuse.com/#feat=css-transitions) - [CSS Animation](http://caniuse.com/#feat=css-animation) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 22dc3c4..8cda6f9 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -162,6 +162,9 @@ let bsf = (options) => { entries: options.entries, debug: !isProduction, transform: transform, + // path map for fake `amazeui-touch` in `./kitchen-sink/` + // @see https://github.com/vigetlabs/gulp-starter/issues/17 + paths: ['./kitchen-sink/'], })); }; diff --git a/kitchen-sink/UI.js b/kitchen-sink/amazeui-touch.js similarity index 100% rename from kitchen-sink/UI.js rename to kitchen-sink/amazeui-touch.js diff --git a/kitchen-sink/pages/About.js b/kitchen-sink/pages/About.js index c4bd835..5a24e84 100644 --- a/kitchen-sink/pages/About.js +++ b/kitchen-sink/pages/About.js @@ -5,7 +5,7 @@ import { Container, NavBar, Group, -} from '../UI'; +} from 'amazeui-touch'; const About = React.createClass({ render() { diff --git a/kitchen-sink/pages/AccordionExample.js b/kitchen-sink/pages/AccordionExample.js index 22084de..d8b1d47 100644 --- a/kitchen-sink/pages/AccordionExample.js +++ b/kitchen-sink/pages/AccordionExample.js @@ -3,7 +3,7 @@ import { Container, Accordion, Card, -} from '../UI'; +} from 'amazeui-touch'; const albums = [ { diff --git a/kitchen-sink/pages/BadgeExample.js b/kitchen-sink/pages/BadgeExample.js index 7ce408f..3dfcafa 100644 --- a/kitchen-sink/pages/BadgeExample.js +++ b/kitchen-sink/pages/BadgeExample.js @@ -3,7 +3,7 @@ import { Container, Badge, Group, -} from '../UI'; +} from 'amazeui-touch'; const styles = [ null, diff --git a/kitchen-sink/pages/ButtonExample.js b/kitchen-sink/pages/ButtonExample.js index 308c4ed..56bda87 100644 --- a/kitchen-sink/pages/ButtonExample.js +++ b/kitchen-sink/pages/ButtonExample.js @@ -6,7 +6,7 @@ import { ButtonGroup, Icon, Badge, -} from '../UI'; +} from 'amazeui-touch'; const ButtonExample = React.createClass({ render() { diff --git a/kitchen-sink/pages/CardExample.js b/kitchen-sink/pages/CardExample.js index 31255ec..59a42fd 100644 --- a/kitchen-sink/pages/CardExample.js +++ b/kitchen-sink/pages/CardExample.js @@ -2,7 +2,7 @@ import React from 'react'; import { Container, Card, -} from '../UI'; +} from 'amazeui-touch'; const header = ( diff --git a/kitchen-sink/pages/FormExample.js b/kitchen-sink/pages/FormExample.js index ec51e5c..6dbac81 100644 --- a/kitchen-sink/pages/FormExample.js +++ b/kitchen-sink/pages/FormExample.js @@ -9,7 +9,7 @@ import { Field, Button, Switch, -} from '../UI'; +} from 'amazeui-touch'; let fields = [ { diff --git a/kitchen-sink/pages/GridExample.js b/kitchen-sink/pages/GridExample.js index 6eeb600..7623c13 100644 --- a/kitchen-sink/pages/GridExample.js +++ b/kitchen-sink/pages/GridExample.js @@ -4,7 +4,7 @@ import { Group, Grid, Col -} from '../UI'; +} from 'amazeui-touch'; const GridExample = React.createClass({ render() { diff --git a/kitchen-sink/pages/IconExample.js b/kitchen-sink/pages/IconExample.js index 3215f17..7a522d8 100644 --- a/kitchen-sink/pages/IconExample.js +++ b/kitchen-sink/pages/IconExample.js @@ -4,7 +4,7 @@ import { Grid, Col, Icon, -} from '../UI'; +} from 'amazeui-touch'; const icons = ['back', 'bars', 'caret', 'check', 'close', 'code', 'compose', 'download', 'edit', 'forward', 'gear', 'home', 'info', 'list', 'more-vertical', 'more', 'pages', 'pause', 'person', 'play', 'plus', 'refresh', 'search', 'share', 'sound', 'sound2', 'sound3', 'sound4', 'star-filled', 'star', 'stop', 'trash', 'up-nav', 'up', 'right-nav', 'right', 'down-nav', 'down', 'left-nav', 'left']; diff --git a/kitchen-sink/pages/ListExample.js b/kitchen-sink/pages/ListExample.js index ff9405f..06e8d8b 100644 --- a/kitchen-sink/pages/ListExample.js +++ b/kitchen-sink/pages/ListExample.js @@ -6,7 +6,7 @@ import { Badge, Card, Switch, -} from '../UI'; +} from 'amazeui-touch'; const img = ; const img80 = ; diff --git a/kitchen-sink/pages/LoaderExample.js b/kitchen-sink/pages/LoaderExample.js index d8c8fae..7e1afef 100644 --- a/kitchen-sink/pages/LoaderExample.js +++ b/kitchen-sink/pages/LoaderExample.js @@ -4,7 +4,7 @@ import { Group, Loader, Field, -} from '../UI'; +} from 'amazeui-touch'; const LoaderExample = React.createClass({ getInitialState() { diff --git a/kitchen-sink/pages/ModalExample.js b/kitchen-sink/pages/ModalExample.js index eabe092..e2dfc02 100644 --- a/kitchen-sink/pages/ModalExample.js +++ b/kitchen-sink/pages/ModalExample.js @@ -6,7 +6,7 @@ import { Modal, Field, List, -} from '../UI'; +} from 'amazeui-touch'; const ModalExample = React.createClass({ open() { diff --git a/kitchen-sink/pages/NavBarExample.js b/kitchen-sink/pages/NavBarExample.js index 005a675..cefb0ab 100644 --- a/kitchen-sink/pages/NavBarExample.js +++ b/kitchen-sink/pages/NavBarExample.js @@ -4,7 +4,7 @@ import { Group, NavBar, amStyles, -} from '../UI'; +} from 'amazeui-touch'; const clickHandler = (item, e) => { e.preventDefault(); diff --git a/kitchen-sink/pages/NotificationExample.js b/kitchen-sink/pages/NotificationExample.js index 55e3214..5ac3598 100644 --- a/kitchen-sink/pages/NotificationExample.js +++ b/kitchen-sink/pages/NotificationExample.js @@ -5,7 +5,7 @@ import { Notification, Button, Field, -} from '../UI'; +} from 'amazeui-touch'; const NotificationExample = React.createClass({ getInitialState() { diff --git a/kitchen-sink/pages/OffCanvasExample.js b/kitchen-sink/pages/OffCanvasExample.js index fce5550..2776565 100644 --- a/kitchen-sink/pages/OffCanvasExample.js +++ b/kitchen-sink/pages/OffCanvasExample.js @@ -6,9 +6,9 @@ import { OffCanvas, OffCanvasTrigger, List, -} from '../UI'; +} from 'amazeui-touch'; -const OffcanvasExample = React.createClass({ +const OffCanvasExample = React.createClass({ render() { return ( @@ -66,4 +66,4 @@ const OffcanvasExample = React.createClass({ } }); -export default OffcanvasExample; +export default OffCanvasExample; diff --git a/kitchen-sink/pages/PopoverExample.js b/kitchen-sink/pages/PopoverExample.js index 20e3292..375a50c 100644 --- a/kitchen-sink/pages/PopoverExample.js +++ b/kitchen-sink/pages/PopoverExample.js @@ -7,7 +7,7 @@ import { PopoverTrigger, Field, List, -} from '../UI'; +} from 'amazeui-touch'; const PopoverExample = React.createClass({ render() { diff --git a/kitchen-sink/pages/SliderExample.js b/kitchen-sink/pages/SliderExample.js index 393a659..dfadaa1 100644 --- a/kitchen-sink/pages/SliderExample.js +++ b/kitchen-sink/pages/SliderExample.js @@ -4,7 +4,7 @@ import { Group, Button, Slider, -} from '../UI'; +} from 'amazeui-touch'; const onSelect = function(index, direction) { console.log('激活的幻灯片编号：', index, '，滚动方向：', direction); diff --git a/kitchen-sink/pages/TabBarExample.js b/kitchen-sink/pages/TabBarExample.js index 9829896..473a1bb 100644 --- a/kitchen-sink/pages/TabBarExample.js +++ b/kitchen-sink/pages/TabBarExample.js @@ -6,7 +6,7 @@ import { Icon, Badge, amStyles, -} from '../UI'; +} from 'amazeui-touch'; const TabBarDemo = React.createClass({ getInitialState() { diff --git a/kitchen-sink/pages/TabsExample.js b/kitchen-sink/pages/TabsExample.js index 474b896..68b7713 100644 --- a/kitchen-sink/pages/TabsExample.js +++ b/kitchen-sink/pages/TabsExample.js @@ -3,7 +3,7 @@ import { Container, Tabs, Card, -} from '../UI'; +} from 'amazeui-touch'; const albums = [ { diff --git a/kitchen-sink/pages/TypographyExample.js b/kitchen-sink/pages/TypographyExample.js index f281090..cb88d27 100644 --- a/kitchen-sink/pages/TypographyExample.js +++ b/kitchen-sink/pages/TypographyExample.js @@ -3,7 +3,7 @@ import React from 'react'; import { Container, Group, -} from '../UI' +} from 'amazeui-touch' const TypographyExample = React.createClass({ render() { diff --git a/package.json b/package.json index 2bff4ec..1b532c3 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "main": "lib/index.js", "scripts": { "start": "gulp", - "build": "gulp build", + "build": "env NODE_ENV=production gulp build", "test": "echo \"Error: no test specified\" && exit 1", "eslint": "./node_modules/.bin/eslint ./src/js/" }, diff --git a/src/scss/components/_container.scss b/src/scss/components/_container.scss index 21ec77a..082e468 100644 --- a/src/scss/components/_container.scss +++ b/src/scss/components/_container.scss @@ -104,7 +104,15 @@ // Fixes: https://github.com/amazeui/amazeui-touch/issues/8 // @see http://weblog.west-wind.com/posts/2015/Jun/05/IPad-Scroll-Issues-with-Fixed-Content - // -webkit-overflow-scrolling: touch; + // @see http://www.quirksmode.org/css/css2/overflowscrolling.html + // - 如果声明的值为 `touch`，在结合 Container 使用时，Modal 的遮罩层在 safari 中会被截取遮挡 + // 原因是 Safari 真的用了原生控件来实现，对于有 -webkit-overflow-scrolling的网页 + // 会创建一个UIScrollView，提供子layer给渲染模块使用 + // http://blog.csdn.net/hursing/article/details/9186199 + // - 可以尝试使用绝对定位的方式定位 kitchen-sink 中的 navbar 和 tabbar，以避免这一问题， + // 提高交互体验，具体可参考 Framework7 的实现方式 + // 总而言之，使用 flexbox 来布局页面主体还是会遇到一些问题 + -webkit-overflow-scrolling: auto; // introduce iOS style springy scrolling &:before, diff --git a/src/scss/components/_form-range.scss b/src/scss/components/_form-range.scss index 79a2a35..d9ca2c3 100644 --- a/src/scss/components/_form-range.scss +++ b/src/scss/components/_form-range.scss @@ -48,6 +48,7 @@ input[type="range"] { width: $range-thumb-height; height: $range-thumb-height; margin-top: -$margin; + border: none; // remove black border for Safari (iOS 9.2) @if hasValue($range-thumb-radius) { border-radius: $range-thumb-radius;