"react board"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tureey/pen/gGWKLE?depth=everything&order=popularity&page=60&q=react&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <style class="cp-pen-styles">body { background: white; } .app_footer { text-align: center; margin-top: 45px; font-family: "Lato", helvetica, Arial, Sans-serif; } .board { display: flex; flex-wrap: nowrap; justify-content: space-around; padding: 15px; min-width: 1000px; width: 80%; margin: 0 auto; align-content: strech; } .boardColumn { font-family: "Lato", helvetica, Arial, Sans-serif; flex-basis: 300px; flex-grow: 1; margin: 0 5px; } .boardColumn .boardColumn__header { padding: 5px; margin-bottom: 10px; border-bottom: 5px solid #f5f5f5; } .boardColumn .boardColumn__title { font-size: 16px; text-transform: capitalize; font-weight: 600; margin: 0; color: #333; font-size: 14px; line-height: 1.5; font-weight: normal; margin: 0 5px 0 0; word-wrap: break-word; } .boardColumn .boardColumn__taskList { background: #f5f5f5; padding: 20px 10px; min-height: 600px; height: 600px; max-height: 600px; overflow-y: auto; } .boardColumn.boardColumn--DONE .taskCard { opacity: 0.7; } .boardColumn.boardColumn--DONE .taskCard .taskCard__title { text-decoration: line-through; } .taskCard { font-family: "Lato", helvetica, Arial, Sans-serif; border: 1px solid #E0E1E2; border-radius: 5px; padding: 15px 15px 10px 15px; background: white; position: relative; margin-bottom: 5px; box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.06); } .taskCard:hover { cursor: pointer; } .taskCard:after { content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: 4px; background: red; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .taskCard .taskCard__title { margin: 0; color: #333; font-weight: 500; letter-spacing: 0.5px; } .taskCard .taskCard__epicLink-title { background: #9b59b6; padding: 3px 10px; font-size: 13px; border-radius: 5px; color: white; } .taskCard .taskCard__footer { display: flex; margin-top: 15px; justify-content: space-between; align-items: center; } .taskCard .taskCard__type { font-size: 12px; font-weight: bold; } .taskCard .taskCard__id { font-size: 12px; font-weight: 300; color: #CDCED0; margin-right: 10px; font-variant: small-caps; font-weight: 500; } .taskCard .taskCard__avatar { width: 20px; height: 20px; border-radius: 500px; } .taskCard .taskCard__id, .taskCard .taskCard__avatar { vertical-align: middle; } .taskCard.taskCard--HIGHEST:after { background: #e74c3c; } .taskCard.taskCard--HIGHEST .taskCard__type { color: #e74c3c; } .taskCard.taskCard--HIGH:after { background: #e67e22; } .taskCard.taskCard--HIGH .taskCard__type { color: #e67e22; } .taskCard.taskCard--MEDIUM:after { background: #f1c40f; } .taskCard.taskCard--MEDIUM .taskCard__type { color: #f1c40f; } .taskCard.taskCard--LOW:after { background: #27ae60; } .taskCard.taskCard--LOW .taskCard__type { color: #27ae60; } </style></head><body> <div id="app"></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/styled-components/2.1.2/styled-components.min.js'></script><script src='https://npmcdn.com/react-draggable'></script><script src='https://unpkg.com/react-modal@1.6.2/dist/react-modal.min.js'></script> <script >'use strict'; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // PRIORITIES var PRIORITY_HIGHEST = 'HIGHEST'; var PRIORITY_HIGH = 'HIGH'; var PRIORITY_MEDIUM = 'MEDIUM'; var PRIORITY_LOW = 'LOW'; var PRIORITY_TRIVIAL = 'TRIVIAL'; // STATUS var TYPE_TODO = 'TODO'; var TYPE_INPROGRESS = 'INPROGRESS'; var TYPE_DONE = 'DONE'; // TITLES var TITLE_TODO = 'To do'; var TITLE_INPROGRESS = 'In Progress'; var TITLE_DONE = 'Done'; // TASK var CLASS_TASK = 'taskCard'; var CLASS_COLUMN = 'boardColumn'; // GENERAL JSON var data = { tasks: [{ id: 'REACT-1', priority: PRIORITY_HIGHEST, title: 'Read WebPack documentation', epicLink: 'React buidings', status: TYPE_DONE, points: 3 }, { id: 'REACT-2', priority: PRIORITY_HIGHEST, title: 'Install dependencies', epicLink: 'React buidings', status: TYPE_DONE, points: 3 }, { id: 'REACT-3', priority: PRIORITY_HIGH, title: 'Try Hello world', epicLink: 'React buidings', status: TYPE_DONE }, { id: 'REACT-4', priority: PRIORITY_MEDIUM, title: 'Create some little components', epicLink: 'React buidings', status: TYPE_INPROGRESS }, { id: 'REACT-5', priority: PRIORITY_MEDIUM, title: 'Create App with react-router', epicLink: 'React buidings', status: TYPE_TODO }, { id: 'REACT-6', priority: PRIORITY_MEDIUM, title: 'Practise styled-components (react library)', epicLink: 'React buidings', status: TYPE_TODO }, { id: 'REACT-7', priority: PRIORITY_LOW, title: 'Read Redux documentation', epicLink: 'React buidings', status: TYPE_TODO }, { id: 'REACT-8', priority: PRIORITY_LOW, title: 'Do a little project with ReduxJS', epicLink: 'React buidings', status: TYPE_TODO }] }; var TaskCard = function TaskCard(task) { var image = 'https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAemAAAAJGFkOGZiYTIwLTU0YjUtNGY0Ni1hM2ZhLThlY2Y2NzU0Mzk3MA.jpg'; var priorityclass = getPriorityClass(task.priority); function getPriorityClass(priority) { if (priority == PRIORITY_LOW) { return CLASS_TASK + '--' + PRIORITY_LOW; } else if (priority == PRIORITY_MEDIUM) { return CLASS_TASK + '--' + PRIORITY_MEDIUM; } else if (priority == PRIORITY_HIGH) { return CLASS_TASK + '--' + PRIORITY_HIGH; } else if (priority == PRIORITY_HIGHEST) { return CLASS_TASK + '--' + PRIORITY_HIGHEST; } } return React.createElement( 'div', { className: 'taskCard ' + priorityclass }, React.createElement( 'header', { className: 'taskCard__header' }, React.createElement( 'h4', { className: 'taskCard__title' }, task.title ), React.createElement( 'div', { className: 'taskCard__epicLink-wrapper' }, React.createElement( 'span', { className: 'taskCard__epicLink-title' }, task.epicLink ) ) ), React.createElement( 'footer', { className: 'taskCard__footer' }, React.createElement( 'span', { className: 'taskCard__type' }, task.priority ), React.createElement( 'div', null, React.createElement( 'span', { className: 'taskCard__id' }, task.id ), React.createElement('img', { className: 'taskCard__avatar', src: image }) ) ) ); }; var BoardColumn = function BoardColumn(props) { var columnClass = getColumnClass(props.title); function getColumnClass(title) { if (title == TITLE_TODO) { return CLASS_COLUMN + '--' + TYPE_TODO; } else if (title == TITLE_INPROGRESS) { return CLASS_COLUMN + '--' + TYPE_INPROGRESS; } else if (title == TITLE_DONE) { return CLASS_COLUMN + '--' + TYPE_DONE; } } return React.createElement( 'div', { className: 'boardColumn ' + columnClass }, React.createElement( 'header', { className: 'boardColumn__header' }, React.createElement( 'h1', { className: 'boardColumn__title' }, props.title ) ), React.createElement( 'div', { className: 'boardColumn__taskList' }, props.tasks.map(function (task) { return React.createElement(TaskCard, task); }) ) ); }; var Board = function (_React$Component) { _inherits(Board, _React$Component); function Board() { _classCallCheck(this, Board); var _this = _possibleConstructorReturn(this, _React$Component.call(this)); _this.state = { tasks: data.tasks }; return _this; } Board.prototype.render = function render() { return React.createElement( 'div', { className: 'board' }, React.createElement(BoardColumn, { title: TITLE_TODO, tasks: this.state.tasks.filter(function (task) { return task.status == TYPE_TODO; }) }), React.createElement(BoardColumn, { title: TITLE_INPROGRESS, tasks: this.state.tasks.filter(function (task) { return task.status == TYPE_INPROGRESS; }) }), React.createElement(BoardColumn, { title: TITLE_DONE, tasks: this.state.tasks.filter(function (task) { return task.status == TYPE_DONE; }) }) ); }; return Board; }(React.Component); var AppFooter = function AppFooter() { return React.createElement( 'footer', { className: 'app_footer' }, React.createElement( 'p', null, 'You can check my ', React.createElement( 'a', { href: 'https://www.linkedin.com/in/victorribero/', target: '_blank' }, 'Linkedin' ), ' or ', React.createElement( 'a', { target: '_blank', href: 'http://www.wasvi.com' }, 'my website' ) ) ); }; var App = function (_React$Component2) { _inherits(App, _React$Component2); function App() { _classCallCheck(this, App); return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments)); } App.prototype.render = function render() { return React.createElement( 'div', { 'class': 'app' }, React.createElement(Board, null), React.createElement(AppFooter, null) ); }; return App; }(React.Component); ReactDOM.render(React.createElement(App, null), document.getElementById('app')); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: