From 95df0bd9887eae3c4c4df529900ca891e2adeede Mon Sep 17 00:00:00 2001 From: sottar Date: Fri, 30 Sep 2016 12:16:46 +0900 Subject: [PATCH 1/3] add OneLined example for GridLists --- .../components/GridList/ExampleOneLined.js | 83 +++++++++++++++++++ .../pages/components/GridList/Page.js | 10 +++ 2 files changed, 93 insertions(+) create mode 100644 docs/src/app/components/pages/components/GridList/ExampleOneLined.js diff --git a/docs/src/app/components/pages/components/GridList/ExampleOneLined.js b/docs/src/app/components/pages/components/GridList/ExampleOneLined.js new file mode 100644 index 00000000000000..65b83c15ed92c0 --- /dev/null +++ b/docs/src/app/components/pages/components/GridList/ExampleOneLined.js @@ -0,0 +1,83 @@ +import React from 'react'; +import {GridList, GridTile} from 'material-ui/GridList'; +import IconButton from 'material-ui/IconButton'; +import StarBorder from 'material-ui/svg-icons/toggle/star-border'; + +const styles = { + root: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + }, + gridList: { + width: 500, + height: 200, + flexWrap: 'nowrap', + overflowX: 'auto', + marginBottom: 24, + }, +}; + +const tilesData = [ + { + img: 'images/grid-list/00-52-29-429_640.jpg', + title: 'Breakfast', + author: 'jill111', + }, + { + img: 'images/grid-list/burger-827309_640.jpg', + title: 'Tasty burger', + author: 'pashminu', + }, + { + img: 'images/grid-list/camera-813814_640.jpg', + title: 'Camera', + author: 'Danson67', + }, + { + img: 'images/grid-list/morning-819362_640.jpg', + title: 'Morning', + author: 'fancycrave1', + }, + { + img: 'images/grid-list/hats-829509_640.jpg', + title: 'Hats', + author: 'Hans', + }, + { + img: 'images/grid-list/honey-823614_640.jpg', + title: 'Honey', + author: 'fancycravel', + }, + { + img: 'images/grid-list/vegetables-790022_640.jpg', + title: 'Vegetables', + author: 'jill111', + }, + { + img: 'images/grid-list/water-plant-821293_640.jpg', + title: 'Water plant', + author: 'BkrmadtyaKarki', + }, +]; + +const GridListExampleOneLined = () => ( +
+ + {tilesData.map((tile) => ( + } + > + + + ))} + +
+) + +export default GridListExampleOneLined; diff --git a/docs/src/app/components/pages/components/GridList/Page.js b/docs/src/app/components/pages/components/GridList/Page.js index 0506a65f712189..d84f9103e28909 100644 --- a/docs/src/app/components/pages/components/GridList/Page.js +++ b/docs/src/app/components/pages/components/GridList/Page.js @@ -10,6 +10,8 @@ import gridListExampleSimpleCode from '!raw!./ExampleSimple'; import GridListExampleSimple from './ExampleSimple'; import gridListExampleComplexCode from '!raw!./ExampleComplex'; import GridListExampleComplex from './ExampleComplex'; +import gridListExampleOneLinedCode from '!raw!./ExampleOneLined'; +import GridListExampleOneLined from './ExampleOneLined'; import gridListCode from '!raw!material-ui/GridList/GridList'; import gridTileCode from '!raw!material-ui/GridList/GridTile'; @@ -17,6 +19,7 @@ const descriptions = { simple: 'A simple example of a scrollable `GridList` containing a [Subheader](/#/components/subheader).', complex: 'This example demonstrates "featured" tiles, using the `rows` and `cols` props to adjust the size of the ' + 'tile. The tiles have a customised title, positioned at the top and with a custom gradient `titleBackground`.', + onelined: 'A example of arrange tiles for horizontal scrollable one line, using the `cols` props to adjust first view of tiles.', }; const GridListPage = () => ( @@ -37,6 +40,13 @@ const GridListPage = () => ( > + + + From 19d13fb8967c521593b6af0a2c4b6cd601ce107e Mon Sep 17 00:00:00 2001 From: sottar Date: Fri, 30 Sep 2016 13:06:19 +0900 Subject: [PATCH 2/3] modify build errors --- .../components/GridList/ExampleOneLined.js | 22 +++++++++---------- .../pages/components/GridList/Page.js | 3 ++- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/docs/src/app/components/pages/components/GridList/ExampleOneLined.js b/docs/src/app/components/pages/components/GridList/ExampleOneLined.js index 65b83c15ed92c0..c0fd1561d16de1 100644 --- a/docs/src/app/components/pages/components/GridList/ExampleOneLined.js +++ b/docs/src/app/components/pages/components/GridList/ExampleOneLined.js @@ -67,17 +67,17 @@ const GridListExampleOneLined = () => ( style={styles.gridList} cols="2.2" > - {tilesData.map((tile) => ( - } - > - - - ))} - + {tilesData.map((tile) => ( + } + > + + + ))} + -) +); export default GridListExampleOneLined; diff --git a/docs/src/app/components/pages/components/GridList/Page.js b/docs/src/app/components/pages/components/GridList/Page.js index d84f9103e28909..96dcdb31573ca8 100644 --- a/docs/src/app/components/pages/components/GridList/Page.js +++ b/docs/src/app/components/pages/components/GridList/Page.js @@ -19,7 +19,8 @@ const descriptions = { simple: 'A simple example of a scrollable `GridList` containing a [Subheader](/#/components/subheader).', complex: 'This example demonstrates "featured" tiles, using the `rows` and `cols` props to adjust the size of the ' + 'tile. The tiles have a customised title, positioned at the top and with a custom gradient `titleBackground`.', - onelined: 'A example of arrange tiles for horizontal scrollable one line, using the `cols` props to adjust first view of tiles.', + onelined: 'A example of arrange tiles for horizontal scrollable one line, using the `cols` props to adjust ' + + 'first view of tiles.', }; const GridListPage = () => ( From 964a06cdc38aa5c81f12ec63257161265fc0de23 Mon Sep 17 00:00:00 2001 From: sottar Date: Sun, 2 Oct 2016 05:04:22 +0900 Subject: [PATCH 3/3] update styles, title, datatype and comment --- .../pages/components/GridList/ExampleOneLined.js | 16 +++++++--------- .../components/pages/components/GridList/Page.js | 2 +- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/docs/src/app/components/pages/components/GridList/ExampleOneLined.js b/docs/src/app/components/pages/components/GridList/ExampleOneLined.js index c0fd1561d16de1..70278a71e7e7c4 100644 --- a/docs/src/app/components/pages/components/GridList/ExampleOneLined.js +++ b/docs/src/app/components/pages/components/GridList/ExampleOneLined.js @@ -4,17 +4,12 @@ import IconButton from 'material-ui/IconButton'; import StarBorder from 'material-ui/svg-icons/toggle/star-border'; const styles = { - root: { - display: 'flex', - flexWrap: 'wrap', - justifyContent: 'space-around', - }, gridList: { - width: 500, - height: 200, + display: 'flex', flexWrap: 'nowrap', + margin: 'auto', + width: 500, overflowX: 'auto', - marginBottom: 24, }, }; @@ -61,11 +56,14 @@ const tilesData = [ }, ]; +/** + * A example of arrange tiles for horizontal scrollable one line, using the `cols` props to adjust first view of tiles. + */ const GridListExampleOneLined = () => (
{tilesData.map((tile) => ( (