relocation status
This commit is contained in:
parent
c7e7a70f18
commit
35cc2f6cdb
|
|
@ -1168,6 +1168,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
|
||||||
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
|
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
|
||||||
},
|
},
|
||||||
|
"@emotion/hash": {
|
||||||
|
"version": "0.8.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
||||||
|
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
|
||||||
|
},
|
||||||
"@emotion/is-prop-valid": {
|
"@emotion/is-prop-valid": {
|
||||||
"version": "0.8.8",
|
"version": "0.8.8",
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
|
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
|
||||||
|
|
@ -1803,6 +1808,88 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@material-ui/core": {
|
||||||
|
"version": "4.11.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.2.tgz",
|
||||||
|
"integrity": "sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.4.4",
|
||||||
|
"@material-ui/styles": "^4.11.2",
|
||||||
|
"@material-ui/system": "^4.11.2",
|
||||||
|
"@material-ui/types": "^5.1.0",
|
||||||
|
"@material-ui/utils": "^4.11.2",
|
||||||
|
"@types/react-transition-group": "^4.2.0",
|
||||||
|
"clsx": "^1.0.4",
|
||||||
|
"hoist-non-react-statics": "^3.3.2",
|
||||||
|
"popper.js": "1.16.1-lts",
|
||||||
|
"prop-types": "^15.7.2",
|
||||||
|
"react-is": "^16.8.0 || ^17.0.0",
|
||||||
|
"react-transition-group": "^4.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@material-ui/styles": {
|
||||||
|
"version": "4.11.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.2.tgz",
|
||||||
|
"integrity": "sha512-xbItf8zkfD3FuGoD9f2vlcyPf9jTEtj9YTJoNNV+NMWaSAHXgrW6geqRoo/IwBuMjqpwqsZhct13e2nUyU9Ljw==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.4.4",
|
||||||
|
"@emotion/hash": "^0.8.0",
|
||||||
|
"@material-ui/types": "^5.1.0",
|
||||||
|
"@material-ui/utils": "^4.11.2",
|
||||||
|
"clsx": "^1.0.4",
|
||||||
|
"csstype": "^2.5.2",
|
||||||
|
"hoist-non-react-statics": "^3.3.2",
|
||||||
|
"jss": "^10.0.3",
|
||||||
|
"jss-plugin-camel-case": "^10.0.3",
|
||||||
|
"jss-plugin-default-unit": "^10.0.3",
|
||||||
|
"jss-plugin-global": "^10.0.3",
|
||||||
|
"jss-plugin-nested": "^10.0.3",
|
||||||
|
"jss-plugin-props-sort": "^10.0.3",
|
||||||
|
"jss-plugin-rule-value-function": "^10.0.3",
|
||||||
|
"jss-plugin-vendor-prefixer": "^10.0.3",
|
||||||
|
"prop-types": "^15.7.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"csstype": {
|
||||||
|
"version": "2.6.14",
|
||||||
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
|
||||||
|
"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@material-ui/system": {
|
||||||
|
"version": "4.11.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.2.tgz",
|
||||||
|
"integrity": "sha512-BELFJEel5E+5DMiZb6XXT3peWRn6UixRvBtKwSxqntmD0+zwbbfCij6jtGwwdJhN1qX/aXrKu10zX31GBaeR7A==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.4.4",
|
||||||
|
"@material-ui/utils": "^4.11.2",
|
||||||
|
"csstype": "^2.5.2",
|
||||||
|
"prop-types": "^15.7.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"csstype": {
|
||||||
|
"version": "2.6.14",
|
||||||
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
|
||||||
|
"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@material-ui/types": {
|
||||||
|
"version": "5.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
|
||||||
|
"integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
|
||||||
|
},
|
||||||
|
"@material-ui/utils": {
|
||||||
|
"version": "4.11.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
|
||||||
|
"integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.4.4",
|
||||||
|
"prop-types": "^15.7.2",
|
||||||
|
"react-is": "^16.8.0 || ^17.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@nodelib/fs.scandir": {
|
"@nodelib/fs.scandir": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
|
||||||
|
|
@ -4062,6 +4149,11 @@
|
||||||
"shallow-clone": "^0.1.2"
|
"shallow-clone": "^0.1.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"clsx": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
|
||||||
|
},
|
||||||
"co": {
|
"co": {
|
||||||
"version": "4.6.0",
|
"version": "4.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
||||||
|
|
@ -4580,6 +4672,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"css-vendor": {
|
||||||
|
"version": "2.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
|
||||||
|
"integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.8.3",
|
||||||
|
"is-in-browser": "^1.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"css-what": {
|
"css-what": {
|
||||||
"version": "3.4.2",
|
"version": "3.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
|
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
|
||||||
|
|
@ -7448,6 +7549,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
|
||||||
"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
|
"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
|
||||||
},
|
},
|
||||||
|
"hyphenate-style-name": {
|
||||||
|
"version": "1.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
|
||||||
|
"integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
|
||||||
|
},
|
||||||
"iconv-lite": {
|
"iconv-lite": {
|
||||||
"version": "0.4.24",
|
"version": "0.4.24",
|
||||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||||
|
|
@ -7548,6 +7654,14 @@
|
||||||
"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
|
||||||
"integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
|
"integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
|
||||||
},
|
},
|
||||||
|
"indefinite-observable": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
|
||||||
|
"requires": {
|
||||||
|
"symbol-observable": "1.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"indent-string": {
|
"indent-string": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
|
||||||
|
|
@ -7848,6 +7962,11 @@
|
||||||
"is-extglob": "^2.1.1"
|
"is-extglob": "^2.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"is-in-browser": {
|
||||||
|
"version": "1.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
|
||||||
|
"integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
|
||||||
|
},
|
||||||
"is-module": {
|
"is-module": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
|
||||||
|
|
@ -9662,6 +9781,85 @@
|
||||||
"verror": "1.10.0"
|
"verror": "1.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"jss": {
|
||||||
|
"version": "10.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz",
|
||||||
|
"integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"csstype": "^3.0.2",
|
||||||
|
"indefinite-observable": "^2.0.1",
|
||||||
|
"is-in-browser": "^1.1.3",
|
||||||
|
"tiny-warning": "^1.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-camel-case": {
|
||||||
|
"version": "10.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz",
|
||||||
|
"integrity": "sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"hyphenate-style-name": "^1.0.3",
|
||||||
|
"jss": "10.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-default-unit": {
|
||||||
|
"version": "10.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz",
|
||||||
|
"integrity": "sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"jss": "10.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-global": {
|
||||||
|
"version": "10.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz",
|
||||||
|
"integrity": "sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"jss": "10.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-nested": {
|
||||||
|
"version": "10.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz",
|
||||||
|
"integrity": "sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"jss": "10.5.0",
|
||||||
|
"tiny-warning": "^1.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-props-sort": {
|
||||||
|
"version": "10.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz",
|
||||||
|
"integrity": "sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"jss": "10.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-rule-value-function": {
|
||||||
|
"version": "10.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz",
|
||||||
|
"integrity": "sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"jss": "10.5.0",
|
||||||
|
"tiny-warning": "^1.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"jss-plugin-vendor-prefixer": {
|
||||||
|
"version": "10.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz",
|
||||||
|
"integrity": "sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"css-vendor": "^2.0.8",
|
||||||
|
"jss": "10.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"jsx-ast-utils": {
|
"jsx-ast-utils": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.1.0.tgz",
|
||||||
|
|
@ -11091,6 +11289,11 @@
|
||||||
"ts-pnp": "^1.1.6"
|
"ts-pnp": "^1.1.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"popper.js": {
|
||||||
|
"version": "1.16.1-lts",
|
||||||
|
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
|
||||||
|
"integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
|
||||||
|
},
|
||||||
"portfinder": {
|
"portfinder": {
|
||||||
"version": "1.0.28",
|
"version": "1.0.28",
|
||||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
|
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@material-ui/core": "^4.11.2",
|
||||||
"@testing-library/jest-dom": "^5.11.5",
|
"@testing-library/jest-dom": "^5.11.5",
|
||||||
"@testing-library/react": "^11.1.0",
|
"@testing-library/react": "^11.1.0",
|
||||||
"@testing-library/user-event": "^12.1.10",
|
"@testing-library/user-event": "^12.1.10",
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import { Router,BrowserRouter, Route, Switch } from 'react-router-dom';
|
||||||
import UserContext from "./context/UserContext";
|
import UserContext from "./context/UserContext";
|
||||||
import Tracking from "./components/Tracking";
|
import Tracking from "./components/Tracking";
|
||||||
import Options from "./components/Options";
|
import Options from "./components/Options";
|
||||||
|
import Stepper from './components/Stepper';
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const [userData, setUserData ] = useState({
|
const [userData, setUserData ] = useState({
|
||||||
|
|
@ -50,7 +51,7 @@ export default function App() {
|
||||||
<Route exact path="/" component={HomePage} />
|
<Route exact path="/" component={HomePage} />
|
||||||
<Route path="/user" component={LogInContainer} />
|
<Route path="/user" component={LogInContainer} />
|
||||||
<Route path="/pricing" component={PricingPlan} />
|
<Route path="/pricing" component={PricingPlan} />
|
||||||
<Route path="/track" component={Tracking} />
|
<Route path="/track" component={Stepper} />
|
||||||
<Route path="/options" component={Options} />
|
<Route path="/options" component={Options} />
|
||||||
</Switch>
|
</Switch>
|
||||||
</UserContext.Provider>
|
</UserContext.Provider>
|
||||||
|
|
|
||||||
|
|
@ -38,12 +38,13 @@ export default function NavBar() {
|
||||||
<li><a href="#">About</a></li>
|
<li><a href="#">About</a></li>
|
||||||
<li><a href="#">Services</a></li>
|
<li><a href="#">Services</a></li>
|
||||||
<li><a href="#">Contact us</a></li>
|
<li><a href="#">Contact us</a></li>
|
||||||
|
<li><a href="#" onClick={logout}>Log Out</a></li>
|
||||||
{userData.user ? (
|
{userData.user ? (
|
||||||
<li><a href="#" onClick={logout}>Log Out</a></li>
|
<li><a href="#" onClick={logout}>Log Out</a></li>
|
||||||
) : (
|
) : (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<li><a href="#" onclick={register}>Register</a></li>
|
<li><a href="#" onclick={register}>Register</a></li>
|
||||||
<li><button type="button" onclick={login}>login</button></li>
|
<li><a href="#" onclick={login}>login</a></li>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,52 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import "./options.css";
|
import './options.css';
|
||||||
|
|
||||||
export default function Options() {
|
export default function Options() {
|
||||||
|
|
||||||
const previousBtn = document.getElementById('previousBtn');
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const nextBtn = document.getElementById('nextBtn');
|
const previousBtn = document.getElementById('previousBtn');
|
||||||
const finishBtn = document.getElementById('finishBtn');
|
const nextBtn = document.getElementById('nextBtn');
|
||||||
const content = document.getElementById('content');
|
const finishBtn = document.getElementById('finishBtn');
|
||||||
const bullets = [...document.querySelectorAll('.bullet')];
|
const content = document.getElementById('content');
|
||||||
|
const bullets = [...document.querySelectorAll('.bullet')];
|
||||||
|
|
||||||
const MAX_STEPS = 4;
|
const MAX_STEPS = 4;
|
||||||
let currentStep = 1;
|
let currentStep = 1;
|
||||||
if(nextBtn){
|
if (nextBtn) {
|
||||||
nextBtn.addEventListener('click', () => {
|
nextBtn.addEventListener('click', () => {
|
||||||
bullets[currentStep - 1].classList.add('completed');
|
bullets[currentStep - 1].classList.add('completed');
|
||||||
currentStep += 1;
|
currentStep += 1;
|
||||||
previousBtn.disabled = false;
|
previousBtn.disabled = false;
|
||||||
if (currentStep === MAX_STEPS) {
|
if (currentStep === MAX_STEPS) {
|
||||||
nextBtn.disabled = true;
|
nextBtn.disabled = true;
|
||||||
finishBtn.disabled = false;
|
finishBtn.disabled = false;
|
||||||
|
}
|
||||||
|
content.innerText = `Step Number ${currentStep}`;
|
||||||
|
|
||||||
|
});
|
||||||
}
|
}
|
||||||
content.innerText = `Step Number ${currentStep}`;
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
if(previousBtn){
|
if (previousBtn) {
|
||||||
previousBtn.addEventListener('click', () => {
|
previousBtn.addEventListener('click', () => {
|
||||||
bullets[currentStep - 2].classList.remove('completed');
|
bullets[currentStep - 2].classList.remove('completed');
|
||||||
currentStep -= 1;
|
currentStep -= 1;
|
||||||
nextBtn.disabled = false;
|
nextBtn.disabled = false;
|
||||||
finishBtn.disabled = true;
|
finishBtn.disabled = true;
|
||||||
if (currentStep === 1) {
|
if (currentStep === 1) {
|
||||||
previousBtn.disabled = true;
|
previousBtn.disabled = true;
|
||||||
|
}
|
||||||
|
content.innerText = `Step Number ${currentStep}`;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
content.innerText = `Step Number ${currentStep}`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if(finishBtn){
|
if (finishBtn) {
|
||||||
finishBtn.addEventListener('click', () => {
|
finishBtn.addEventListener('click', () => {
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './stepper.css';
|
||||||
|
|
||||||
|
export default function Stepper() {
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
var list = document.getElementById('progress'),
|
||||||
|
next = document.getElementById('next'),
|
||||||
|
clear = document.getElementById('clear'),
|
||||||
|
children = list.children,
|
||||||
|
completed = 0;
|
||||||
|
|
||||||
|
// simulate activating a node
|
||||||
|
next.addEventListener('click', function () {
|
||||||
|
|
||||||
|
// count the number of completed nodes.
|
||||||
|
completed = (completed === 0) ? 1 : completed + 2;
|
||||||
|
if (completed > children.length) return;
|
||||||
|
|
||||||
|
// for each node that is completed, reflect the status
|
||||||
|
// and show a green color!
|
||||||
|
for (var i = 0; i < completed; i++) {
|
||||||
|
children[i].children[0].classList.remove('grey');
|
||||||
|
children[i].children[0].classList.add('green');
|
||||||
|
|
||||||
|
// if this child is a node and not divider,
|
||||||
|
// make it shine a little more
|
||||||
|
if (i % 2 === 0) {
|
||||||
|
children[i].children[0].classList.add('activated');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
// clear the activated state of the markers
|
||||||
|
clear.addEventListener('click', function () {
|
||||||
|
for (var i = 0; i < children.length; i++) {
|
||||||
|
children[i].children[0].classList.remove('green');
|
||||||
|
children[i].children[0].classList.remove('activated');
|
||||||
|
children[i].children[0].classList.add('grey');
|
||||||
|
}
|
||||||
|
completed = 0;
|
||||||
|
}, false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="container">
|
||||||
|
<h1>Relocation Status</h1>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<ul id="progress">
|
||||||
|
<li><div class="node green"></div><p>Transport tickets confirmed</p></li>
|
||||||
|
<li><div class="divider grey"></div></li>
|
||||||
|
<li><div class="node grey"></div><p>Packers & movers due to come in a day</p></li>
|
||||||
|
<li><div class="divider grey"></div></li>
|
||||||
|
<li><div class="node grey"></div><p>school admission being confirmed</p></li>
|
||||||
|
<li><div class="divider grey"></div></li>
|
||||||
|
<li><div class="node grey"></div><p>House is empty</p></li>
|
||||||
|
</ul>
|
||||||
|
<input type="button" value="Next" id="next" />
|
||||||
|
<input type="button" value="Clear" id="clear" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,18 +1,101 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import "./tracking.css";
|
import './tracking.css';
|
||||||
|
|
||||||
export default function Tracking() {
|
export default function Tracking() {
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const previousBtn = document.getElementById('previousBtn');
|
||||||
|
const nextBtn = document.getElementById('nextBtn');
|
||||||
|
const finishBtn = document.getElementById('finishBtn');
|
||||||
|
const content = document.getElementById('content');
|
||||||
|
const nodes = [...document.querySelectorAll('.node')];
|
||||||
|
const dividers = [...document.querySelectorAll('.divider')];
|
||||||
|
|
||||||
|
const MAX_STEPS = 4;
|
||||||
|
let currentStep = 1;
|
||||||
|
if (nextBtn) {
|
||||||
|
nextBtn.addEventListener('click', () => {
|
||||||
|
nodes[currentStep - 1].classList.add('completed');
|
||||||
|
currentStep += 1;
|
||||||
|
previousBtn.disabled = false;
|
||||||
|
if (currentStep === MAX_STEPS) {
|
||||||
|
nextBtn.disabled = true;
|
||||||
|
finishBtn.disabled = false;
|
||||||
|
}
|
||||||
|
content.innerText = `Step Number ${currentStep}`;
|
||||||
|
dividers[currentStep -1 ].classList.add('completed');
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (previousBtn) {
|
||||||
|
previousBtn.addEventListener('click', () => {
|
||||||
|
nodes[currentStep - 2].classList.remove('completed');
|
||||||
|
currentStep -= 1;
|
||||||
|
nextBtn.disabled = false;
|
||||||
|
finishBtn.disabled = true;
|
||||||
|
if (currentStep === 1) {
|
||||||
|
previousBtn.disabled = true;
|
||||||
|
}
|
||||||
|
content.innerText = `Step Number ${currentStep}`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (finishBtn) {
|
||||||
|
finishBtn.addEventListener('click', () => {
|
||||||
|
window.location.reload();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
return (
|
return (
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<ul class="StepProgress">
|
<ul class="StepProgressBar">
|
||||||
<li class="StepProgress-item is-done"><strong>Post a contest</strong></li>
|
<li class="step">
|
||||||
<li class="StepProgress-item is-done"><strong>Award an entry</strong>
|
<p class="step-text">
|
||||||
Got more entries that you love? Buy more entries anytime! Just hover on your favorite entry and click the Buy button
|
|
||||||
</li>
|
</p>
|
||||||
<li class="StepProgress-item current"><strong>Post a contest</strong></li>
|
<div class="node">
|
||||||
<li class="StepProgress-item"><strong>Handover</strong></li>
|
1
|
||||||
<li class="StepProgress-item"><strong>Provide feedback</strong></li>
|
</div>
|
||||||
|
</li>
|
||||||
|
<li><div class="divider"></div></li>
|
||||||
|
<li class="step">
|
||||||
|
<p class="step-text">
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<div class="node">
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li><div class="divider"></div></li>
|
||||||
|
<li class="step">
|
||||||
|
<p class="step-text">
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<div class="node">
|
||||||
|
3
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li><div class="divider"></div></li>
|
||||||
|
<li class="step">
|
||||||
|
<p class="step-text">
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<div class="node">
|
||||||
|
4
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li><div class="divider"></div></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<div class="main">
|
||||||
|
<p id="content" class="text-center">Step Number 1</p>
|
||||||
|
<button id="previousBtn" >Previous</button>
|
||||||
|
<button id="nextBtn">Next</button>
|
||||||
|
<button id="finishBtn" >Finish</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
*, *:after, *:before { margin:0; padding:0; }
|
||||||
|
body {
|
||||||
|
padding: 15px;
|
||||||
|
font-family: Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="button"] {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
margin-left:0px;
|
||||||
|
max-width: 100vw;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-family: Ubuntu;
|
||||||
|
text-align: left;
|
||||||
|
color: #66bfbf;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.node {
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
border-radius: 100%;
|
||||||
|
display:inline-block;
|
||||||
|
transition: all 1000ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activated {
|
||||||
|
box-shadow: 0px 0px 0px 0px rgba(194, 255, 194, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 86px;
|
||||||
|
width: 2px;
|
||||||
|
margin-left: 4px;
|
||||||
|
transition: all 800ms ease;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-bottom: 0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li p {
|
||||||
|
display:inline-block;
|
||||||
|
margin-left: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
line-height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.blue { background-color: rgba(82, 165, 255, 1); }
|
||||||
|
.green{ background-color: rgba(92, 184, 92, 1) }
|
||||||
|
.red { background-color: rgba(255, 148, 148, 1); }
|
||||||
|
.grey { background-color: rgba(201, 201, 201, 1); }
|
||||||
|
|
@ -1,79 +1,53 @@
|
||||||
.wrapper {
|
*, *:after, *:before { margin:0; padding:0; }
|
||||||
width: 100vw;
|
.wrapper{
|
||||||
font-family: 'Helvetica';
|
max-width: 400px;
|
||||||
font-size: 14px;
|
margin: 0 auto;
|
||||||
border: 1px solid #CCC;
|
margin-top: 20px;
|
||||||
height: 100vh;
|
padding: 40px;
|
||||||
|
|
||||||
}
|
}
|
||||||
.StepProgress {
|
.stepProgressBar {
|
||||||
position: relative;
|
display: flex;
|
||||||
padding-left: 45px;
|
justify-content: space-between;
|
||||||
list-style: none;
|
align-items: flex-start;
|
||||||
|
width: 300px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
.StepProgress::before {
|
li{
|
||||||
display: inline-block;
|
list-style-type: none;
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 15px;
|
|
||||||
width: 10px;
|
|
||||||
height: 100%;
|
|
||||||
border-left: 2px solid #CCC;
|
|
||||||
}
|
}
|
||||||
.StepProgress-item {
|
.node {
|
||||||
position: relative;
|
border: 1px solid #28a745;
|
||||||
counter-increment: list;
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 100%;
|
||||||
|
color: #28a745;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
transition: background-color 500ms;
|
||||||
|
line-height:20px;
|
||||||
}
|
}
|
||||||
.StepProgress-item:not(:last-child) {
|
.node.completed {
|
||||||
padding-bottom: 20px;
|
content: "";
|
||||||
|
color: white;
|
||||||
|
background-color: #28a745;
|
||||||
}
|
}
|
||||||
.StepProgress-item::before {
|
|
||||||
display: inline-block;
|
.node.completed::after {
|
||||||
content: '';
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -30px;
|
height: 1px;
|
||||||
height: 100%;
|
width: 54px;
|
||||||
width: 10px;
|
background-color: #28a745;
|
||||||
}
|
}
|
||||||
.StepProgress-item::after {
|
|
||||||
content: '';
|
.divider.completed::after{
|
||||||
display: inline-block;
|
list-style-type: none;
|
||||||
position: absolute;
|
background-color: grey;
|
||||||
top: 0;
|
position: relative;
|
||||||
left: -37px;
|
height: 80px;
|
||||||
width: 12px;
|
width: 2px;
|
||||||
height: 12px;
|
margin-left: 134px;
|
||||||
border: 2px solid #CCC;
|
transition: all 800ms ease;
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #FFF;
|
|
||||||
}
|
|
||||||
.StepProgress-item.is-done::before {
|
|
||||||
border-left: 5px solid green;
|
|
||||||
}
|
|
||||||
.StepProgress-item.is-done::after {
|
|
||||||
content: "✔";
|
|
||||||
font-size: 10px;
|
|
||||||
color: #FFF;
|
|
||||||
text-align: center;
|
|
||||||
border: 10px solid green;
|
|
||||||
background-color: green;
|
|
||||||
}
|
|
||||||
.StepProgress-item.current::before {
|
|
||||||
border-left: 2px solid green;
|
|
||||||
}
|
|
||||||
.StepProgress-item.current::after {
|
|
||||||
content: counter(list);
|
|
||||||
padding-top: 1px;
|
|
||||||
width: 19px;
|
|
||||||
height: 18px;
|
|
||||||
top: -4px;
|
|
||||||
left: -40px;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
color: green;
|
|
||||||
border: 2px solid green;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
.StepProgress strong {
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue