From 01d6a7b52e2540f7bfa235cdf3ddd5b2750d0e1d Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 22 Mar 2016 15:00:50 +0530 Subject: [PATCH 1/6] AS#102852633435507, Create Carousel React component -- Carousel component created -- It behaves same on both mobile and desktop -- Swipe is not yet supported for mobile devices --- components/Carousel/Carousel.jsx | 122 ++++++++++++++++++++++ components/Carousel/Carousel.scss | 48 +++++++++ components/Carousel/CarouselExamples.jsx | 40 +++++++ components/Carousel/CarouselExamples.scss | 17 +++ components/Carousel/placeholder.svg | 4 + components/Icons/LeftArrowIcon.jsx | 19 ++++ components/Icons/PlaceholderIcon.jsx | 12 +++ components/Icons/RightArrowIcon.jsx | 17 +++ components/Router/Router.cjsx | 3 + 9 files changed, 282 insertions(+) create mode 100644 components/Carousel/Carousel.jsx create mode 100644 components/Carousel/Carousel.scss create mode 100644 components/Carousel/CarouselExamples.jsx create mode 100644 components/Carousel/CarouselExamples.scss create mode 100644 components/Carousel/placeholder.svg create mode 100644 components/Icons/LeftArrowIcon.jsx create mode 100644 components/Icons/PlaceholderIcon.jsx create mode 100644 components/Icons/RightArrowIcon.jsx diff --git a/components/Carousel/Carousel.jsx b/components/Carousel/Carousel.jsx new file mode 100644 index 000000000..e8278c505 --- /dev/null +++ b/components/Carousel/Carousel.jsx @@ -0,0 +1,122 @@ +require('./Carousel.scss') +import classNames from 'classnames' + +import React, { Component } from 'react' +import ReactDOM from 'react-dom' + +import LeftArrowIcon from '../Icons/LeftArrowIcon' +import RightArrowIcon from '../Icons/RightArrowIcon' + +export default class Carousel extends Component { + componentWillMount() { + this.handleResize = this.handleResize.bind(this) + window.addEventListener('resize', this.handleResize) + this.handlePageUp = this.handlePageUp.bind(this) + this.handlePageDown = this.handlePageDown.bind(this) + this.setState({firstVisibleItem: this.props.firstVisibleItem || 0}) + } + + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize) + } + + handleResize() { + this.validatePagers() + } + + componentDidMount() { + this.validatePagers() + } + + componentDidUpdate() { + this.validatePagers() + } + + validatePagers() { + const pageDownClass = classNames({ + 'page-down' : true, + 'hidden': this.state.firstVisibleItem == 0 + }) + const pageUpClass = classNames({ + 'page-up' : true, + 'hidden': this.lastElementVisible(this.state.firstVisibleItem) + }) + const node = ReactDOM.findDOMNode(this) + const pageDownNode = node.querySelector(".page-down") + const pageUpNode = node.querySelector(".page-up") + pageDownNode.className = pageDownClass + pageUpNode.className = pageUpClass + } + + + lastElementVisible(firstVisibleItem) { + const node = ReactDOM.findDOMNode(this) + const parentNode = node.parentNode + const maxWidth = parentNode.getBoundingClientRect().width + const visibleAreaNode = node.querySelector(".visible-area") + visibleAreaNode.style.width = maxWidth + "px" + const itemNodes = visibleAreaNode.children + let width = 0 + if (firstVisibleItem > 0) { + // if first item is not visible, account 20px for page-down element + width += 20 + // account the right margin for page-down (see Carousel.scss) + width += 15 + } + for (var i = 0; i < itemNodes.length; i++) { + var itemNode = itemNodes[i] + width += itemNode.getBoundingClientRect().width + if (i < itemNodes.length - 1) { + // account 30px for every carousel-item (see Carousel.scss) + width += 30 + } + if (width > maxWidth) { + return false + } + } + return true + } + + handlePageUp() { + if (!this.lastElementVisible(this.state.firstVisibleItem + 1)) { + const nextFirstVisibleItem = this.state.firstVisibleItem + 1 + this.setState({firstVisibleItem: nextFirstVisibleItem}) + } + } + + handlePageDown() { + if (this.state.firstVisibleItem > 0) { + const nextFirstVisibleItem = this.state.firstVisibleItem - 1 + this.setState({firstVisibleItem: nextFirstVisibleItem}) + } + } + + render() { + const carouselItem = (item, idx) => { + if (idx < this.state.firstVisibleItem) { + return + } + + return ( +
+ {item} +
+ ) + } + const windowWidth = window.innerWidth + + return ( +
+
+ +
+
+ { this.props.children.map(carouselItem) } +
+
+ +
+
+ ) + } +} \ No newline at end of file diff --git a/components/Carousel/Carousel.scss b/components/Carousel/Carousel.scss new file mode 100644 index 000000000..7b6be6f4b --- /dev/null +++ b/components/Carousel/Carousel.scss @@ -0,0 +1,48 @@ +@import 'topcoder/tc-includes'; + +$pager-bg-color: #737380; + +.Carousel { + display: flex; + flex-direction: row; + &.hidden { + // visibility: hidden; + } + + .page-down { + width: 20px; + margin-right: 15px; + background-color: $pager-bg-color; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + &.hidden { + display: none; + } + } + + .page-up { + width: 20px; + background-color: $pager-bg-color; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + &.hidden { + display: none; + } + } + + .visible-area { + display: flex; + flex-direction: row; + overflow: hidden; + + .carousel-item:not(:first-child) { + margin-left: 30px; + } + } +} \ No newline at end of file diff --git a/components/Carousel/CarouselExamples.jsx b/components/Carousel/CarouselExamples.jsx new file mode 100644 index 000000000..e4301aec7 --- /dev/null +++ b/components/Carousel/CarouselExamples.jsx @@ -0,0 +1,40 @@ +import React from 'react' +import Carousel from './Carousel' + +import StandardListItem from '../StandardListItem/StandardListItem' +import PlaceholderIcon from '../Icons/PlaceholderIcon' + +require('./CarouselExamples.scss') + + +const CarouselExamples = () => ( + +
+

With limited width

+
+ + + + + +
+

With full width

+
+ + + + + +
+

With limited width and custom first visible element

+
+ + + + + +
+
+) + +module.exports = CarouselExamples diff --git a/components/Carousel/CarouselExamples.scss b/components/Carousel/CarouselExamples.scss new file mode 100644 index 000000000..d6d4c8b34 --- /dev/null +++ b/components/Carousel/CarouselExamples.scss @@ -0,0 +1,17 @@ +@import 'topcoder/tc-includes'; + +.Carousel { + .StandardListItem { + padding: 0px; + } +} + +.CarouselExamples { + > p { + border: 1px solid $accent-gray; + margin: 20px 0px; + } + .limited-width { + width: 200px; + } +} \ No newline at end of file diff --git a/components/Carousel/placeholder.svg b/components/Carousel/placeholder.svg new file mode 100644 index 000000000..d3e7220e5 --- /dev/null +++ b/components/Carousel/placeholder.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/components/Icons/LeftArrowIcon.jsx b/components/Icons/LeftArrowIcon.jsx new file mode 100644 index 000000000..a4e5b13fe --- /dev/null +++ b/components/Icons/LeftArrowIcon.jsx @@ -0,0 +1,19 @@ +import React from 'react' + +const LeftArrowIcon = ({ width, height, fill }) => { + const f = (fill || '#A3A3AE') + return ( + + ico-arrow-big-left + Created with Sketch. + + + + + + + + ) +} + +export default LeftArrowIcon diff --git a/components/Icons/PlaceholderIcon.jsx b/components/Icons/PlaceholderIcon.jsx new file mode 100644 index 000000000..66beca645 --- /dev/null +++ b/components/Icons/PlaceholderIcon.jsx @@ -0,0 +1,12 @@ +import React from 'react' + +const PlaceholderIcon = ({ width, height, fill }) => { + const f = (fill || '#B47DD6') + return ( + + + + ) +} + +export default PlaceholderIcon \ No newline at end of file diff --git a/components/Icons/RightArrowIcon.jsx b/components/Icons/RightArrowIcon.jsx new file mode 100644 index 000000000..73c438db9 --- /dev/null +++ b/components/Icons/RightArrowIcon.jsx @@ -0,0 +1,17 @@ +import React from 'react' + +const RightArrowIcon = ({ width, height, fill }) => { + const f = (fill || '#A3A3AE') + return ( + + ico-arrow-big-right + Created with Sketch. + + + + + + ) +} + +export default RightArrowIcon diff --git a/components/Router/Router.cjsx b/components/Router/Router.cjsx index 5c097682b..3384204b1 100644 --- a/components/Router/Router.cjsx +++ b/components/Router/Router.cjsx @@ -27,6 +27,7 @@ SearchSuggestionsExamples = require '../SearchSuggestions/SearchSuggestionsE SearchBarExample = require '../SearchBar/SearchBarExamples.jsx' NavbarExample = require '../Navbar/NavbarExample.jsx' TCFooterExamples = require '../TCFooter/TCFooterExamples.jsx' +CarouselExamples = require '../Carousel/CarouselExamples.jsx' { Router, Route, Link, IndexRoute, browserHistory } = require 'react-router' @@ -75,6 +76,8 @@ component = -> + + From dab88ea74b8f030d9edbcca674d806b84e605e92 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 22 Mar 2016 15:14:32 +0530 Subject: [PATCH 2/6] AS#102852633435507, Create Carousel React component -- Fixing lint errors --- components/Carousel/Carousel.jsx | 17 ++++++++--------- components/Carousel/CarouselExamples.jsx | 19 +++++++++---------- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/components/Carousel/Carousel.jsx b/components/Carousel/Carousel.jsx index e8278c505..6e6ea3bff 100644 --- a/components/Carousel/Carousel.jsx +++ b/components/Carousel/Carousel.jsx @@ -35,15 +35,15 @@ export default class Carousel extends Component { validatePagers() { const pageDownClass = classNames({ 'page-down' : true, - 'hidden': this.state.firstVisibleItem == 0 + hidden: this.state.firstVisibleItem === 0 }) const pageUpClass = classNames({ 'page-up' : true, - 'hidden': this.lastElementVisible(this.state.firstVisibleItem) + hidden: this.lastElementVisible(this.state.firstVisibleItem) }) const node = ReactDOM.findDOMNode(this) - const pageDownNode = node.querySelector(".page-down") - const pageUpNode = node.querySelector(".page-up") + const pageDownNode = node.querySelector('.page-down') + const pageUpNode = node.querySelector('.page-up') pageDownNode.className = pageDownClass pageUpNode.className = pageUpClass } @@ -53,8 +53,8 @@ export default class Carousel extends Component { const node = ReactDOM.findDOMNode(this) const parentNode = node.parentNode const maxWidth = parentNode.getBoundingClientRect().width - const visibleAreaNode = node.querySelector(".visible-area") - visibleAreaNode.style.width = maxWidth + "px" + const visibleAreaNode = node.querySelector('.visible-area') + visibleAreaNode.style.width = maxWidth + 'px' const itemNodes = visibleAreaNode.children let width = 0 if (firstVisibleItem > 0) { @@ -63,8 +63,8 @@ export default class Carousel extends Component { // account the right margin for page-down (see Carousel.scss) width += 15 } - for (var i = 0; i < itemNodes.length; i++) { - var itemNode = itemNodes[i] + for (let i = 0; i < itemNodes.length; i++) { + const itemNode = itemNodes[i] width += itemNode.getBoundingClientRect().width if (i < itemNodes.length - 1) { // account 30px for every carousel-item (see Carousel.scss) @@ -103,7 +103,6 @@ export default class Carousel extends Component { ) } - const windowWidth = window.innerWidth return (
diff --git a/components/Carousel/CarouselExamples.jsx b/components/Carousel/CarouselExamples.jsx index e4301aec7..54597e001 100644 --- a/components/Carousel/CarouselExamples.jsx +++ b/components/Carousel/CarouselExamples.jsx @@ -2,7 +2,6 @@ import React from 'react' import Carousel from './Carousel' import StandardListItem from '../StandardListItem/StandardListItem' -import PlaceholderIcon from '../Icons/PlaceholderIcon' require('./CarouselExamples.scss') @@ -13,25 +12,25 @@ const CarouselExamples = () => (

With limited width

- - - + + +

With full width

- - - + + +

With limited width and custom first visible element

- - - + + +
From 3912480f5fc06bcbaea767a568fe8186c11bf927 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 22 Mar 2016 18:07:29 +0530 Subject: [PATCH 3/6] AS#101448607854424, Create Sub Navigation React component -- Added component for SubNav using the Carousel component. --- components/Router/Router.cjsx | 3 ++ components/SubNav/SubNav.jsx | 51 +++++++++++++++++++++++++++ components/SubNav/SubNav.scss | 22 ++++++++++++ components/SubNav/SubNavExamples.jsx | 24 +++++++++++++ components/SubNav/SubNavExamples.scss | 8 +++++ components/SubNav/placeholder.svg | 4 +++ 6 files changed, 112 insertions(+) create mode 100644 components/SubNav/SubNav.jsx create mode 100644 components/SubNav/SubNav.scss create mode 100644 components/SubNav/SubNavExamples.jsx create mode 100644 components/SubNav/SubNavExamples.scss create mode 100644 components/SubNav/placeholder.svg diff --git a/components/Router/Router.cjsx b/components/Router/Router.cjsx index 3384204b1..1bd920a27 100644 --- a/components/Router/Router.cjsx +++ b/components/Router/Router.cjsx @@ -28,6 +28,7 @@ SearchBarExample = require '../SearchBar/SearchBarExamples.jsx' NavbarExample = require '../Navbar/NavbarExample.jsx' TCFooterExamples = require '../TCFooter/TCFooterExamples.jsx' CarouselExamples = require '../Carousel/CarouselExamples.jsx' +SubNavExamples = require '../SubNav/SubNavExamples.jsx' { Router, Route, Link, IndexRoute, browserHistory } = require 'react-router' @@ -78,6 +79,8 @@ component = -> + + diff --git a/components/SubNav/SubNav.jsx b/components/SubNav/SubNav.jsx new file mode 100644 index 000000000..eceafc99d --- /dev/null +++ b/components/SubNav/SubNav.jsx @@ -0,0 +1,51 @@ +require('./SubNav.scss') + +import React, { Component } from 'react' +import Carousel from '../Carousel/Carousel' +import StandardListItem from '../StandardListItem/StandardListItem' + +const tcSubNav = { + compete : [ + {img: require('./placeholder.svg'), text: 'Design Challenges', link: '/challenges/design/active'}, + {img: require('./placeholder.svg'), text: 'Development Challenges', link: '/challenges/develop/active'}, + {img: require('./placeholder.svg'), text: 'Data Science Challenges', link: '/challenges/data/active'}, + // TODO dynamic domain + {img: require('./placeholder.svg'), text: 'Competitive Programming', link: 'https://arena.topcoder.com'} + ], + learn : [ + {img: require('./placeholder.svg'), text: 'Getting Started', link: '/getting-started'}, + {img: require('./placeholder.svg'), text: 'Design Challenges', link: '/community/design'}, + {img: require('./placeholder.svg'), text: 'Development Challenges', link: '/community/develop'}, + {img: require('./placeholder.svg'), text: 'Data Science Challenges', link: '/community/data-science'}, + {img: require('./placeholder.svg'), text: 'Competitive Programming', link: '/community/competitive programming/'} + ], + community : [ + {img: require('./placeholder.svg'), text: 'Overview', link: '/community/members'}, + // TODO dynamic domain + {img: require('./placeholder.svg'), text: 'TCO16', link: '//tco16.topcoder.com'}, + {img: require('./placeholder.svg'), text: 'Programs', link: '/community/member-overview'}, + // TODO dynamic domain + {img: require('./placeholder.svg'), text: 'Forums', link: '//apps.topcoder.com/forums'}, + {img: require('./placeholder.svg'), text: 'Statistics', link: '/community/statistics'}, + {img: require('./placeholder.svg'), text: 'Events', link: '/community/events'}, + {img: require('./placeholder.svg'), text: 'Blog', link: '/blog'} + ] +} + +const SubNav = ({ primaryMenu = 'compete' }) => { + var subNav = tcSubNav[primaryMenu] + const subNavMap = (item, idx) => { + return ( + + ) + } + return ( +
+ + { subNav.map(subNavMap) } + +
+ ) +} + +export default SubNav \ No newline at end of file diff --git a/components/SubNav/SubNav.scss b/components/SubNav/SubNav.scss new file mode 100644 index 000000000..9d25da157 --- /dev/null +++ b/components/SubNav/SubNav.scss @@ -0,0 +1,22 @@ +@import 'topcoder/tc-includes'; + +$subnav-item-bg-color: #B47DD6; +$subnav-item-text-color: #7A7F83; + +.SubNav { + padding: 20px 0px; + background-color: $accent-gray-dark; + + .StandardListItem { + padding: 0px; + + .label { + color: $subnav-item-text-color; + } + + .label:active, + .label:hover { + color: $white; + } + } +} \ No newline at end of file diff --git a/components/SubNav/SubNavExamples.jsx b/components/SubNav/SubNavExamples.jsx new file mode 100644 index 000000000..ebd0c60ab --- /dev/null +++ b/components/SubNav/SubNavExamples.jsx @@ -0,0 +1,24 @@ +import React from 'react' +import SubNav from './SubNav' + +require('./SubNavExamples.scss') + +const SubNavExamples = () => ( + +
+

Compete Sub Navigation

+
+ +
+

Learn Sub Navigation

+
+ +
+

Community Sub Navigation

+
+ +
+
+) + +module.exports = SubNavExamples diff --git a/components/SubNav/SubNavExamples.scss b/components/SubNav/SubNavExamples.scss new file mode 100644 index 000000000..81bc13175 --- /dev/null +++ b/components/SubNav/SubNavExamples.scss @@ -0,0 +1,8 @@ +@import 'topcoder/tc-includes'; + +.SubNavExamples { + > p { + border: 1px solid $accent-gray; + margin: 20px 0px; + } +} \ No newline at end of file diff --git a/components/SubNav/placeholder.svg b/components/SubNav/placeholder.svg new file mode 100644 index 000000000..d3e7220e5 --- /dev/null +++ b/components/SubNav/placeholder.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file From 04d7a699b4537684ed0709d9bab111d34fcfd3d9 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 22 Mar 2016 18:18:08 +0530 Subject: [PATCH 4/6] AS#101448607854424, Create Sub Navigation React component -- Fixed lint errors --- components/SubNav/SubNav.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/SubNav/SubNav.jsx b/components/SubNav/SubNav.jsx index eceafc99d..94a2665ad 100644 --- a/components/SubNav/SubNav.jsx +++ b/components/SubNav/SubNav.jsx @@ -1,6 +1,6 @@ require('./SubNav.scss') -import React, { Component } from 'react' +import React from 'react' import Carousel from '../Carousel/Carousel' import StandardListItem from '../StandardListItem/StandardListItem' @@ -33,7 +33,7 @@ const tcSubNav = { } const SubNav = ({ primaryMenu = 'compete' }) => { - var subNav = tcSubNav[primaryMenu] + const subNav = tcSubNav[primaryMenu] const subNavMap = (item, idx) => { return ( From f79989b20f8461aabc2dbf360279e06486359fdf Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 22 Mar 2016 20:13:09 +0530 Subject: [PATCH 5/6] AS#101448607854424, Create Sub Navigation React component -- Fixed padding --- components/SubNav/SubNav.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/SubNav/SubNav.scss b/components/SubNav/SubNav.scss index 9d25da157..78fe29e69 100644 --- a/components/SubNav/SubNav.scss +++ b/components/SubNav/SubNav.scss @@ -4,11 +4,10 @@ $subnav-item-bg-color: #B47DD6; $subnav-item-text-color: #7A7F83; .SubNav { - padding: 20px 0px; background-color: $accent-gray-dark; .StandardListItem { - padding: 0px; + padding: 20px 0px; .label { color: $subnav-item-text-color; From 79e80c2a9098841d23477f085dd26cfcf15c43c5 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Wed, 23 Mar 2016 10:55:49 +0530 Subject: [PATCH 6/6] AS#101448607854424, Create Sub Navigation React component -- Implemented code review suggestions --- components/Carousel/Carousel.jsx | 18 +++++++++--------- components/Carousel/Carousel.scss | 3 --- components/SubNav/SubNav.jsx | 9 +++------ package.json | 4 ++-- 4 files changed, 14 insertions(+), 20 deletions(-) diff --git a/components/Carousel/Carousel.jsx b/components/Carousel/Carousel.jsx index 6e6ea3bff..538398382 100644 --- a/components/Carousel/Carousel.jsx +++ b/components/Carousel/Carousel.jsx @@ -33,14 +33,14 @@ export default class Carousel extends Component { } validatePagers() { - const pageDownClass = classNames({ - 'page-down' : true, - hidden: this.state.firstVisibleItem === 0 - }) - const pageUpClass = classNames({ - 'page-up' : true, - hidden: this.lastElementVisible(this.state.firstVisibleItem) - }) + const pageDownClass = classNames( + 'page-down', + { hidden: this.state.firstVisibleItem === 0 } + ) + const pageUpClass = classNames( + 'page-up', + { hidden: this.lastElementVisible(this.state.firstVisibleItem) } + ) const node = ReactDOM.findDOMNode(this) const pageDownNode = node.querySelector('.page-down') const pageUpNode = node.querySelector('.page-up') @@ -105,7 +105,7 @@ export default class Carousel extends Component { } return ( -
+
diff --git a/components/Carousel/Carousel.scss b/components/Carousel/Carousel.scss index 7b6be6f4b..cb699725a 100644 --- a/components/Carousel/Carousel.scss +++ b/components/Carousel/Carousel.scss @@ -5,9 +5,6 @@ $pager-bg-color: #737380; .Carousel { display: flex; flex-direction: row; - &.hidden { - // visibility: hidden; - } .page-down { width: 20px; diff --git a/components/SubNav/SubNav.jsx b/components/SubNav/SubNav.jsx index 94a2665ad..68234a9d0 100644 --- a/components/SubNav/SubNav.jsx +++ b/components/SubNav/SubNav.jsx @@ -9,8 +9,7 @@ const tcSubNav = { {img: require('./placeholder.svg'), text: 'Design Challenges', link: '/challenges/design/active'}, {img: require('./placeholder.svg'), text: 'Development Challenges', link: '/challenges/develop/active'}, {img: require('./placeholder.svg'), text: 'Data Science Challenges', link: '/challenges/data/active'}, - // TODO dynamic domain - {img: require('./placeholder.svg'), text: 'Competitive Programming', link: 'https://arena.topcoder.com'} + {img: require('./placeholder.svg'), text: 'Competitive Programming', link: process.env.ARENA_URL} ], learn : [ {img: require('./placeholder.svg'), text: 'Getting Started', link: '/getting-started'}, @@ -21,11 +20,9 @@ const tcSubNav = { ], community : [ {img: require('./placeholder.svg'), text: 'Overview', link: '/community/members'}, - // TODO dynamic domain - {img: require('./placeholder.svg'), text: 'TCO16', link: '//tco16.topcoder.com'}, + {img: require('./placeholder.svg'), text: 'TCO16', link: process.env.TCO16_URL}, {img: require('./placeholder.svg'), text: 'Programs', link: '/community/member-overview'}, - // TODO dynamic domain - {img: require('./placeholder.svg'), text: 'Forums', link: '//apps.topcoder.com/forums'}, + {img: require('./placeholder.svg'), text: 'Forums', link: process.env.FORUMS_APP_URL}, {img: require('./placeholder.svg'), text: 'Statistics', link: '/community/statistics'}, {img: require('./placeholder.svg'), text: 'Events', link: '/community/events'}, {img: require('./placeholder.svg'), text: 'Blog', link: '/blog'} diff --git a/package.json b/package.json index 9d4f3ee0c..471aabe7b 100644 --- a/package.json +++ b/package.json @@ -19,13 +19,13 @@ }, "scripts": { "example": "webpack-dev-server -d --progress --inline --colors", - "dev": "webpack-dev-server -d --progress --inline --colors --dev", + "dev": "webpack-dev-server -d --progress --inline --colors --dev --tc", "clean": "rm -r dist", "build": "webpack --config webpack.config.js; cp example/index.html dist/", "lint": "eslint --ext .js,.jsx .", "test": "cross-env NODE_ENV=test mocha --reporter progress --compilers js:babel-core/register --require ignore-styles --recursive \"./components/**/*.spec.js\"", "test:watch": "npm run test -- --watch", - "build-navbar": "webpack --config navbar.webpack.config.coffee; cp index.html dist/" + "build-navbar": "webpack --config --tc navbar.webpack.config.coffee; cp index.html dist/" }, "dependencies": { "appirio-styles": "0.0.25",