From 06d84b70ec88db6ad839979ca1bcd15eda73ac2c Mon Sep 17 00:00:00 2001 From: autumn-ragland Date: Sat, 25 May 2019 11:50:41 -0500 Subject: [PATCH] bootstrap checkin --- client/package-lock.json | 203 +++++++++++++++++++++++++++++++++++ client/package.json | 2 + client/src/App.css | 52 +++++---- client/src/App.js | 29 +++-- client/src/TwitterHome.js | 2 + client/src/TwitterProfile.js | 12 ++- server/routes/users.js | 2 +- 7 files changed, 264 insertions(+), 38 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index a53578c..fbcf9f0 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -897,6 +897,39 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, + "@react-bootstrap/react-popper": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz", + "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==", + "requires": { + "babel-runtime": "6.x.x", + "create-react-context": "^0.2.1", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.5", + "warning": "^3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, + "@restart/context": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", + "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" + }, + "@restart/hooks": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.2.13.tgz", + "integrity": "sha512-riuYub4Xx/Pk+YUPRHZPwJd2+rAJSsRd4Pqkqvhzu+AbkDdNi4y+kYEQicnAofbfTA5apRPm3cK9sWc6Gj5DNg==" + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -2497,6 +2530,11 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", + "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -3456,6 +3494,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -4646,6 +4689,14 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "requires": { + "@babel/runtime": "^7.1.2" + } + }, "dom-serializer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz", @@ -9019,6 +9070,11 @@ "array-includes": "^3.0.3" } }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -10392,6 +10448,11 @@ "ts-pnp": "^1.0.0" } }, + "popper.js": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz", + "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" + }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", @@ -12744,6 +12805,25 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz", + "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==", + "requires": { + "react-is": "^16.3.2", + "warning": "^3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, "property-information": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.0.1.tgz", @@ -12952,6 +13032,48 @@ } } }, + "react-bootstrap": { + "version": "1.0.0-beta.8", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.8.tgz", + "integrity": "sha512-rdCJbjBMIVzjeKrploQJMpmpVkndsPDFH+NBGM5npefL+oA5WBEzURgllWLbKdb3mmuuJamilt4j7+Dg7yTxBQ==", + "requires": { + "@babel/runtime": "^7.4.2", + "@react-bootstrap/react-popper": "1.2.1", + "@restart/context": "^2.1.4", + "@restart/hooks": "^0.2.3", + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "invariant": "^2.2.4", + "keycode": "^2.2.0", + "popper.js": "^1.14.7", + "prop-types": "^15.7.2", + "prop-types-extra": "^1.1.0", + "react-overlays": "^1.2.0", + "react-transition-group": "^2.7.1", + "uncontrollable": "^6.1.0", + "warning": "^4.0.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz", + "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "regenerator-runtime": { + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz", + "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==" + } + } + }, + "react-context-toolbox": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz", + "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A==" + }, "react-dev-utils": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-8.0.0.tgz", @@ -13088,6 +13210,55 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-overlays": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.2.0.tgz", + "integrity": "sha512-i/FCV8wR6aRaI+Kz/dpJhOdyx+ah2tN1RhT9InPrexyC4uzf3N4bNayFTGtUeQVacj57j1Mqh1CwV60/5153Iw==", + "requires": { + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "prop-types": "^15.6.2", + "prop-types-extra": "^1.1.0", + "react-context-toolbox": "^2.0.2", + "react-popper": "^1.3.2", + "uncontrollable": "^6.0.0", + "warning": "^4.0.2" + } + }, + "react-popper": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz", + "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==", + "requires": { + "@babel/runtime": "^7.1.2", + "create-react-context": "<=0.2.2", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.7", + "warning": "^4.0.2" + }, + "dependencies": { + "create-react-context": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz", + "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==", + "requires": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + } + }, + "typed-styles": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" + } + } + }, "react-router": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.0.tgz", @@ -13679,6 +13850,17 @@ } } }, + "react-transition-group": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", + "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==", + "requires": { + "dom-helpers": "^3.4.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2", + "react-lifecycles-compat": "^3.0.4" + } + }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", @@ -15924,6 +16106,11 @@ "mime-types": "~2.1.18" } }, + "typed-styles": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz", + "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==" + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", @@ -15955,6 +16142,14 @@ } } }, + "uncontrollable": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.1.0.tgz", + "integrity": "sha512-2TzEm0pLKauMBZfAZXsgQvLpZHEp95891frCZdGDrSG7dWYaIQhedwLAzi0X8pR8KHNqlmuYEb2cEgbQzr050A==", + "requires": { + "invariant": "^2.2.4" + } + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -16325,6 +16520,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watch": { "version": "0.18.0", "resolved": "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz", diff --git a/client/package.json b/client/package.json index 6a09b42..b6be3a0 100644 --- a/client/package.json +++ b/client/package.json @@ -3,7 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "bootstrap": "^4.3.1", "react": "^16.8.6", + "react-bootstrap": "^1.0.0-beta.8", "react-dom": "^16.8.6", "react-router-dom": "^5.0.0", "react-scripts": "2.1.8" diff --git a/client/src/App.css b/client/src/App.css index b8063e3..d959027 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,5 +1,8 @@ +/*basic styling mostly overridden by bootstrap*/ .App { text-align: center; + align-content: center; + justify-content: center; } .linkStyle { @@ -9,17 +12,31 @@ .formStyle { margin: 1%; } - - +/*********************************************************************************************************************/ +/*profile page styling*/ .profileGrid { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(5,1fr); + margin-left: 10%; + margin-right: 10%; grid-template-rows: minmax(50px, 200px); } +.profileForm { + grid-column: 1; + grid-row: 2; +} +.profileTweets { + padding: 0; + margin: 0; + grid-column: 1/6; + grid-row: 2/5; + width: 100%; +} +/*user image styling*/ .profileImages { position: relative; - grid-column: 1; + grid-column: 3; text-align: center; height: 100%; margin: 1%; @@ -30,23 +47,16 @@ clip-path: circle(25% at center); } -.background { - position: absolute; - left: 40%; - bottom: 10%; - z-index: -1; - /*height:100%;*/ - clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); -} - -.profileForm { - grid-column: 2; -} - -.profileTweets { - grid-column: 1/3; - grid-row: 2; -} +/*.background {*/ +/* position: absolute;*/ +/* left: 40%;*/ +/* bottom: 10%;*/ +/* z-index: -1;*/ +/* !*height:100%;*!*/ +/* clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);*/ +/*}*/ +/*********************************************************************************************************************/ +/*tweet styling*/ .tweetGrid { display: grid; font-size: 25px; diff --git a/client/src/App.js b/client/src/App.js index 6492070..c7bc102 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -6,6 +6,7 @@ import TwitterRegistration from "./TwitterRegistration"; import TwitterProfile from "./TwitterProfile"; import EditTweet from "./EditTweet"; import TwitterSearch from "./TwitterSearch"; +import '../node_modules/bootstrap/dist/css/bootstrap.css'; class App extends Component { @@ -29,13 +30,16 @@ class App extends Component { if(this.state.username){ return ( -
-

Mock Twitter

- Home - Search - Profile - Logout +
+
+

Mock Twitter

+ Home + Search + Profile + Logout +
+ } /> } /> } /> @@ -46,12 +50,15 @@ class App extends Component { else{ return ( -
-

Mock Twitter

- Home - Search - Register +
+
+

Mock Twitter

+ Home + Search + Register +
+ } /> } /> } /> diff --git a/client/src/TwitterHome.js b/client/src/TwitterHome.js index a807484..07297e9 100644 --- a/client/src/TwitterHome.js +++ b/client/src/TwitterHome.js @@ -1,4 +1,5 @@ import React, {Component} from 'react'; +import '../node_modules/bootstrap/dist/css/bootstrap.css'; class TwitterHome extends Component { @@ -73,6 +74,7 @@ class TwitterHome extends Component {
) + } else{ return ('') diff --git a/client/src/TwitterProfile.js b/client/src/TwitterProfile.js index e0a7330..cb4062a 100644 --- a/client/src/TwitterProfile.js +++ b/client/src/TwitterProfile.js @@ -43,7 +43,9 @@ class TwitterProfile extends Component {

{eachTweet.tweetMessage}

- Edit + + +
}/> @@ -83,7 +85,7 @@ class TwitterProfile extends Component {
- + {/**/}
@@ -101,9 +103,9 @@ class TwitterProfile extends Component {
-
- -
+
diff --git a/server/routes/users.js b/server/routes/users.js index b0a3eb8..1fe8ae1 100644 --- a/server/routes/users.js +++ b/server/routes/users.js @@ -24,7 +24,7 @@ var createHash = function (password) { return bCrypt.hashSync(password, bCrypt.genSaltSync(10), null); }; -//cookie check afixme +//cookie check fixme // router.get('/', (req, res) => { // if (req.session.username) { // res.send(req.session.username);