From ca73d8a43f93159ad745754da5bc4bd94dbfea86 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 8 Feb 2019 11:48:18 +0100 Subject: [PATCH 01/15] fix search input --- src/components/atoms/Form/Input.module.scss | 6 +++--- src/components/atoms/Form/Input.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/atoms/Form/Input.module.scss b/src/components/atoms/Form/Input.module.scss index 55c86b9..f8d6883 100644 --- a/src/components/atoms/Form/Input.module.scss +++ b/src/components/atoms/Form/Input.module.scss @@ -17,16 +17,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..936e06f 100644 --- a/src/components/atoms/Form/Input.tsx +++ b/src/components/atoms/Form/Input.tsx @@ -106,6 +106,7 @@ export default class Input extends PureComponent { return (
+ {props.type === 'search' && }
) } @@ -139,7 +140,6 @@ export default class Input extends PureComponent { onFocus={this.toggleFocus} onBlur={this.toggleFocus} /> - {type === 'search' && } {help && {help}} From 905c76b5afc6734cceb3afebbb389677888dc65f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 8 Feb 2019 13:29:29 +0100 Subject: [PATCH 02/15] base layout for all pages, meta title, start menu --- package-lock.json | 48 +++++++++++++++--- package.json | 2 + src/App.module.scss | 6 +++ src/App.tsx | 31 ++++++++---- src/Routes.tsx | 22 ++++---- src/components/Content.module.scss | 16 ++++++ src/components/Content.tsx | 8 +++ src/components/Footer.module.scss | 58 ++++++++++++++++++++++ src/components/Footer.tsx | 27 ++++++++++ src/components/Header.module.scss | 2 + src/components/Header.tsx | 22 ++++++++ src/components/atoms/Form/Form.module.scss | 2 - src/data/menu.json | 14 ++++++ src/data/meta.json | 11 ++++ src/pages/About.module.scss | 16 ------ src/pages/About.tsx | 13 +---- src/pages/Details.tsx | 5 +- src/pages/Home.tsx | 31 ++++++------ src/pages/NotFound.tsx | 3 +- src/pages/Publish.tsx | 6 +-- src/pages/Search.tsx | 29 ++++++----- src/pages/Styleguide.module.scss | 7 --- src/pages/Styleguide.tsx | 8 ++- src/styles/global.scss | 7 --- src/templates/Page.module.scss | 9 ++++ src/templates/Page.tsx | 31 ++++++++++++ 26 files changed, 320 insertions(+), 114 deletions(-) create mode 100644 src/components/Content.module.scss create mode 100644 src/components/Content.tsx create mode 100644 src/components/Footer.module.scss create mode 100644 src/components/Footer.tsx create mode 100644 src/components/Header.module.scss create mode 100644 src/components/Header.tsx create mode 100644 src/data/menu.json create mode 100644 src/data/meta.json delete mode 100644 src/pages/About.module.scss delete mode 100644 src/pages/Styleguide.module.scss create mode 100644 src/templates/Page.module.scss create mode 100644 src/templates/Page.tsx diff --git a/package-lock.json b/package-lock.json index e6a0cf3..c7912c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1181,8 +1181,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 +1199,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 +1213,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", @@ -5123,8 +5129,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 +5298,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 +6436,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", @@ -16508,6 +16517,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 +16886,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 +18646,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", diff --git a/package.json b/package.json index 222907c..93964b9 100644 --- a/package.json +++ b/package.json @@ -16,11 +16,13 @@ }, "dependencies": { "@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/src/App.module.scss b/src/App.module.scss index e80d4a2..1c4a0be 100644 --- a/src/App.module.scss +++ b/src/App.module.scss @@ -1,3 +1,9 @@ .app { height: 100%; + display: flex; + flex-direction: column; + + > * { + width: 100%; + } } diff --git a/src/App.tsx b/src/App.tsx index 4838f8d..7299d4f 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,22 @@ class App extends Component<{}, AppState> { ocean }) } + + public render() { + return ( +
+ + + <> +
+ +
+ + + +
+ ) + } } export default App diff --git a/src/Routes.tsx b/src/Routes.tsx index a3dd58b..55a1401 100644 --- a/src/Routes.tsx +++ b/src/Routes.tsx @@ -1,5 +1,5 @@ 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' @@ -10,17 +10,15 @@ import Search from './pages/Search' import Styleguide from './pages/Styleguide' const Routes = () => ( - - - - - - - - - - - + + + + + + + + + ) export default Routes diff --git a/src/components/Content.module.scss b/src/components/Content.module.scss new file mode 100644 index 0000000..d40a0da --- /dev/null +++ b/src/components/Content.module.scss @@ -0,0 +1,16 @@ +@import '../styles/variables'; + +.content { + padding: 0 $spacer / 2; + 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/Content.tsx b/src/components/Content.tsx new file mode 100644 index 0000000..190d4da --- /dev/null +++ b/src/components/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/Footer.module.scss b/src/components/Footer.module.scss new file mode 100644 index 0000000..af40dcb --- /dev/null +++ b/src/components/Footer.module.scss @@ -0,0 +1,58 @@ +@import '../styles/variables'; + +.footer { + color: $brand-grey-light; + width: 100%; + text-align: center; + padding-top: $spacer; + padding-bottom: $spacer; + align-self: flex-end; + + > section { + 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-small; + } + + 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..19b1371 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import Content from '../components/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..75001c2 --- /dev/null +++ b/src/components/Header.module.scss @@ -0,0 +1,2 @@ +.header { +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..577717e --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import Content from '../components/Content' +import styles from './Header.module.scss' + +import menu from '../data/menu.json' + +const Header = () => ( +
+ + + +
+) + +export default Header diff --git a/src/components/atoms/Form/Form.module.scss b/src/components/atoms/Form/Form.module.scss index 32288d5..17956a0 100644 --- a/src/components/atoms/Form/Form.module.scss +++ b/src/components/atoms/Form/Form.module.scss @@ -2,9 +2,7 @@ .form { width: 100%; - margin: 0 auto; margin-top: 4rem; - max-width: 40rem; fieldset { border: 0; diff --git a/src/data/menu.json b/src/data/menu.json new file mode 100644 index 0000000..8100a67 --- /dev/null +++ b/src/data/menu.json @@ -0,0 +1,14 @@ +[ + { + "title": "Home", + "link": "/" + }, + { + "title": "Publish", + "link": "/publish" + }, + { + "title": "About", + "link": "/about" + } +] diff --git a/src/data/meta.json b/src/data/meta.json new file mode 100644 index 0000000..7022b3e --- /dev/null +++ b/src/data/meta.json @@ -0,0 +1,11 @@ +{ + "title": "Commons Marketplace", + "description": "", + "company": "Ocean Protocol Foundation Ltd.", + "social": [ + { + "title": "Site", + "url": "https://oceanprotocol.com" + } + ] +} 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 index 69e53b5..1f61c2c 100644 --- a/src/pages/About.tsx +++ b/src/pages/About.tsx @@ -1,18 +1,9 @@ import React, { Component } from 'react' -import Button from '../components/atoms/Button' -import styles from './About.module.scss' +import Page from '../templates/Page' class About extends Component { public render() { - return ( -
- - - -
- ) + return Hello About } } diff --git a/src/pages/Details.tsx b/src/pages/Details.tsx index 5725b62..ff2a67c 100644 --- a/src/pages/Details.tsx +++ b/src/pages/Details.tsx @@ -1,5 +1,6 @@ import { Logger } from '@oceanprotocol/squid' import React, { Component } from 'react' +import Page from '../templates/Page' 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/pages/Home.tsx b/src/pages/Home.tsx index 0dc2810..ae94d7e 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -3,6 +3,7 @@ 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 Content from '../components/Content' import styles from './Home.module.scss' interface HomeState { @@ -19,22 +20,22 @@ class Home extends Component { public render() { return (
-
Home
+ + Styleguide - Styleguide - -
-
- - -
-
+
+
+ + +
+
+
) } diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx index 8888518..39d6da9 100644 --- a/src/pages/NotFound.tsx +++ b/src/pages/NotFound.tsx @@ -1,8 +1,9 @@ import React, { Component } from 'react' +import Page from '../templates/Page' class NotFound extends Component { public render() { - return
Not found
+ return Not Found } } diff --git a/src/pages/Publish.tsx b/src/pages/Publish.tsx index bb8adea..2547473 100644 --- a/src/pages/Publish.tsx +++ b/src/pages/Publish.tsx @@ -1,4 +1,5 @@ import React, { ChangeEvent, Component, FormEvent } from 'react' +import Page from '../templates/Page' 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/pages/Search.tsx index e5a899c..7f465d8 100644 --- a/src/pages/Search.tsx +++ b/src/pages/Search.tsx @@ -1,6 +1,7 @@ import queryString from 'query-string' import React, { Component } from 'react' import { Link } from 'react-router-dom' +import Page from '../templates/Page' 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/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/pages/Styleguide.tsx b/src/pages/Styleguide.tsx index 9882f87..8520426 100644 --- a/src/pages/Styleguide.tsx +++ b/src/pages/Styleguide.tsx @@ -2,7 +2,7 @@ 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 styles from './Styleguide.module.scss' +import Page from '../templates/Page' import form from '../data/form-styleguide.json' @@ -24,9 +24,7 @@ class Styleguide extends Component { public render() { const entries = Object.entries(form.fields) return ( -
-

Styleguide

- +
+ ) } } 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; -} diff --git a/src/templates/Page.module.scss b/src/templates/Page.module.scss new file mode 100644 index 0000000..6136c48 --- /dev/null +++ b/src/templates/Page.module.scss @@ -0,0 +1,9 @@ +@import '../styles/variables'; + +.header { + margin-bottom: $spacer; + + h1 { + margin: 0; + } +} diff --git a/src/templates/Page.tsx b/src/templates/Page.tsx new file mode 100644 index 0000000..6feb4e3 --- /dev/null +++ b/src/templates/Page.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import Helmet from 'react-helmet' +import Content from '../components/Content' +import styles from './Page.module.scss' +import meta from '../data/meta.json' + +const Page = ({ + title, + wide, + children +}: { + title: string + children: any + wide?: boolean +}) => ( + <> + + {title} + + + +
+

{title}

+
+ + {children} + + +) + +export default Page From 117a5a3d2e4978965f73b4900389f44eef89cb3a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 8 Feb 2019 14:06:55 +0100 Subject: [PATCH 03/15] sticky footer --- src/App.module.scss | 15 ++++++++++----- src/App.tsx | 6 +++++- src/components/Footer.module.scss | 1 + 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/App.module.scss b/src/App.module.scss index 1c4a0be..1fcb272 100644 --- a/src/App.module.scss +++ b/src/App.module.scss @@ -1,9 +1,14 @@ +@import './styles/variables'; + .app { height: 100%; - display: flex; - flex-direction: column; - > * { - width: 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 7299d4f..8446902 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -108,7 +108,11 @@ class App extends Component<{}, AppState> { <>
- + +
+ +
+