diff --git a/README.md b/README.md index 5c8a57a..4722784 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,8 @@ - [Code Style](#code-style) - [License](#license) +screen shot 2019-02-08 at 16 53 57 + ## Development This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). diff --git a/package-lock.json b/package-lock.json index e6a0cf3..252dcf8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1016,6 +1016,11 @@ "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==", "dev": true }, + "@oceanprotocol/art": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@oceanprotocol/art/-/art-2.2.0.tgz", + "integrity": "sha512-p2n505t2K0zD1ZvGPhI6EsSviEVLCB7BYowhf/ONmVaWED138PaG4Z9nY6YuHU383uOoIWT+Lq3dLkFzDzstXw==" + }, "@oceanprotocol/keeper-contracts": { "version": "0.5.3", "resolved": "https://registry.npmjs.org/@oceanprotocol/keeper-contracts/-/keeper-contracts-0.5.3.tgz", @@ -1181,8 +1186,7 @@ "@types/prop-types": { "version": "15.5.8", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz", - "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw==", - "dev": true + "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw==" }, "@types/q": { "version": "1.5.1", @@ -1200,7 +1204,6 @@ "version": "16.8.2", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.2.tgz", "integrity": "sha512-6mcKsqlqkN9xADrwiUz2gm9Wg4iGnlVGciwBRYFQSMWG6MQjhOZ/AVnxn+6v8nslFgfYTV8fNdE6XwKu6va5PA==", - "dev": true, "requires": { "@types/prop-types": "*", "csstype": "^2.2.0" @@ -1215,6 +1218,14 @@ "@types/react": "*" } }, + "@types/react-helmet": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-5.0.8.tgz", + "integrity": "sha512-ZTr12eDAYI0yUiMx1K82EHqRYa8J1BOOLus+0gL+AkksUiIPwLE0wLiXa9FNqD8r9GXAi+yRPZImkRh1JNlTkQ==", + "requires": { + "@types/react": "*" + } + }, "@types/react-router": { "version": "4.4.3", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-4.4.3.tgz", @@ -3568,7 +3579,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3589,12 +3601,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3609,17 +3623,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3736,7 +3753,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3748,6 +3766,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3762,6 +3781,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3769,12 +3789,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3793,6 +3815,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3873,7 +3896,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3885,6 +3909,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3970,7 +3995,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -4006,6 +4032,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4025,6 +4052,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4068,12 +4096,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -5123,8 +5153,7 @@ "csstype": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.2.tgz", - "integrity": "sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow==", - "dev": true + "integrity": "sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow==" }, "currently-unhandled": { "version": "0.4.1", @@ -5293,8 +5322,7 @@ "deep-equal": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz", - "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=", - "dev": true + "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=" }, "deep-extend": { "version": "0.6.0", @@ -6432,6 +6460,11 @@ "clone-regexp": "^1.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -7576,7 +7609,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -7597,12 +7631,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7617,17 +7653,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -7744,7 +7783,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -7756,6 +7796,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7770,6 +7811,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7777,12 +7819,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -7801,6 +7845,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7881,7 +7926,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7893,6 +7939,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7978,7 +8025,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -8014,6 +8062,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8033,6 +8082,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8076,12 +8126,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -16508,6 +16560,17 @@ "integrity": "sha512-7kEBKwU9R8fKnZJBRa5RSIfay4KJwnYvKB6gODGicUmDSAhQJ7Tdnll5S0RLtYrzRfMVXlqYw61rzrSpP4ThLQ==", "dev": true }, + "react-helmet": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.0.tgz", + "integrity": "sha1-qBgR3yExOm1VxfBYxK66XW89l6c=", + "requires": { + "deep-equal": "^1.0.1", + "object-assign": "^4.1.1", + "prop-types": "^15.5.4", + "react-side-effect": "^1.1.0" + } + }, "react-router": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", @@ -16866,6 +16929,15 @@ } } }, + "react-side-effect": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz", + "integrity": "sha512-Z2ZJE4p/jIfvUpiUMRydEVpQRf2f8GMHczT6qLcARmX7QRb28JDBTpnM2g/i5y/p7ZDEXYGHWg0RbhikE+hJRw==", + "requires": { + "exenv": "^1.2.1", + "shallowequal": "^1.0.1" + } + }, "read-pkg": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", @@ -18617,6 +18689,11 @@ } } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -22198,7 +22275,7 @@ "lodash": "^4.17.11", "oboe": "2.1.4", "url-parse": "1.4.4", - "websocket": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2", + "websocket": "git://github.com/frozeman/WebSocket-Node.git#browserifyCompatible", "xhr2-cookies": "1.1.0" }, "dependencies": { @@ -22243,7 +22320,7 @@ "requires": { "underscore": "1.8.3", "web3-core-helpers": "1.0.0-beta.37", - "websocket": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2" + "websocket": "git://github.com/frozeman/WebSocket-Node.git#browserifyCompatible" } }, "web3-shh": { diff --git a/package.json b/package.json index 222907c..5c7dd6c 100644 --- a/package.json +++ b/package.json @@ -15,12 +15,15 @@ "lint": "npm run lint:js && npm run lint:css" }, "dependencies": { + "@oceanprotocol/art": "^2.2.0", "@oceanprotocol/squid": "^0.2.8", + "@types/react-helmet": "^5.0.8", "classnames": "^2.2.6", "eslint": "^5.6.0", "query-string": "^6.2.0", "react": "^16.8.1", "react-dom": "^16.8.1", + "react-helmet": "^5.2.0", "react-router-dom": "^4.3.1", "slugify": "^1.3.4", "web3": "^1.0.0-beta.43" diff --git a/public/index.html b/public/index.html index 2a09d42..8a6f129 100644 --- a/public/index.html +++ b/public/index.html @@ -102,14 +102,5 @@
- + diff --git a/src/App.module.scss b/src/App.module.scss index e80d4a2..1fcb272 100644 --- a/src/App.module.scss +++ b/src/App.module.scss @@ -1,3 +1,14 @@ +@import './styles/variables'; + .app { height: 100%; + + // for sticky footer + display: flex; + min-height: calc(100vh - #{$page-frame * 2}); + flex-direction: column; +} + +.main { + flex: 1; } diff --git a/src/App.tsx b/src/App.tsx index 4838f8d..8446902 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,13 @@ import React, { Component } from 'react' import Web3 from 'web3' -import styles from './App.module.scss' +import { BrowserRouter as Router } from 'react-router-dom' +import Header from './components/Header' +import Footer from './components/Footer' import { User } from './context/User' import { provideOcean } from './ocean' import Routes from './Routes' import './styles/global.scss' +import styles from './App.module.scss' import { nodeHost, nodePort, nodeScheme } from './config' @@ -47,16 +50,6 @@ class App extends Component<{}, AppState> { this.bootstrap() } - public render() { - return ( -
- - - -
- ) - } - private startLoginProcess = async () => { this.setState({ isLoading: true }) if (window.web3) { @@ -107,6 +100,26 @@ class App extends Component<{}, AppState> { ocean }) } + + public render() { + return ( +
+ + + <> +
+ +
+ +
+ +
+ ) + } } export default App diff --git a/src/Routes.tsx b/src/Routes.tsx index a3dd58b..b7d6699 100644 --- a/src/Routes.tsx +++ b/src/Routes.tsx @@ -1,26 +1,24 @@ import React from 'react' -import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' +import { Route, Switch } from 'react-router-dom' -import About from './pages/About' -import Details from './pages/Details' -import Home from './pages/Home' -import NotFound from './pages/NotFound' -import Publish from './pages/Publish' -import Search from './pages/Search' -import Styleguide from './pages/Styleguide' +import About from './routes/About' +import Details from './routes/Details' +import Home from './routes/Home' +import NotFound from './routes/NotFound' +import Publish from './routes/Publish' +import Search from './routes/Search' +import Styleguide from './routes/Styleguide' const Routes = () => ( - - - - - - - - - - - + + + + + + + + + ) export default Routes diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss new file mode 100644 index 0000000..b337bd2 --- /dev/null +++ b/src/components/Footer.module.scss @@ -0,0 +1,59 @@ +@import '../styles/variables'; + +.footer { + color: $brand-grey-light; + width: 100%; + text-align: center; + margin-top: $spacer; + padding-top: $spacer; + padding-bottom: $spacer; + align-self: flex-end; + + > div { + align-self: flex-end; + + @media screen and (min-width: $break-point--small) { + text-align: left; + display: flex; + justify-content: space-between; + } + } + + &, + small { + font-size: $font-size-mini; + } + + a { + color: inherit; + + &:hover, + &:focus { + color: $brand-grey; + } + } + + svg { + display: inline-block; + width: $font-size-large; + height: $font-size-large; + } +} + +.links { + margin-top: $spacer / 2; + + @media screen and (min-width: $break-point--small) { + text-align: right; + margin-top: 0; + } + + a { + margin: 0 $spacer / 2; + display: inline-block; + + &:last-child { + margin-right: 0; + } + } +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..a1fe280 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import Content from '../components/atoms/Content' +import styles from './Footer.module.scss' + +import meta from '../data/meta.json' + +const Footer = () => ( + +) + +export default Footer diff --git a/src/components/Header.module.scss b/src/components/Header.module.scss new file mode 100644 index 0000000..4538491 --- /dev/null +++ b/src/components/Header.module.scss @@ -0,0 +1,96 @@ +@import '../styles/variables'; + +.header { + // background: $brand-black + // url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center -6rem; + // background-size: cover; + width: 100%; + padding: $spacer / 2 0; +} + +.headerContent { + composes: wide from './atoms/Content.module.scss'; + display: flex; + align-items: center; +} + +.headerLogo { + display: flex; + align-items: center; + cursor: pointer; + + &:hover, + &:focus, + &:active { + transform: none; + } +} + +.headerLogoImage { + width: 4rem; + height: 4rem; + fill: #fff; + margin: 0; +} + +.headerTitle { + font-size: $font-size-h3; + color: $brand-grey-light; + margin-left: $spacer / 2; + display: none; + + @media (min-width: $break-point--medium) { + display: inline-block; + } +} + +.headerMenu { + flex: 1; + justify-self: flex-end; + text-align: right; + white-space: nowrap; + overflow-y: hidden; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + margin-right: -($spacer / 2); + padding-right: $spacer; + + @media (min-width: $break-point--medium) { + padding-right: 0; + margin-right: 0; + } + + &::-webkit-scrollbar, + &::-moz-scrollbar { + display: none; + } + + &::-webkit-scrollbar { + width: 3px; + height: 3px; + transition: opacity .2s ease-out; + } +} + +.link { + display: inline-block; + margin: 0 $spacer / 2; + font-family: $font-family-button; + color: $brand-grey; + + &:last-child { + margin-right: 0; + } + + &:hover, + &:focus, + &:active { + color: $brand-pink; + } +} + +.linkActive { + composes: link; + color: $brand-pink; + pointer-events: none; +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..79afc75 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import { NavLink } from 'react-router-dom' +import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg' +import styles from './Header.module.scss' + +import menu from '../data/menu.json' +import meta from '../data/meta.json' + +const Header = () => ( +
+
+ + +

{meta.title}

+ + + +
+
+) + +export default Header diff --git a/src/components/atoms/Button.module.scss b/src/components/atoms/Button.module.scss index 1aa8a8f..c298a64 100644 --- a/src/components/atoms/Button.module.scss +++ b/src/components/atoms/Button.module.scss @@ -66,6 +66,7 @@ padding: 0; color: $brand-pink; font-size: $font-size-base; + font-family: inherit; box-shadow: none; cursor: pointer; } diff --git a/src/components/atoms/Content.module.scss b/src/components/atoms/Content.module.scss new file mode 100644 index 0000000..2c0860d --- /dev/null +++ b/src/components/atoms/Content.module.scss @@ -0,0 +1,16 @@ +@import '../../styles/variables'; + +.content { + padding: 0 $spacer / 1.5; + max-width: $break-point--small; + margin: 0 auto; + + @media (min-width: $break-point--small) { + padding: 0 $spacer; + } +} + +.wide { + composes: content; + max-width: $break-point--large; +} diff --git a/src/components/atoms/Content.tsx b/src/components/atoms/Content.tsx new file mode 100644 index 0000000..190d4da --- /dev/null +++ b/src/components/atoms/Content.tsx @@ -0,0 +1,8 @@ +import React from 'react' +import styles from './Content.module.scss' + +const Content = ({ wide, children }: { wide?: boolean; children: any }) => ( +
{children}
+) + +export default Content diff --git a/src/components/atoms/Form/Form.module.scss b/src/components/atoms/Form/Form.module.scss index 32288d5..27fb268 100644 --- a/src/components/atoms/Form/Form.module.scss +++ b/src/components/atoms/Form/Form.module.scss @@ -2,9 +2,6 @@ .form { width: 100%; - margin: 0 auto; - margin-top: 4rem; - max-width: 40rem; fieldset { border: 0; diff --git a/src/components/atoms/Form/Form.tsx b/src/components/atoms/Form/Form.tsx index 3db8a37..3ef1cfc 100644 --- a/src/components/atoms/Form/Form.tsx +++ b/src/components/atoms/Form/Form.tsx @@ -14,10 +14,14 @@ const Form = ({ onSubmit?: any }) => (
-
-

{title}

-

{description}

-
+ {title && ( +
+

{title}

+ {description && ( +

{description}

+ )} +
+ )} {children}
diff --git a/src/components/atoms/Form/Input.module.scss b/src/components/atoms/Form/Input.module.scss index 55c86b9..2883c0f 100644 --- a/src/components/atoms/Form/Input.module.scss +++ b/src/components/atoms/Form/Input.module.scss @@ -3,7 +3,6 @@ .inputWrap { background: $brand-gradient; border-radius: $border-radius; - width: 100%; padding: 2px; display: flex; position: relative; @@ -17,16 +16,16 @@ composes: inputWrap; .input { - padding-left: $spacer / 1.25; + padding-left: $spacer * 1.5; } svg { position: absolute; - left: $spacer / 3; + left: $spacer / 2; width: 1.25rem; height: 1.25rem; top: 50%; - margin-top: -.75rem; + margin-top: -.6rem; fill: rgba($brand-grey-light, .7); } } diff --git a/src/components/atoms/Form/Input.tsx b/src/components/atoms/Form/Input.tsx index 19904b7..6ed0688 100644 --- a/src/components/atoms/Form/Input.tsx +++ b/src/components/atoms/Form/Input.tsx @@ -6,6 +6,7 @@ import Help from './Help' import styles from './Input.module.scss' import Label from './Label' import Row from './Row' +import InputGroup from './InputGroup' interface InputProps { name: string @@ -16,10 +17,11 @@ interface InputProps { tag?: string type?: string options?: string[] - additionalComponent?: void + additionalComponent?: any value?: string onChange?: any rows?: number + group?: any } interface InputState { @@ -50,6 +52,7 @@ export default class Input extends PureComponent { return (
+ {props.group ? ( + + + {props.group} + + ) : ( + + )} + + {props.type === 'search' && }
) } @@ -139,7 +151,6 @@ export default class Input extends PureComponent { onFocus={this.toggleFocus} onBlur={this.toggleFocus} /> - {type === 'search' && } {help && {help}} diff --git a/src/components/atoms/Form/InputGroup.module.scss b/src/components/atoms/Form/InputGroup.module.scss new file mode 100644 index 0000000..135e3d5 --- /dev/null +++ b/src/components/atoms/Form/InputGroup.module.scss @@ -0,0 +1,39 @@ +@import '../../../styles/variables'; + +.inputGroup { + width: 100%; + + @media screen and (min-width: $break-point--small) { + display: flex; + } + + > input { + @media screen and (min-width: $break-point--small) { + width: 75%; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + > button { + width: 100%; + position: absolute; + left: 0; + bottom: -120%; + + @media screen and (min-width: $break-point--small) { + position: relative; + bottom: auto; + width: 25%; + height: 100%; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + box-shadow: none; + } + + &:hover, + &:focus { + transform: none; + } + } +} diff --git a/src/components/atoms/Form/InputGroup.tsx b/src/components/atoms/Form/InputGroup.tsx new file mode 100644 index 0000000..3028575 --- /dev/null +++ b/src/components/atoms/Form/InputGroup.tsx @@ -0,0 +1,8 @@ +import React from 'react' +import styles from './InputGroup.module.scss' + +const InputGroup = ({ children }: { children: any }) => ( +
{children}
+) + +export default InputGroup diff --git a/src/components/templates/Route.module.scss b/src/components/templates/Route.module.scss new file mode 100644 index 0000000..00280f8 --- /dev/null +++ b/src/components/templates/Route.module.scss @@ -0,0 +1,15 @@ +@import '../../styles/variables'; + +.header { + margin-top: $spacer; + margin-bottom: $spacer * 2; + + h1 { + margin: 0; + } + + p { + margin-top: $spacer / 2; + font-size: $font-size-large; + } +} diff --git a/src/components/templates/Route.tsx b/src/components/templates/Route.tsx new file mode 100644 index 0000000..5153158 --- /dev/null +++ b/src/components/templates/Route.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import Helmet from 'react-helmet' +import Content from '../atoms/Content' +import styles from './Route.module.scss' +import meta from '../../data/meta.json' + +const Route = ({ + title, + description, + wide, + children, + className +}: { + title: string + description?: string + children: any + wide?: boolean + className?: string +}) => ( +
+ + {title} + {description && } + + + +
+

{title}

+ {description &&

{description}

} +
+ + {children} + +
+) + +export default Route diff --git a/src/data/form-publish.json b/src/data/form-publish.json index 309c3b0..1773f0e 100644 --- a/src/data/form-publish.json +++ b/src/data/form-publish.json @@ -38,14 +38,13 @@ "label": "Type", "type": "select", "required": true, - "options": ["", "Data set", "Algorithm", "Container", "Workflow", "Other"] + "options": ["Data set", "Algorithm", "Container", "Workflow", "Other"] }, "license": { "label": "License", "type": "select", "required": true, "options": [ - "No License Specified", "Public Domain", "CC BY: Attribution", "CC BY-SA: Attribution ShareAlike", @@ -66,7 +65,6 @@ "type": "select", "required": true, "options": [ - "", "Image Recognition", "Dataset Of Datasets", "Language", diff --git a/src/data/menu.json b/src/data/menu.json new file mode 100644 index 0000000..5dc0a19 --- /dev/null +++ b/src/data/menu.json @@ -0,0 +1,14 @@ +[ + { + "title": "Publish", + "link": "/publish" + }, + { + "title": "About", + "link": "/about" + }, + { + "title": "Styleguide", + "link": "/styleguide" + } +] diff --git a/src/data/meta.json b/src/data/meta.json new file mode 100644 index 0000000..29ee49e --- /dev/null +++ b/src/data/meta.json @@ -0,0 +1,31 @@ +{ + "title": "Commons", + "description": "A marketplace to find and publish open data sets in the Ocean Network.", + "company": "Ocean Protocol Foundation Ltd.", + "social": [ + { + "title": "Site", + "url": "https://oceanprotocol.com" + }, + { + "title": "Blog", + "url": "https://blog.oceanprotocol.com" + }, + { + "title": "Twitter", + "url": "https://twitter.com/oceanprotocol" + }, + { + "title": "GitHub", + "url": "https://github.com/oceanprotocol" + }, + { + "title": "Gitter", + "url": "https://gitter.im/oceanprotocol/Lobby" + }, + { + "title": "Telegram", + "url": "https://t.me/joinchat/GUyxrE0Hi154D0NrlOqLFg" + } + ] +} diff --git a/src/pages/About.module.scss b/src/pages/About.module.scss deleted file mode 100644 index 6aeff00..0000000 --- a/src/pages/About.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import '../styles/variables'; - -.about { - background: $brand-black; - color: $brand-white; - min-height: calc(100vh - #{$page-frame} * 2); - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - - > div { - text-align: center; - width: 100%; - } -} diff --git a/src/pages/About.tsx b/src/pages/About.tsx deleted file mode 100644 index 69e53b5..0000000 --- a/src/pages/About.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { Component } from 'react' -import Button from '../components/atoms/Button' -import styles from './About.module.scss' - -class About extends Component { - public render() { - return ( -
- - - -
- ) - } -} - -export default About diff --git a/src/pages/Home.module.scss b/src/pages/Home.module.scss deleted file mode 100644 index 5f1bb57..0000000 --- a/src/pages/Home.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import '../styles/variables'; - -.home { - background: $brand-black; - color: $brand-white; - min-height: calc(100vh - #{$page-frame} * 2); - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - padding-top: 4rem; - padding-bottom: 4rem; - - > div { - text-align: center; - width: 100%; - } -} - -.form { - width: 100%; - background: $brand-grey-lighter; - margin: 0 auto; - max-width: 40rem; - padding: $spacer; - margin-top: 4rem; - - fieldset { - border: 0; - padding: 0; - } -} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx deleted file mode 100644 index 0dc2810..0000000 --- a/src/pages/Home.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { ChangeEvent, Component, FormEvent } from 'react' -import { Link } from 'react-router-dom' -import Button from '../components/atoms/Button' -import Form from '../components/atoms/Form/Form' -import Input from '../components/atoms/Form/Input' -import styles from './Home.module.scss' - -interface HomeState { - search?: string -} - -interface HomeProps { - history: any -} - -class Home extends Component { - public state = { search: '' } - - public render() { - return ( -
-
Home
- - Styleguide - -
-
- - -
-
-
- ) - } - - private inputChange = (event: ChangeEvent) => { - this.setState({ - [event.target.name]: event.target.value - }) - } - - private searchAssets = (event: FormEvent) => { - event.preventDefault() - this.props.history.push(`/search?q=${this.state.search}`) - } -} - -export default Home diff --git a/src/pages/Styleguide.module.scss b/src/pages/Styleguide.module.scss deleted file mode 100644 index 658b453..0000000 --- a/src/pages/Styleguide.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import '../styles/variables'; - -.page { - margin: 0 auto; - max-width: 40rem; - padding: $spacer; -} diff --git a/src/routes/About.tsx b/src/routes/About.tsx new file mode 100644 index 0000000..8242af2 --- /dev/null +++ b/src/routes/About.tsx @@ -0,0 +1,10 @@ +import React, { Component } from 'react' +import Route from '../components/templates/Route' + +class About extends Component { + public render() { + return Hello About + } +} + +export default About diff --git a/src/pages/Details.tsx b/src/routes/Details.tsx similarity index 95% rename from src/pages/Details.tsx rename to src/routes/Details.tsx index 5725b62..f8d9baf 100644 --- a/src/pages/Details.tsx +++ b/src/routes/Details.tsx @@ -1,5 +1,6 @@ import { Logger } from '@oceanprotocol/squid' import React, { Component } from 'react' +import Route from '../components/templates/Route' import Button from '../components/atoms/Button' import { User } from '../context/User' @@ -64,13 +65,13 @@ export default class Details extends Component { public render() { return ( - <> + {this.state.metadata ? ( this.showDetails(this.state.ddo) ) : (
Loading
)} - + ) } } diff --git a/src/routes/Home.module.scss b/src/routes/Home.module.scss new file mode 100644 index 0000000..da87cc8 --- /dev/null +++ b/src/routes/Home.module.scss @@ -0,0 +1,23 @@ +@import '../styles/variables'; + +.home { + display: block; +} + +.published { + margin-top: $spacer * 3; + margin-bottom: $spacer; + + > div { + text-align: center; + margin-top: $spacer; + margin-bottom: $spacer; + } +} + +.subTitle { + font-size: $font-size-h4; + color: $brand-grey-light; + border-bottom: 1px solid $brand-grey-lighter; + padding-bottom: $spacer / 2; +} diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx new file mode 100644 index 0000000..1804bf7 --- /dev/null +++ b/src/routes/Home.tsx @@ -0,0 +1,65 @@ +import React, { ChangeEvent, Component, FormEvent } from 'react' +import { Link } from 'react-router-dom' +import Button from '../components/atoms/Button' +import Form from '../components/atoms/Form/Form' +import Input from '../components/atoms/Form/Input' +import Route from '../components/templates/Route' +import styles from './Home.module.scss' + +import meta from '../data/meta.json' + +interface HomeState { + search?: string +} + +interface HomeProps { + history: any +} + +class Home extends Component { + public state = { search: '' } + + public render() { + return ( + +
+ Search} + /> +
+ +
+

Your Data Sets

+ +
+

None yet.

+ + Publish A Data Set +
+
+ + ) + } + + private inputChange = (event: ChangeEvent) => { + this.setState({ + [event.target.name]: event.target.value + }) + } + + private searchAssets = (event: FormEvent) => { + event.preventDefault() + this.props.history.push(`/search?q=${this.state.search}`) + } +} + +export default Home diff --git a/src/pages/NotFound.tsx b/src/routes/NotFound.tsx similarity index 53% rename from src/pages/NotFound.tsx rename to src/routes/NotFound.tsx index 8888518..684af7b 100644 --- a/src/pages/NotFound.tsx +++ b/src/routes/NotFound.tsx @@ -1,8 +1,9 @@ import React, { Component } from 'react' +import Route from '../components/templates/Route' class NotFound extends Component { public render() { - return
Not found
+ return Not Found } } diff --git a/src/pages/Publish.tsx b/src/routes/Publish.tsx similarity index 97% rename from src/pages/Publish.tsx rename to src/routes/Publish.tsx index bb8adea..82222d0 100644 --- a/src/pages/Publish.tsx +++ b/src/routes/Publish.tsx @@ -1,4 +1,5 @@ import React, { ChangeEvent, Component, FormEvent } from 'react' +import Route from '../components/templates/Route' import Button from '../components/atoms/Button' import Form from '../components/atoms/Form/Form' import Input from '../components/atoms/Form/Input' @@ -115,8 +116,7 @@ class Publish extends Component<{}, PublishState> { const entries = Object.entries(form.fields) return ( -
-

Publish

+
{ }
-
+ ) } } diff --git a/src/pages/Search.tsx b/src/routes/Search.tsx similarity index 88% rename from src/pages/Search.tsx rename to src/routes/Search.tsx index e5a899c..4b45138 100644 --- a/src/pages/Search.tsx +++ b/src/routes/Search.tsx @@ -1,6 +1,7 @@ import queryString from 'query-string' import React, { Component } from 'react' import { Link } from 'react-router-dom' +import Route from '../components/templates/Route' import { provideOcean } from '../ocean' interface SearchState { @@ -12,7 +13,7 @@ interface SearchProps { history: any } -class Search extends Component { +export default class Search extends Component { public state = { results: [] } public async componentDidMount() { @@ -32,18 +33,6 @@ class Search extends Component { this.setState({ results: assets }) } - public render() { - return ( - <> - {this.state.results.length ? ( - this.state.results.map(asset => this.renderAssetBox(asset)) - ) : ( -
No data sets yet
- )} - - ) - } - private renderAssetBox = (asset: any) => { const { metadata } = asset.findServiceByType('Metadata') return ( @@ -54,6 +43,16 @@ class Search extends Component { ) } -} -export default Search + public render() { + return ( + + {this.state.results.length ? ( + this.state.results.map(asset => this.renderAssetBox(asset)) + ) : ( +
No data sets yet
+ )} + + ) + } +} diff --git a/src/routes/Styleguide.module.scss b/src/routes/Styleguide.module.scss new file mode 100644 index 0000000..0d79e76 --- /dev/null +++ b/src/routes/Styleguide.module.scss @@ -0,0 +1,6 @@ +.buttons { + > * { + display: block; + margin-bottom: 2rem; + } +} diff --git a/src/pages/Styleguide.tsx b/src/routes/Styleguide.tsx similarity index 64% rename from src/pages/Styleguide.tsx rename to src/routes/Styleguide.tsx index 9882f87..caafdc9 100644 --- a/src/pages/Styleguide.tsx +++ b/src/routes/Styleguide.tsx @@ -2,8 +2,8 @@ import React, { Component } from 'react' import Button from '../components/atoms/Button' import Form from '../components/atoms/Form/Form' import Input from '../components/atoms/Form/Input' +import Route from '../components/templates/Route' import styles from './Styleguide.module.scss' - import form from '../data/form-styleguide.json' class Styleguide extends Component { @@ -24,19 +24,20 @@ class Styleguide extends Component { public render() { const entries = Object.entries(form.fields) return ( -
-

Styleguide

- - - - + +
+ + + + +
{this.formFields(entries)}
-
+ ) } } diff --git a/src/styles/global.scss b/src/styles/global.scss index 0e7de40..e112888 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -332,10 +332,3 @@ pre { background: $brand-grey-light; color: #fff; } - -// Gatsby specific -///////////////////////////////////// - -.anchor { - margin-top: .6rem; -}