From 6e64c69d15709e1c1ee6cf30fd34e50d8fe2d776 Mon Sep 17 00:00:00 2001 From: Thomas Folbrecht Date: Tue, 12 Mar 2019 13:20:51 -0400 Subject: [PATCH 1/3] Building dash --- src/components/App.js | 39 +++++++ src/components/AppBar.js | 226 +++++++++++++++++++++++++++++++++++++ src/components/GridList.js | 82 ++++++++++++++ src/components/Root.js | 2 + src/components/TodoCard.js | 137 ++++++++++++++++++++++ 5 files changed, 486 insertions(+) create mode 100644 src/components/App.js create mode 100644 src/components/AppBar.js create mode 100644 src/components/GridList.js create mode 100644 src/components/TodoCard.js diff --git a/src/components/App.js b/src/components/App.js new file mode 100644 index 0000000..44d338c --- /dev/null +++ b/src/components/App.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; +// import { Provider } from 'react-redux'; +// import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; +// import { createGlobalStyle } from 'styled-components'; +// import theme from '../theme'; +import AppBar from './AppBar'; +import TodoCard from './TodoCard'; +import Grid from '@material-ui/core/Grid'; + + +class App extends Component { +render() { + return ( +
+ +

Make A Todo

+
+
+

Top Todos

+ + + + + + + + + + + +
+

Community

+
+
+ ) +} +} + +export default App; \ No newline at end of file diff --git a/src/components/AppBar.js b/src/components/AppBar.js new file mode 100644 index 0000000..9bb5d4b --- /dev/null +++ b/src/components/AppBar.js @@ -0,0 +1,226 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import Badge from '@material-ui/core/Badge'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { withStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import MailIcon from '@material-ui/icons/Mail'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = theme => ({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginRight: theme.spacing.unit * 2, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit * 3, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('md')]: { + width: 200, + }, + }, + sectionDesktop: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'flex', + }, + }, + sectionMobile: { + display: 'flex', + [theme.breakpoints.up('md')]: { + display: 'none', + }, + }, +}); + +class PrimarySearchAppBar extends React.Component { + state = { + anchorEl: null, + mobileMoreAnchorEl: null, + }; + + handleProfileMenuOpen = event => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleMenuClose = () => { + this.setState({ anchorEl: null }); + this.handleMobileMenuClose(); + }; + + handleMobileMenuOpen = event => { + this.setState({ mobileMoreAnchorEl: event.currentTarget }); + }; + + handleMobileMenuClose = () => { + this.setState({ mobileMoreAnchorEl: null }); + }; + + render() { + const { anchorEl, mobileMoreAnchorEl } = this.state; + const { classes } = this.props; + const isMenuOpen = Boolean(anchorEl); + const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); + + const renderMenu = ( + + Profile + My account + + ); + + const renderMobileMenu = ( + + + + + + + +

Messages

+ + + + + + + +

Notifications

+ + + + + +

Profile

+ + + ); + + return ( +
+ + + + + + + Material-UI + +
+
+ +
+ +
+
+
+ + + + + + + + + + + + + +
+
+ + + +
+ + + {renderMenu} + {renderMobileMenu} +
+ ); + } +} + +PrimarySearchAppBar.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(PrimarySearchAppBar); diff --git a/src/components/GridList.js b/src/components/GridList.js new file mode 100644 index 0000000..ff12b3c --- /dev/null +++ b/src/components/GridList.js @@ -0,0 +1,82 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import GridList from '@material-ui/core/GridList'; +import GridListTile from '@material-ui/core/GridListTile'; +import GridListTileBar from '@material-ui/core/GridListTileBar'; +import IconButton from '@material-ui/core/IconButton'; +import StarBorderIcon from '@material-ui/icons/StarBorder'; +import tileData from './tileData'; + +const styles = theme => ({ + root: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + overflow: 'hidden', + backgroundColor: theme.palette.background.paper, + }, + gridList: { + flexWrap: 'nowrap', + // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS. + transform: 'translateZ(0)', + }, + title: { + color: theme.palette.primary.light, + }, + titleBar: { + background: + 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)', + }, +}); + +/** + * The example data is structured as follows: + * + * import image from 'path/to/image.jpg'; + * [etc...] + * + * const tileData = [ + * { + * img: image, + * title: 'Image', + * author: 'author', + * }, + * { + * [etc...] + * }, + * ]; + */ +function SingleLineGridList(props) { + const { classes } = props; + + return ( +
+ + {tileData.map(tile => ( + + {tile.title} + + + + } + /> + + ))} + +
+ ); +} + +SingleLineGridList.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(SingleLineGridList); diff --git a/src/components/Root.js b/src/components/Root.js index f12d3db..efea333 100644 --- a/src/components/Root.js +++ b/src/components/Root.js @@ -5,6 +5,7 @@ import { createGlobalStyle } from 'styled-components'; import theme from '../theme'; // import PrivateRoute from './PrivateRoute'; import { MuiThemeProvider } from '@material-ui/core/styles'; +import App from './App'; import Login from './Login'; import Signup from './Signup'; @@ -24,6 +25,7 @@ const Root = ({ store }) => ( /> + {/* */} diff --git a/src/components/TodoCard.js b/src/components/TodoCard.js new file mode 100644 index 0000000..466654d --- /dev/null +++ b/src/components/TodoCard.js @@ -0,0 +1,137 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classnames from 'classnames'; +import Card from '@material-ui/core/Card'; +import CardHeader from '@material-ui/core/CardHeader'; +import CardMedia from '@material-ui/core/CardMedia'; +import CardContent from '@material-ui/core/CardContent'; +import CardActions from '@material-ui/core/CardActions'; +import Collapse from '@material-ui/core/Collapse'; +import Avatar from '@material-ui/core/Avatar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import red from '@material-ui/core/colors/red'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import ShareIcon from '@material-ui/icons/Share'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; + +const styles = theme => ({ + card: { + maxWidth: 400, + }, + media: { + height: 0, + paddingTop: '56.25%', // 16:9 + }, + actions: { + display: 'flex', + }, + expand: { + transform: 'rotate(0deg)', + marginLeft: 'auto', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shortest, + }), + }, + expandOpen: { + transform: 'rotate(180deg)', + }, + avatar: { + backgroundColor: red[500], + }, +}); + +class RecipeReviewCard extends React.Component { + state = { expanded: false }; + + handleExpandClick = () => { + this.setState(state => ({ expanded: !state.expanded })); + }; + + render() { + const { classes } = this.props; + + return ( + + + R + + } + action={ + + + + } + title="Shrimp and Chorizo Paella" + subheader="September 14, 2016" + /> + + + + This impressive paella is a perfect party dish and a fun meal to cook together with your + guests. Add 1 cup of frozen peas along with the mussels, if you like. + + + + + + + + + + + + + + + + Method: + + Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10 + minutes. + + + Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high + heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly + browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving + chicken and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, + salt and pepper, and cook, stirring often until thickened and fragrant, about 10 + minutes. Add saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil. + + + Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook + without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat + to medium-low, add reserved shrimp and mussels, tucking them down into the rice, and + cook again without stirring, until mussels have opened and rice is just tender, 5 to 7 + minutes more. (Discard any mussels that don’t open.) + + + Set aside off of the heat to let rest for 10 minutes, and then serve. + + + + + ); + } +} + +RecipeReviewCard.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(RecipeReviewCard); From bf06219ff55babdefa241b02f01af33ec171cd62 Mon Sep 17 00:00:00 2001 From: Thomas Folbrecht Date: Tue, 12 Mar 2019 22:06:19 -0400 Subject: [PATCH 2/3] Testing out components & material ui --- package.json | 2 + src/components/App.js | 17 ++++- src/components/AppBar.js | 5 +- src/components/Editor.js | 25 +++++++ yarn.lock | 155 +++++++++++++++++++++++++++++++++++++-- 5 files changed, 192 insertions(+), 12 deletions(-) create mode 100644 src/components/Editor.js diff --git a/package.json b/package.json index c75668b..1dab86e 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,11 @@ "@material-ui/core": "^3.9.2", "@material-ui/icons": "^3.0.2", "axios": "^0.18.0", + "css-loader": "^2.1.1", "polished": "^3.0.3", "react": "^16.8.4", "react-dom": "^16.8.4", + "react-quill": "^1.3.3", "react-redux": "^6.0.1", "react-router-dom": "^4.3.1", "react-scripts": "2.1.8", diff --git a/src/components/App.js b/src/components/App.js index 44d338c..ac81e5b 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -3,20 +3,27 @@ import React, { Component } from 'react'; // import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; // import { createGlobalStyle } from 'styled-components'; // import theme from '../theme'; +import Paper from '@material-ui/core/Paper'; import AppBar from './AppBar'; import TodoCard from './TodoCard'; import Grid from '@material-ui/core/Grid'; - +import Editor from './Editor'; class App extends Component { render() { return (
-

Make A Todo

+

Make A How-To

-

Top Todos

+

Card

+
+ + + +
+

How To

@@ -31,6 +38,10 @@ render() {

Community

+

How to

+ + +
) } diff --git a/src/components/AppBar.js b/src/components/AppBar.js index 9bb5d4b..f3c01ad 100644 --- a/src/components/AppBar.js +++ b/src/components/AppBar.js @@ -166,11 +166,8 @@ class PrimarySearchAppBar extends React.Component {
- - - - Material-UI + {/* Insertlogohere */}
diff --git a/src/components/Editor.js b/src/components/Editor.js new file mode 100644 index 0000000..61f2fb1 --- /dev/null +++ b/src/components/Editor.js @@ -0,0 +1,25 @@ + +import React from 'react'; +import ReactQuill from 'react-quill'; +import 'react-quill/dist/quill.snow.css'; + +class Editor extends React.Component { + constructor(props) { + super(props) + this.state = { text: '' } // You can also pass a Quill Delta here + this.handleChange = this.handleChange.bind(this) + } + + handleChange(value) { + this.setState({ text: value }) + } + + render() { + return ( + + ) + } +} + +export default Editor; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index ac00962..af328ba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1077,6 +1077,13 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.1.tgz#48fd98c1561fe718b61733daed46ff115b496e18" integrity sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA== +"@types/quill@1.3.10": + version "1.3.10" + resolved "https://registry.yarnpkg.com/@types/quill/-/quill-1.3.10.tgz#dc1f7b6587f7ee94bdf5291bc92289f6f0497613" + integrity sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw== + dependencies: + parchment "^1.1.2" + "@types/react-transition-group@^2.0.8": version "2.0.16" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.16.tgz#2dcb9e396ab385ee19c4af1c9caa469a14cd042f" @@ -2265,7 +2272,7 @@ camelcase@^4.1.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd" integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0= -camelcase@^5.0.0: +camelcase@^5.0.0, camelcase@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.2.0.tgz#e7522abda5ed94cc0489e1b8466610e88404cf45" integrity sha512-IXFsBS2pC+X0j0N/GE7Dm7j3bsEBp+oTpb7F50dwEVX7rf3IgwO9XatnegTsDtniKCUtEJH4fSU6Asw7uoVLfQ== @@ -2460,6 +2467,11 @@ clone-deep@^2.0.1: kind-of "^6.0.0" shallow-clone "^1.0.0" +clone@^2.1.1: + version "2.1.2" + resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" + integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18= + co@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" @@ -2742,6 +2754,15 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +create-react-class@^15.6.0: + version "15.6.3" + resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036" + integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg== + dependencies: + fbjs "^0.8.9" + loose-envify "^1.3.1" + object-assign "^4.1.1" + cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5: version "6.0.5" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" @@ -2830,6 +2851,23 @@ css-loader@1.0.0: postcss-value-parser "^3.3.0" source-list-map "^2.0.0" +css-loader@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.1.tgz#d8254f72e412bb2238bb44dd674ffbef497333ea" + integrity sha512-OcKJU/lt232vl1P9EEDamhoO9iKY3tIjY5GU+XDLblAykTdgs6Ux9P1hTHve8nFKy5KPpOXOsVI/hIwi3841+w== + dependencies: + camelcase "^5.2.0" + icss-utils "^4.1.0" + loader-utils "^1.2.3" + normalize-path "^3.0.0" + postcss "^7.0.14" + postcss-modules-extract-imports "^2.0.0" + postcss-modules-local-by-default "^2.0.6" + postcss-modules-scope "^2.1.0" + postcss-modules-values "^2.0.0" + postcss-value-parser "^3.3.0" + schema-utils "^1.0.0" + css-prefers-color-scheme@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4" @@ -2933,6 +2971,11 @@ cssesc@^2.0.0: resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703" integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg== +cssesc@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" + integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== + cssnano-preset-default@^4.0.7: version "4.0.7" resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76" @@ -3721,6 +3764,11 @@ etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= +eventemitter3@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba" + integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo= + eventemitter3@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163" @@ -3887,7 +3935,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2: assign-symbols "^1.0.0" is-extendable "^1.0.1" -extend@^3.0.0, extend@~3.0.2: +extend@^3.0.0, extend@^3.0.1, extend@^3.0.2, extend@~3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== @@ -3937,6 +3985,11 @@ fast-deep-equal@^2.0.1: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49" integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk= +fast-diff@1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154" + integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig== + fast-glob@^2.0.2: version "2.2.6" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.6.tgz#a5d5b697ec8deda468d85a74035290a025a95295" @@ -3985,7 +4038,7 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -fbjs@^0.8.1: +fbjs@^0.8.1, fbjs@^0.8.9: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90= @@ -4811,6 +4864,13 @@ icss-utils@^2.1.0: dependencies: postcss "^6.0.1" +icss-utils@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.0.tgz#339dbbffb9f8729a243b701e1c29d4cc58c52f0e" + integrity sha512-3DEun4VOeMvSczifM3F2cKQrDQ5Pj6WKhkOq6HD4QTnDUAq8MQRxy5TX6Sy1iY6WPBe4gQ3p5vTECjbIkglkkQ== + dependencies: + postcss "^7.0.14" + identity-obj-proxy@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14" @@ -6141,7 +6201,7 @@ loader-runner@^2.3.0: resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357" integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw== -loader-utils@1.2.3, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0: +loader-utils@1.2.3, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3: version "1.2.3" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7" integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA== @@ -7101,6 +7161,11 @@ param-case@2.1.x: dependencies: no-case "^2.2.0" +parchment@^1.1.2, parchment@^1.1.4: + version "1.1.4" + resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5" + integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg== + parent-module@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.0.tgz#df250bdc5391f4a085fb589dad761f5ad6b865b5" @@ -7666,6 +7731,13 @@ postcss-modules-extract-imports@^1.2.0: dependencies: postcss "^6.0.1" +postcss-modules-extract-imports@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e" + integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ== + dependencies: + postcss "^7.0.5" + postcss-modules-local-by-default@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069" @@ -7674,6 +7746,15 @@ postcss-modules-local-by-default@^1.2.0: css-selector-tokenizer "^0.7.0" postcss "^6.0.1" +postcss-modules-local-by-default@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.6.tgz#dd9953f6dd476b5fd1ef2d8830c8929760b56e63" + integrity sha512-oLUV5YNkeIBa0yQl7EYnxMgy4N6noxmiwZStaEJUSe2xPMcdNc8WmBQuQCx18H5psYbVxz8zoHk0RAAYZXP9gA== + dependencies: + postcss "^7.0.6" + postcss-selector-parser "^6.0.0" + postcss-value-parser "^3.3.1" + postcss-modules-scope@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90" @@ -7682,6 +7763,14 @@ postcss-modules-scope@^1.1.0: css-selector-tokenizer "^0.7.0" postcss "^6.0.1" +postcss-modules-scope@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz#ad3f5bf7856114f6fcab901b0502e2a2bc39d4eb" + integrity sha512-91Rjps0JnmtUB0cujlc8KIKCsJXWjzuxGeT/+Q2i2HXKZ7nBUeF9YQTZZTNvHVoNYj1AthsjnGLtqDUE0Op79A== + dependencies: + postcss "^7.0.6" + postcss-selector-parser "^6.0.0" + postcss-modules-values@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20" @@ -7690,6 +7779,14 @@ postcss-modules-values@^1.3.0: icss-replace-symbols "^1.1.0" postcss "^6.0.1" +postcss-modules-values@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz#479b46dc0c5ca3dc7fa5270851836b9ec7152f64" + integrity sha512-Ki7JZa7ff1N3EIMlPnGTZfUMe69FFwiQPnVSXC9mnn3jozCRBYIxiZd44yJOV2AmabOo4qFf8s0dC/+lweG7+w== + dependencies: + icss-replace-symbols "^1.1.0" + postcss "^7.0.6" + postcss-nesting@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.0.tgz#6e26a770a0c8fcba33782a6b6f350845e1a448f6" @@ -7928,6 +8025,15 @@ postcss-selector-parser@^5.0.0, postcss-selector-parser@^5.0.0-rc.3, postcss-sel indexes-of "^1.0.1" uniq "^1.0.1" +postcss-selector-parser@^6.0.0: + version "6.0.2" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c" + integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg== + dependencies: + cssesc "^3.0.0" + indexes-of "^1.0.1" + uniq "^1.0.1" + postcss-svgo@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258" @@ -8057,7 +8163,7 @@ prompts@^0.1.9: kleur "^2.0.1" sisteransi "^0.1.1" -prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -8173,6 +8279,27 @@ querystringify@^2.0.0: resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.0.tgz#7ded8dfbf7879dcc60d0a644ac6754b283ad17ef" integrity sha512-sluvZZ1YiTLD5jsqZcDmFyV2EwToyXZBfpoVOmktMmW+VEnhgakFHnasVph65fOjGPTWN0Nw3+XQaSeMayr0kg== +quill-delta@^3.6.2: + version "3.6.3" + resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032" + integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg== + dependencies: + deep-equal "^1.0.1" + extend "^3.0.2" + fast-diff "1.1.2" + +quill@^1.2.6: + version "1.3.6" + resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.6.tgz#99f4de1fee85925a0d7d4163b6d8328f23317a4d" + integrity sha512-K0mvhimWZN6s+9OQ249CH2IEPZ9JmkFuCQeHAOQax3EZ2nDJ3wfGh59mnlQaZV2i7u8eFarx6wAtvQKgShojug== + dependencies: + clone "^2.1.1" + deep-equal "^1.0.1" + eventemitter3 "^2.0.3" + extend "^3.0.1" + parchment "^1.1.4" + quill-delta "^3.6.2" + raf@3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" @@ -8271,6 +8398,11 @@ react-dev-utils@^8.0.0: strip-ansi "5.0.0" text-table "0.2.0" +react-dom-factories@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.2.tgz#eb7705c4db36fb501b3aa38ff759616aa0ff96e0" + integrity sha1-63cFxNs2+1AbOqOP91lhaqD/luA= + react-dom@^16.8.4: version "16.8.4" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.4.tgz#1061a8e01a2b3b0c8160037441c3bf00a0e3bc48" @@ -8305,6 +8437,19 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-quill@^1.3.3: + version "1.3.3" + resolved "https://registry.yarnpkg.com/react-quill/-/react-quill-1.3.3.tgz#95b8e088ad4e4acc6c79c2f85bdc0460eebe08eb" + integrity sha512-T9RubLaWJ8gCfp7sOqmFupjiTiEp/EdGqhCG+PWGKc5UHiK6xIWNKWYsOHHEhQ+sZCKs8u/DPx47gc1VfFmcLg== + dependencies: + "@types/quill" "1.3.10" + "@types/react" "*" + create-react-class "^15.6.0" + lodash "^4.17.4" + prop-types "^15.5.10" + quill "^1.2.6" + react-dom-factories "^1.0.0" + react-redux@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.1.tgz#0d423e2c1cb10ada87293d47e7de7c329623ba4d" From b45f96d9e79a4547c175fce9e995f22855901b1c Mon Sep 17 00:00:00 2001 From: Thomas Folbrecht Date: Wed, 13 Mar 2019 11:25:28 -0400 Subject: [PATCH 3/3] Front end commit --- src/components/AppBar.js | 7 +++-- src/components/Dashboard.js | 51 +++++++++++++++++++++++++++++++++++++ src/components/Editor.js | 2 ++ src/components/Root.js | 3 ++- 4 files changed, 58 insertions(+), 5 deletions(-) create mode 100644 src/components/Dashboard.js diff --git a/src/components/AppBar.js b/src/components/AppBar.js index f3c01ad..a2f2318 100644 --- a/src/components/AppBar.js +++ b/src/components/AppBar.js @@ -10,7 +10,6 @@ import MenuItem from '@material-ui/core/MenuItem'; import Menu from '@material-ui/core/Menu'; import { fade } from '@material-ui/core/styles/colorManipulator'; import { withStyles } from '@material-ui/core/styles'; -import MenuIcon from '@material-ui/icons/Menu'; import SearchIcon from '@material-ui/icons/Search'; import AccountCircle from '@material-ui/icons/AccountCircle'; import MailIcon from '@material-ui/icons/Mail'; @@ -167,7 +166,7 @@ class PrimarySearchAppBar extends React.Component { - {/* Insertlogohere */} + How To
@@ -183,11 +182,11 @@ class PrimarySearchAppBar extends React.Component {
- + {/* - + */} diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js new file mode 100644 index 0000000..a6664d8 --- /dev/null +++ b/src/components/Dashboard.js @@ -0,0 +1,51 @@ +import React, { Component } from 'react'; +// import { Provider } from 'react-redux'; +// import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; +// import { createGlobalStyle } from 'styled-components'; +// import theme from '../theme'; +import Paper from '@material-ui/core/Paper'; +import AppBar from './AppBar'; +import TodoCard from './TodoCard'; +import Grid from '@material-ui/core/Grid'; +import Editor from './Editor'; +import DraftCard from './DraftCard'; + +class App extends Component { +render() { + return ( +
+ +

Make A How-To

+
+
+

Card

+
+ + + +
+

How To

+ + + + + + + + + + + +
+

Community

+
+

How to

+ + + +
+ ) +} +} + +export default App; \ No newline at end of file diff --git a/src/components/Editor.js b/src/components/Editor.js index 61f2fb1..360ffd0 100644 --- a/src/components/Editor.js +++ b/src/components/Editor.js @@ -3,6 +3,8 @@ import React from 'react'; import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css'; + + class Editor extends React.Component { constructor(props) { super(props) diff --git a/src/components/Root.js b/src/components/Root.js index efea333..d41a2c9 100644 --- a/src/components/Root.js +++ b/src/components/Root.js @@ -5,6 +5,7 @@ import { createGlobalStyle } from 'styled-components'; import theme from '../theme'; // import PrivateRoute from './PrivateRoute'; import { MuiThemeProvider } from '@material-ui/core/styles'; +import Dashboard from './Dashboard'; import App from './App'; import Login from './Login'; @@ -25,7 +26,7 @@ const Root = ({ store }) => ( /> - + {/* */}