From af668c8f6e2f81c886f41438de776347c25002fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jir=CC=8Ci=CC=81=20Orsa=CC=81g?= Date: Thu, 31 Mar 2016 22:35:24 +0200 Subject: [PATCH 1/2] Add column hidding --- README.md | 21 +++-- example_app/src/routes/home/Home.js | 124 +++++++++++++-------------- example_app/src/routes/home/index.js | 2 +- src/column.react.js | 43 ++++++---- src/container.react.js | 5 +- src/grid.js | 28 ++++++ src/row.react.js | 5 +- 7 files changed, 136 insertions(+), 92 deletions(-) diff --git a/README.md b/README.md index bfb6914..829596b 100644 --- a/README.md +++ b/README.md @@ -26,13 +26,10 @@ export default class Page extends Component { - Text + Make a column @@ -42,6 +39,18 @@ export default class Page extends Component { } ``` +## Supported features + +### Multiple stacking option +```js +Adjust to the device +``` + +### Hiding columns +```js +Hidden forever +``` + ## Example app ```sh diff --git a/example_app/src/routes/home/Home.js b/example_app/src/routes/home/Home.js index 6fa509b..3d820a9 100644 --- a/example_app/src/routes/home/Home.js +++ b/example_app/src/routes/home/Home.js @@ -19,113 +19,113 @@ function Home({ news }) {

Fixed-width grid layout

radium-bootstrap-grid

Note: Original bootstrap doesn't support 480px breakpoint.

- + -
+
hidden
diff --git a/example_app/src/routes/home/index.js b/example_app/src/routes/home/index.js index 2c0805d..d1c52d7 100644 --- a/example_app/src/routes/home/index.js +++ b/example_app/src/routes/home/index.js @@ -15,6 +15,6 @@ export const path = '/'; export const action = async (state) => { const response = await fetch('/graphql?query={news{title,link,contentSnippet}}'); const { data } = await response.json(); - state.context.onSetTitle('React.js Starter Kit'); + state.context.onSetTitle('radium-bootstrap-grid'); return ; }; diff --git a/src/column.react.js b/src/column.react.js index 3df9d5d..e943bed 100644 --- a/src/column.react.js +++ b/src/column.react.js @@ -1,37 +1,46 @@ import Component from 'react-pure-render/component'; import Radium from 'radium'; import React, {PropTypes as RPT} from 'react'; -import { column, columnWidth } from './grid'; +import { column, columnHidden, columnWidth } from './grid'; @Radium export default class Column extends Component { static propTypes = { - children: RPT.node, - className: RPT.string, - large: RPT.number, - medium: RPT.number, - phone: RPT.number, - small: RPT.number, - style: RPT.object, - tablet: RPT.number + children: RPT.node, + lg: RPT.number, + lgHidden: RPT.bool, + md: RPT.number, + mdHidden: RPT.bool, + ms: RPT.number, + msHidden: RPT.bool, + sm: RPT.number, + smHidden: RPT.bool, + style: RPT.object, + xs: RPT.number, + xsHidden: RPT.bool } render() { - const { children, className, large, medium, phone, small, style, tablet } = this.props; + const { children, lg, lgHidden, md, mdHidden, ms, msHidden, sm, smHidden, style, xs, xsHidden, ...props } = this.props; return (
{children}
diff --git a/src/container.react.js b/src/container.react.js index 0ef9c0d..918ece7 100644 --- a/src/container.react.js +++ b/src/container.react.js @@ -8,15 +8,14 @@ export default class Container extends Component { static propTypes = { children: RPT.node, - className: RPT.string, style: RPT.object } render() { - const { className, children, style } = this.props; + const { children, style, ...props } = this.props; return ( -
+
{children}
diff --git a/src/grid.js b/src/grid.js index 75141b8..74ad944 100644 --- a/src/grid.js +++ b/src/grid.js @@ -99,6 +99,34 @@ function createColumns() { } export const columnWidth = createColumns() +export const columnHidden = { + xs: { + [`@media (max-width: ${variables.screenXSMax}px)`]: { + display: 'none' + } + }, + ms: { + [`@media (min-width: ${variables.screenMSMin}px) and (max-width: ${variables.screenMSMax}px)`]: { + display: 'none' + } + }, + sm: { + [`@media (min-width: ${variables.screenSMMin}px) and (max-width: ${variables.screenSMMax}px)`]: { + display: 'none' + } + }, + md: { + [`@media (min-width: ${variables.screenMDMin}px) and (max-width: ${variables.screenMDMax}px)`]: { + display: 'none' + } + }, + lg: { + [`@media (min-width: ${variables.screenLGMin}px)`]: { + display: 'none' + } + } +} + export const clearfix = { clear: 'both' } diff --git a/src/row.react.js b/src/row.react.js index 521940a..0727a61 100644 --- a/src/row.react.js +++ b/src/row.react.js @@ -8,15 +8,14 @@ export default class Row extends Component { static propTypes = { children: RPT.node, - className: RPT.string, style: RPT.object } render() { - const { className, children, style } = this.props; + const { children, style, ...props } = this.props; return ( -
+
{children}
From fa3738f4b1abebcaefe0c90c7a77de3a51a6b79d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jir=CC=8Ci=CC=81=20Orsa=CC=81g?= Date: Sun, 17 Apr 2016 18:06:52 +0200 Subject: [PATCH 2/2] New features --- example_app/src/routes/home/Home.js | 542 ++++++++++++++++++-------- example_app/src/routes/home/Home.scss | 1 + package.json | 2 +- src/column.react.js | 69 +++- src/grid.js | 91 ++++- 5 files changed, 537 insertions(+), 168 deletions(-) diff --git a/example_app/src/routes/home/Home.js b/example_app/src/routes/home/Home.js index 3d820a9..2aa4204 100644 --- a/example_app/src/routes/home/Home.js +++ b/example_app/src/routes/home/Home.js @@ -15,198 +15,420 @@ import { Column, Container, Row } from 'radium-bootstrap-grid'; function Home({ news }) { return (
-
-

Fixed-width grid layout

-

radium-bootstrap-grid

+

Note: Original bootstrap doesn't support 480px breakpoint.

- - - -
hidden
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
- - - + +

Example: Stacked-to-horizontal

+ +

radium-bootstrap-grid

+ + + +
{'md={1}'}
+ + +
{'md={1}'}
+ + +
{'md={1}'}
+ + +
{'md={1}'}
+ + +
{'md={1}'}
+ + +
{'md={1}'}
+ + +
{'md={1}'}
+ + +
{'md={1}'}
+ + +
{'md={1}'}
+ + +
{'md={1}'}
+ + +
{'md={1}'}
+ + +
{'md={1}'}
+ + + + +
{'md={8}'}
+ + +
{'md={4}'}
+ + + + +
{'md={4}'}
+ + +
{'md={4}'}
+ + +
{'md={4}'}
+ + + + +
{'md={6}'}
+ + +
{'md={6}'}
+ +

Original bootstrap

-
-
-
-
-
-
-
-
-
-
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
+
+
.col-md-8
+
+
+
.col-md-4
+
+
+
+
+
.col-md-4
+
+
+
.col-md-4
+
+
+
.col-md-4
+
+
+
+
+
.col-md-6
+
+
+
.col-md-6
+
+
+ +

Example: Mobile, tablet, desktop

+ +

radium-bootstrap-grid

+ + + +
+ {'xs={12} sm={6} md={8}'}
-
-
+ + +
+ {'xs={6} md={4}'}
-
-
+ + + + +
+ {'xs={6} sm={4}'}
-
-
+ + +
+ {'xs={6} sm={4}'}
-
-
+ +
+ +
+ {'xs={6} sm={4}'}
-
-
+ + + +

Original Bootstrap

+ +
+
+
+ .col-xs-12 .col-sm-6 .col-md-8
-
-
+
+
+
+ .col-xs-6 .col-md-4
-
-
+
+
+
+
+
+ .col-xs-6 .col-sm-4
-
-
+
+
+
+ .col-xs-6 .col-sm-4
-
-
+
+
+
+
+ .col-xs-6 .col-sm-4
-

Offsetting columns

+

Example: Column wrapping

radium-bootstrap-grid

-

TBD

+ + + +
{'xs={9}'}
+ + +
+ {'xs={4}'} +
+ Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto + a new line as one contiguous unit. +
+ + +
+ {'xs={6}'} +
+ Subsequent columns continue along the new line. +
+ +

Original Bootstrap

-
-
-
-
.col-md-4
+
+
+
.col-xs-9
+
+
+
+ .col-xs-4 +
+ Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto + a new line as one contiguous unit.
-
-
.col-md-4 .col-md-offset-4
+
+
+
+ .col-xs-6 +
+ Subsequent columns continue along the new line.
-
-
-
.col-md-3 .col-md-offset-3
+
+ +

Responsive column resets

+ +

radium-bootstrap-grid

+ + + +
+ {'xs={6} sm={3}'} +

Resize your viewport or check it out on your phone for an example.

-
-
.col-md-3 .col-md-offset-3
+ + +
{'xs={6} sm={3}'}
+ + +
+ + +
{'xs={6} sm={3}'}
+ + +
{'xs={6} sm={3}'}
+ + + +

Original Bootstrap

+ +
+
+
+ .col-xs-6 .col-sm-3 +

Resize your viewport or check it out on your phone for an example.

-
-
-
.col-md-6 .col-md-offset-3
+
+
.col-xs-6 .col-sm-3
+
+ +
+ +
+
.col-xs-6 .col-sm-3
+
+
+
.col-xs-6 .col-sm-3
+
+
+ +

Offsetting columns

+ +

radium-bootstrap-grid

+ + + +
{'md={4}'}
+ + +
{'md={4} mdOffset={4}'}
+ + + + +
{'md={3} mdOffset={3}'}
+ + +
{'md={3} mdOffset={3}'}
+ + + + +
{'md={6} mdOffset={3}'}
+ + + +

Original Bootstrap

+ +
+
+
.col-md-4
+
+
+
.col-md-4 .col-md-offset-4
+
+
+
+
+
.col-md-3 .col-md-offset-3
+
+
+
.col-md-3 .col-md-offset-3
+
+
+
+
+
.col-md-6 .col-md-offset-3
+
+
+ +

Nesting columns

+ +

radium-bootstrap-grid

+ + + +
Level 1: {'sm={9}'}
+ + +
Level 2: {'xs={8} sm={6}'}
+ + +
Level 2: {'xs={4} sm={6}'}
+ + + + + +

Original Bootstrap

+ +
+
+
Level 1: .col-sm-9
+
+
+
Level 2: .col-xs-8 .col-sm-6
+
+
+
Level 2: .col-xs-4 .col-sm-6
+
-
+

Column ordering

+ +

radium-bootstrap-grid

+ + + +
{'md={9} mdPush={3}'}
+ + +
{'md={3} mdPull={9}'}
+ + + +

Original Bootstrap

+ +
+
+
.col-md-9 .col-md-push-3
+
+
+
.col-md-3 .col-md-pull-9
+
+
+ +
); } diff --git a/example_app/src/routes/home/Home.scss b/example_app/src/routes/home/Home.scss index 5523bc3..ff3f4f8 100644 --- a/example_app/src/routes/home/Home.scss +++ b/example_app/src/routes/home/Home.scss @@ -28,6 +28,7 @@ .h2 { font-size: 28px; + padding-top: 10px; } .h3 { diff --git a/package.json b/package.json index dc6742d..fcd435f 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "rimraf": "^2.4.3" }, "peerDependencies": { - "radium": "^0.15.3", + "radium": ">=0.15.3", "react": "^0.14.3" } } diff --git a/src/column.react.js b/src/column.react.js index e943bed..66365d0 100644 --- a/src/column.react.js +++ b/src/column.react.js @@ -1,7 +1,7 @@ import Component from 'react-pure-render/component'; import Radium from 'radium'; import React, {PropTypes as RPT} from 'react'; -import { column, columnHidden, columnWidth } from './grid'; +import { column, columnHidden, columnOffset, columnPull, columnPush, columnWidth } from './grid'; @Radium export default class Column extends Component { @@ -10,19 +10,63 @@ export default class Column extends Component { children: RPT.node, lg: RPT.number, lgHidden: RPT.bool, + lgOffset: RPT.number, + lgPull: RPT.number, + lgPush: RPT.number, md: RPT.number, mdHidden: RPT.bool, + mdOffset: RPT.number, + mdPull: RPT.number, + mdPush: RPT.number, ms: RPT.number, msHidden: RPT.bool, + msOffset: RPT.number, + msPull: RPT.number, + msPush: RPT.number, sm: RPT.number, smHidden: RPT.bool, + smOffset: RPT.number, + smPull: RPT.number, + smPush: RPT.number, style: RPT.object, xs: RPT.number, - xsHidden: RPT.bool + xsHidden: RPT.bool, + xsOffset: RPT.number, + xsPull: RPT.number, + xsPush: RPT.number } render() { - const { children, lg, lgHidden, md, mdHidden, ms, msHidden, sm, smHidden, style, xs, xsHidden, ...props } = this.props; + const { + children, + lg, + lgHidden, + lgOffset, + lgPull, + lgPush, + md, + mdHidden, + mdOffset, + mdPull, + mdPush, + ms, + msHidden, + msOffset, + msPull, + msPush, + sm, + smHidden, + smOffset, + smPull, + smPush, + style, + xs, + xsHidden, + xsOffset, + xsPull, + xsPush, + ...props + } = this.props; return (
diff --git a/src/grid.js b/src/grid.js index 74ad944..94d0424 100644 --- a/src/grid.js +++ b/src/grid.js @@ -70,7 +70,7 @@ export const column = { } }; -function createColumns() { +function createColumnWidth() { const xs = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ width: `${(i / variables.gridColumns * 100).toFixed(5)}%` })) @@ -97,7 +97,94 @@ function createColumns() { return {xs, ms, sm, md, lg}; } -export const columnWidth = createColumns() +export const columnWidth = createColumnWidth() + +function createColumnOffset() { + const xs = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + marginLeft: `${(i / variables.gridColumns * 100).toFixed(5)}%` + })) + const ms = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + [`@media (min-width: ${variables.screenMSMin}px)`]: { + marginLeft: `${(i / variables.gridColumns * 100).toFixed(5)}%` + } + })) + const sm = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + [`@media (min-width: ${variables.screenSMMin}px)`]: { + marginLeft: `${(i / variables.gridColumns * 100).toFixed(5)}%` + } + })) + const md = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + [`@media (min-width: ${variables.screenMDMin}px)`]: { + marginLeft: `${(i / variables.gridColumns * 100).toFixed(5)}%` + } + })) + const lg = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + [`@media (min-width: ${variables.screenLGMin}px)`]: { + marginLeft: `${(i / variables.gridColumns * 100).toFixed(5)}%` + } + })) + + return {xs, ms, sm, md, lg}; +} +export const columnOffset = createColumnOffset() + +function createColumnPull() { + const xs = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + right: `${(i / variables.gridColumns * 100).toFixed(5)}%` + })) + const ms = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + [`@media (min-width: ${variables.screenMSMin}px)`]: { + right: `${(i / variables.gridColumns * 100).toFixed(5)}%` + } + })) + const sm = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + [`@media (min-width: ${variables.screenSMMin}px)`]: { + right: `${(i / variables.gridColumns * 100).toFixed(5)}%` + } + })) + const md = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + [`@media (min-width: ${variables.screenMDMin}px)`]: { + right: `${(i / variables.gridColumns * 100).toFixed(5)}%` + } + })) + const lg = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + [`@media (min-width: ${variables.screenLGMin}px)`]: { + right: `${(i / variables.gridColumns * 100).toFixed(5)}%` + } + })) + + return {xs, ms, sm, md, lg}; +} +export const columnPull = createColumnPull() + +function createColumnPush() { + const xs = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + left: `${(i / variables.gridColumns * 100).toFixed(5)}%` + })) + const ms = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + [`@media (min-width: ${variables.screenMSMin}px)`]: { + left: `${(i / variables.gridColumns * 100).toFixed(5)}%` + } + })) + const sm = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + [`@media (min-width: ${variables.screenSMMin}px)`]: { + left: `${(i / variables.gridColumns * 100).toFixed(5)}%` + } + })) + const md = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + [`@media (min-width: ${variables.screenMDMin}px)`]: { + left: `${(i / variables.gridColumns * 100).toFixed(5)}%` + } + })) + const lg = Array(variables.gridColumns + 1).fill(null).map((v, i) => ({ + [`@media (min-width: ${variables.screenLGMin}px)`]: { + left: `${(i / variables.gridColumns * 100).toFixed(5)}%` + } + })) + + return {xs, ms, sm, md, lg}; +} +export const columnPush = createColumnPush() export const columnHidden = { xs: {