From 276999c88220367ea920c28f7ab796b80b200359 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 18 Mar 2016 15:03:55 +0530 Subject: [PATCH 01/11] AS#101967871059519, Bundle NavBar components to be used by tc-site -- Added new web pack config for navbar components, to publish it as library -- Fixed issues with NavBar and SearchBar --- .gitignore | 3 ++- components/Navbar/Navbar.jsx | 6 +++--- components/Navbar/Navbar.scss | 3 --- components/Navbar/nav-community.svg | 14 ++++++++++++++ components/Navbar/nav-compete.svg | 12 ++++++++++++ components/Navbar/nav-learn.svg | 18 ++++++++++++++++++ components/SearchBar/SearchBar.scss | 1 + index.coffee | 6 ++++++ navbar.webpack.config.coffee | 20 ++++++++++++++++++++ package.json | 8 ++++++-- 10 files changed, 82 insertions(+), 9 deletions(-) create mode 100644 components/Navbar/nav-community.svg create mode 100644 components/Navbar/nav-compete.svg create mode 100644 components/Navbar/nav-learn.svg create mode 100644 navbar.webpack.config.coffee diff --git a/.gitignore b/.gitignore index f319765e2..cee3f39e9 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ coverage .idea .env npm-debug.log -.DS_Store \ No newline at end of file +.DS_Store +dist \ No newline at end of file diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 9392a2c19..7c8f84834 100755 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -7,9 +7,9 @@ import QuickLinks from '../QuickLinks/QuickLinks' import UserDropdownMenu from '../UserDropdownMenu/UserDropdownMenu' const primaryNavigationItems = [ - {img: '../components/MenuBar/nav-community.svg', text: 'Community', link: 'javascript:;'}, - {img: '../components/MenuBar/nav-compete.svg', text: 'Compete', link: 'javascript:;', selected: true}, - {img: '../components/MenuBar/nav-learn.svg', text: 'Learn', link: 'javascript:;'} + {img: require('./nav-community.svg'), text: 'Community', link: 'javascript:;'}, + {img: require('./nav-compete.svg'), text: 'Compete', link: 'javascript:;', selected: true}, + {img: require('./nav-learn.svg'), text: 'Learn', link: 'javascript:;'} ] class Navbar extends Component { diff --git a/components/Navbar/Navbar.scss b/components/Navbar/Navbar.scss index d78258c95..fc2474296 100755 --- a/components/Navbar/Navbar.scss +++ b/components/Navbar/Navbar.scss @@ -13,9 +13,6 @@ $super-wide: 1376px; background-color: $navbar-bg; border-bottom: 1px solid $border-color; padding: 10px 20px; - position: fixed; - top: 0; - left: 0; width: 100%; @media screen and (max-width: $mobile) { diff --git a/components/Navbar/nav-community.svg b/components/Navbar/nav-community.svg new file mode 100644 index 000000000..d3afe2b80 --- /dev/null +++ b/components/Navbar/nav-community.svg @@ -0,0 +1,14 @@ + + + + nav-community + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/components/Navbar/nav-compete.svg b/components/Navbar/nav-compete.svg new file mode 100644 index 000000000..1e43d1940 --- /dev/null +++ b/components/Navbar/nav-compete.svg @@ -0,0 +1,12 @@ + + + + nav-compete + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/components/Navbar/nav-learn.svg b/components/Navbar/nav-learn.svg new file mode 100644 index 000000000..d45a64145 --- /dev/null +++ b/components/Navbar/nav-learn.svg @@ -0,0 +1,18 @@ + + + + nav-learn + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index 6fb889678..2c2b612d9 100644 --- a/components/SearchBar/SearchBar.scss +++ b/components/SearchBar/SearchBar.scss @@ -132,6 +132,7 @@ $active-icon-wrap-bg: #888894; top: 43px; left: 0; width: 100%; + z-index: 1000; strong { font-weight: 600; diff --git a/index.coffee b/index.coffee index 187e73af2..00c9c9ff8 100644 --- a/index.coffee +++ b/index.coffee @@ -1,2 +1,8 @@ +Router = require './components/Router/Router.cjsx' + module.exports = default: require './components/FileUploader/FileUploaderContainer.cjsx' + NavBar: require './components/Navbar/Navbar.jsx' + SearchBar: require './components/SearchBar/SearchBar.jsx' + UserDropdown: require './components/UserDropdownMenu/UserDropdownMenu.jsx' + TCFooter: require './components/TCFooter/TCFooter.jsx' \ No newline at end of file diff --git a/navbar.webpack.config.coffee b/navbar.webpack.config.coffee new file mode 100644 index 000000000..43537038d --- /dev/null +++ b/navbar.webpack.config.coffee @@ -0,0 +1,20 @@ +webpackConfig = require 'appirio-tech-webpack-config' +webpack = require('webpack') + +config = webpackConfig + dirname: __dirname + template: './index.html' + entry: + TCNavComponents: [ + './index.coffee' + ] + +config.output.filename = 'TCNavComponents.[name].js'; +config.output.publicPath = 'http://local.topcoder.com/mf/js/app/header/partials/' +config.output.libraryTarget = 'var' +console.log config.output + + +config.externals = {"react" : "React"} + +module.exports = config diff --git a/package.json b/package.json index 804bb39a5..5c428b535 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "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" + "test:watch": "npm run test -- --watch", + "build-navbar": "webpack --config navbar.webpack.config.coffee; cp index.html dist/", }, "dependencies": { "appirio-styles": "0.0.25", @@ -38,6 +39,9 @@ "react-dom": "^0.14.7", "react-dropzone": "^3.3.2", "react-redux": "^4.2.1", - "react-select": "^0.9.1" + "react-select": "^0.9.1", + "url-loader": "^0.5.7", + "img-loader": "^1.2.0", + "file-loader": "^0.8.4" } } From f38f6f34713fdf3a5bb0b88e194008f7f3f7c63b Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 18 Mar 2016 15:04:44 +0530 Subject: [PATCH 02/11] AS#102481437698830, Travis build to push bundle to S3/CDN -- Trying with travis.yml --- .travis.yml | 35 +++++++++++++++++++++++------------ 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/.travis.yml b/.travis.yml index 74f00c3ae..fb39aacdc 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,22 +1,33 @@ language: node_js node_js: -- 5.2.0 +- 5.5.0 install: - npm install script: -- npm run lint +- npm run lint && npm run build-navbar sudo: false -before_deploy: -- npm-prepublish --verbose deploy: -- provider: npm - email: "$NPM_EMAIL" - api_key: "$NPM_API_KEY" +- provider: s3 + cache_control: private, no-store, no-cache, must-revalidate, max-age=0 + detect_encoding: true + access_key_id: $AWS_KEY + secret_access_key: $AWS_SECRET + bucket: app.topcoder-dev.com + skip_cleanup: true + local_dir: dist on: - tags: true + branch: dev env: + matrix: + - CXX=g++-4.8 global: - # NPM_EMAIL - - secure: "kmo0afPY5HwJ5SryNY0XRRRekxd1teBR6lSiw2jtjU64sOdpjN7ZhGWy9q0lReGk6hloPfXewXRlpCbcDRFoxvJUdAbQoAN8gq/BxrwGmWlBepgUew1O6WLkpvqXCMe6lUmPEznjil2anjLHfm/cKiqwaY1n8MI+PSna6eNwAlffx72uPL1TzrijJjb7kKqTtjTHZzNiiUn2jZrc35G+MeryZmnd5xXV7cXgYb+flEMC5sDqhcO2aewYiCGMK2b3f7QDJFbGD4+v+HjN1XispJgCxDLTRLJ0HD8HPj87w/7s7PHqCuRUwga1Z2HTRDniqM7mb7TZ5RK990Olp4d1Fw/ApXhUEe4fwgTdN9PSwOzOrY4VGNyytYvJuMVqSVGIHx6Y2BuCt3gzPeM0ev8bjhE9PItYmDTr5FhNI1XLT7PKu+Ktp72bmdEVqNfnv7jXRKba9AeSBQVk70jKMpYAuGI/d/xXeaD2vImBhCflc0UArYfXf+JYMEwzhiMZQfq6csvg0UV/nlD9xidgBLt8QUGdFaQTjsQLt9CWbwcKM7/yFcfkOKEHrM5By1Do4gtSDxmK5F+81210YMO30OVwllHk/f+jOspti9EJv6r0vAZOkKXXL15VsyKQSrF/p6k+brVf0cQcnUMiSiNsl/aEftNW2ys5VCIRJcEol5bHt90=" - # NPM_API_KEY - - secure: "OoRE9rbEzfAomE1h+PRDHJb0SgcyManma54qs72nwlBA3N4D+hV2Swy0xAidnVqdNvBlA4p9QmcrE0km+ZGVacFEhvleUGFDn5weWde2bukzkkdHtbaYQjyhxbrqfLA9G9vzs1BlHjhrR7Arl2TQuT21XnfagFBQ/LCgCRRu9yHHkZ4TejhuYu/9Fgdq08wnBpLZn7wllUq0OtrDgEgjK7avZ+yv5ob6zccxr3NAAchbdPJ2yUo82VvD+YdQaWbLq9ac5cwa0I6f/RuQUiZcLZItk/H3NuQqg32746QdwIqKpw5dh9wzddbckIK3WVsoJmE+7WpGAOgUU/TxmPijH6j1YwQ9uqcBGsax8RUFR+mG7imlS4YpL67K438JPUG7NCPgnN19zN/c+4WkVoKlLYEncyPp0C3sBbmauR0uuuVBWWUJL/1xBCuPyhT9JGXaocms/Ldshxr+TYf1tfQQ3uzs6wO3cniw3wIgXbgMF6NBwQdQpgUlSh++XJKgIG2I228GI3qMq8zJu/N/1oEKVkKkO8Z9Y3Vd5uo2VMbkp0KJJEfXnE8GZBBaajD+F8jONRQqYEDhK8EMYuqKhsQZMw3RgPtvOZNG+bhcnbElNnMjhd8CTKioKXAslkTP6Esi4Ce2PS6YR4CskjZaO7IT9KRqHvVZN42vlIVbhb2J0RI=" + # DEV_AWS_KEY + - secure: a5X4QlY2JD/sJnEBkT5WwwfWjYKq3ldRf/+Dh5x2oHB0swGzYyFxzVlezddPF8xDML+CcVoLHkd8WNM2F7qcxHZTDC5spH/ym2gX6YlRwFRTTFBRCJehgYs8Vit/s14f8gkuVV8fe2ubMiV+fpAw80tb3E+t+nCckmXwe8gDqDbHto5VIozTiqDOV/WvkPzaRQofTeNzSqjrAH/iRq8hJUx16shCO2ccdiLu7rnOuys+UwjWFRyjdLP01UZXd5u6a5XK3vigLGPBAqsEwSMgScATJjNIHwYofE5Q3ztD85jz/JoQatQf7LCnQUqkLT+xldMkOZuTlTHvzmVUOl2WYpVxWV9hXwBemvyuRPPtzIrZkKXi6OUgvpYwGgWn8eS1qulB1DYPrUWBtIYGQoxEchfNlmcrCIJ7BrbL9xiNUM8J+ZCWtNS01eSapMHdhAIUMLEsAjxBY+ArLuYAD+URB0d+JZrr9cORGnrGDB+1wI12Z/Qu5LEDp/TMOisK2PXEsaqzlaazr9lj2FXTYJQyyFMMWzq1v1o5lZ5mEJ5ea36eGApV1iQNmPrg7omhDHwKtBpMDFQWZ0Y1SrkIk3QTX6JfzsrehwAhAK2fZ25EaC6zcppAo0ia5/VZoWzxHFQyhkC47hRrM7C6nCriQPDc9kKsmTSX5rp5e/DNpiZ67qM= + # DEV_AWS_SECRET + - secure: p+od0xD/9vpMbR2AI6gZWknNAtvvIfq6jXIF98DEsDlqrrMFv4SwtuXLlCmX5PBnB/cWOkwgRhymI7/3+fLrDC+wqlhDEWyzSpVOvAcVAb5LEP7IDen0W8kTj2q9I2VRX+keL7lxQCknAf/21sRZeJfJhLGR+O3NcytEdsjlpFCopA6luZYv1QSd+nRJiTsI7I69T0hr7jZk+YioyjEEp/4qzI2qyJH7E5Ry+DD3gXnC3zva48Huq6rvOtLpgFmio1b1rNAcA55Q9Y3vb1jJyZhKpRvtel9OM9ekTxANEGJVaMzxyZXT7EFTxwxS+ub5c2HRzxedMnD3tY29ku2JJx7Ofm+Yxt9DZXSK7EV99xxE71kIhI9lZFiWZviym08MHGc4pee6+Cl6ZkiV44v4XnwbgUq8GCOkmDMQBQtGhXq7dC6jB/r7P7CJs+DIGDF7qNt/xizVOC1THS8GUCN68aWMVperP+IlUXo5d2XekhO6vjHk6o44K8A1s7yblBWXj54B6NfJnBzUK2X0g6Y2xdW6tmoKtad1r1I3062skc+UiU+6m4fGS8pLFElJNj+8N7QANoEw9oJDZfuQ47uVQzPjAA1/qdcy3ksMek0siNFbpZnMqzOJTPf2Xe7YgKuCPg0QczESXIjOeEIU0om7SWmGEIuMFqt6obQW0M3VHn0= +addons: + apt: + sources: + - ubuntu-toolchain-r-test + packages: + - g++-4.8 \ No newline at end of file From 7d483dd5ceb95db28e45151777b5e9a52e94d22c Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 18 Mar 2016 15:07:37 +0530 Subject: [PATCH 03/11] AS#101967871059519, Bundle NavBar components to be used by tc-site -- Parse error fixes --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5c428b535..9d4f3ee0c 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "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 navbar.webpack.config.coffee; cp index.html dist/" }, "dependencies": { "appirio-styles": "0.0.25", From 21841c8da6d080233add1bb5672ecc0e459bfa65 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 18 Mar 2016 15:23:31 +0530 Subject: [PATCH 04/11] AS#101967871059519, Bundle NavBar components to be used by tc-site -- Fixed module name --- components/MenuBar/MenuBar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/MenuBar/MenuBar.jsx b/components/MenuBar/MenuBar.jsx index 643ce89ae..112e80da1 100644 --- a/components/MenuBar/MenuBar.jsx +++ b/components/MenuBar/MenuBar.jsx @@ -1,5 +1,5 @@ import React, { PropTypes, Component } from 'react' -import classNames from 'classNames' +import classNames from 'classnames' require('./MenuBar.scss') From 5e4827161c39145f908cdbbd493d4d1768c48f66 Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 18 Mar 2016 15:28:32 +0530 Subject: [PATCH 05/11] AS#101967871059519, Bundle NavBar components to be used by tc-site -- Changed bucket name --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index fb39aacdc..928f3aa65 100644 --- a/.travis.yml +++ b/.travis.yml @@ -12,7 +12,7 @@ deploy: detect_encoding: true access_key_id: $AWS_KEY secret_access_key: $AWS_SECRET - bucket: app.topcoder-dev.com + bucket: components.topcoder-dev.com skip_cleanup: true local_dir: dist on: From 01d6a7b52e2540f7bfa235cdf3ddd5b2750d0e1d Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Tue, 22 Mar 2016 15:00:50 +0530 Subject: [PATCH 06/11] 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 07/11] 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 08/11] 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 09/11] 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 10/11] 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 11/11] 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",