oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

categories styling

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-05-23 11:48:53 +02:00
parent 54e4dc7e5d
commit feebf7fc0c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 198 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
client/package-lock.json generated
View File

@ -3485,7 +3485,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -3506,12 +3507,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"
@ -3526,17 +3529,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",
@ -3653,7 +3659,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -3665,6 +3672,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -3679,6 +3687,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -3686,12 +3695,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"
@ -3710,6 +3721,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -3790,7 +3802,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -3802,6 +3815,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -3887,7 +3901,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -3923,6 +3938,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",
@ -3942,6 +3958,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -3985,12 +4002,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
}
}
},
@ -8717,7 +8736,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -8738,12 +8758,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"
@ -8758,17 +8780,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",
@ -8885,7 +8910,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -8897,6 +8923,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -8911,6 +8938,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -8918,12 +8946,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"
@ -8942,6 +8972,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -9022,7 +9053,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -9034,6 +9066,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -9119,7 +9152,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -9155,6 +9189,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",
@ -9174,6 +9209,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -9217,12 +9253,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
}
}
}
@ -16444,7 +16482,7 @@
"web3-utils": "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": {

2
client/src/Routes.tsx
View File

@ -23,7 +23,7 @@ const Routes = () => (
<Route component={withTracker(Details)} path="/asset/:did" />
<Route component={withTracker(Faucet)} path="/faucet" />
<Route component={withTracker(History)} path="/history" />
<Route component={withTracker(Channel)} path="/channel/:channel" />
<Route component={withTracker(Channel)} path="/channels/:channel" />
<Route component={withTracker(NotFound)} />
</Switch>
)

6
client/src/components/atoms/CategoryImage.module.scss
View File

@ -2,8 +2,12 @@
.categoryImage {
height: 4rem;
background-size: cover;
background-size: 100%;
background-position: center;
margin-bottom: $spacer / $line-height;
background-color: $body-background;
border-radius: $border-radius;
overflow: hidden;
opacity: .8;
transition: .2s ease-out;
}

6
client/src/components/molecules/Asset.module.scss
View File

@ -20,6 +20,12 @@
color: inherit;
border-color: $brand-pink;
transform: none;
// category image
> div:first-child {
opacity: 1;
background-size: 105%;
}
}
}

1
client/src/config.ts
View File

@ -8,7 +8,6 @@ export const servicePort = process.env.REACT_APP_SERVICE_PORT || 4000
//
// OCEAN REMOTE CONNECTIONS
//
export const nodeScheme = process.env.REACT_APP_NODE_SCHEME || 'https'
export const nodeHost = process.env.REACT_APP_NODE_HOST || 'nile.dev-ocean.com'
export const nodePort = process.env.REACT_APP_NODE_PORT || 443

8
client/src/routes/Channel.tsx
View File

@ -45,12 +45,13 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
searchCategories: '',
channel: {
title: 'AI for Good',
description: 'AI 4 Good is an initiative to promote the use of artificial intelligence for good causes, such as fighting poverty, climate change, improving healthcare, safer transportation, and so on. The AI for Good Global Summit is THE leading United Nations platform for global and inclusive dialogue on AI. The Summit is hosted each year in Geneva by the ITU in partnership wutg UN Suster agencies, XPRIZE Foundtation and ACM.'
description:
'AI 4 Good is an initiative to promote the use of artificial intelligence for good causes, such as fighting poverty, climate change, improving healthcare, safer transportation, and so on. The AI for Good Global Summit is THE leading United Nations platform for global and inclusive dialogue on AI. The Summit is hosted each year in Geneva by the ITU in partnership wutg UN Suster agencies, XPRIZE Foundtation and ACM.'
}
}
public async componentDidMount() {
const { match } = this.props;
const { match } = this.props
// TODO: use next line to use channel name
// const category = match.params.channel
@ -138,7 +139,8 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
public render() {
const { totalResults, totalPages, currentPage, channel } = this.state
const { match } = this.props;
const { match } = this.props
return (
<Route title={channel.title} wide>
<Content wide>

38
client/src/routes/Home.module.scss
View File

@ -22,10 +22,40 @@
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
}
}
.categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
grid-gap: $spacer;
.title {
font-size: $font-size-h3;
margin-top: $spacer * 2;
}
.categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
grid-gap: $spacer;
}
.category {
// category image
> div {
opacity: .7;
transition: .2s ease-out;
}
h3 {
font-size: $font-size-base;
color: $brand-grey;
margin-top: -($spacer / 3);
margin-bottom: 0;
}
&:hover,
&:focus {
transform: none;
> div {
opacity: 1;
background-size: 105%;
}
}
}

100
client/src/routes/Home.tsx
View File

@ -24,8 +24,8 @@ interface HomeState {
search?: string
categoryAssets?: any[]
isLoadingCategory?: boolean
lastAssets?: any[]
isLoadingLast?: boolean
latestAssets?: any[]
isLoadingLatest?: boolean
}
const categories =
@ -34,18 +34,20 @@ const categories =
formPublish.steps[1].fields.categories.options) ||
[]
class Home extends Component<HomeProps, HomeState> {
export default class Home extends Component<HomeProps, HomeState> {
public static contextType = User
public state = {
search: '',
categoryAssets: [],
isLoadingCategory: true,
lastAssets: [],
isLoadingLast: true
latestAssets: [],
isLoadingLatest: true
}
public async componentDidMount() {
this.getCategoryAssets()
this.getLastAssets()
this.getLatestAssets()
}
private getCategoryAssets = async () => {
@ -75,7 +77,7 @@ class Home extends Component<HomeProps, HomeState> {
}
}
private getLastAssets = async () => {
private getLatestAssets = async () => {
const { ocean } = this.context
const searchQuery = {
@ -92,17 +94,35 @@ class Home extends Component<HomeProps, HomeState> {
try {
const search = await ocean.aquarius.queryMetadata(searchQuery)
this.setState({
lastAssets: search.results,
isLoadingLast: false
latestAssets: search.results,
isLoadingLatest: false
})
} catch (error) {
Logger.error(error.message)
this.setState({ isLoadingLast: false })
this.setState({ isLoadingLatest: false })
}
}
private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
this.setState({
[event.target.name]: event.target.value
})
}
private searchAssets = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault()
this.props.history.push(`/search?text=${this.state.search}`)
}
public render() {
const { categoryAssets, isLoadingCategory, lastAssets, isLoadingLast, search } = this.state
const {
categoryAssets,
isLoadingCategory,
latestAssets,
isLoadingLatest,
search
} = this.state
return (
<Route
title={meta.title}
@ -128,7 +148,9 @@ class Home extends Component<HomeProps, HomeState> {
</Content>
<Content wide>
<h4 onClick={() => this.openChannel('AI for Good')}>AI for Good</h4>
<h2 className={styles.title}>
<Link to="/channels/ai-for-good">AI for Good</Link>
</h2>
<div>
{isLoadingCategory ? (
<Spinner message="Loading..." />
@ -142,13 +164,14 @@ class Home extends Component<HomeProps, HomeState> {
<div>No data sets found.</div>
)}
</div>
<h4>Latest assets</h4>
<h2 className={styles.title}>Latest published assets</h2>
<div>
{isLoadingLast ? (
{isLoadingLatest ? (
<Spinner message="Loading..." />
) : lastAssets && lastAssets.length ? (
) : latestAssets && latestAssets.length ? (
<div className={styles.results}>
{lastAssets.map((asset: any) => (
{latestAssets.map((asset: any) => (
<Asset key={asset.id} asset={asset} />
))}
</div>
@ -156,38 +179,27 @@ class Home extends Component<HomeProps, HomeState> {
<div>No data sets found.</div>
)}
</div>
<h4>Explore Categories</h4>
</Content>
<Content>
<h2 className={styles.title}>Explore Categories</h2>
<div className={styles.categories}>
{categories.map((category: string) => (
<Link
to={`/search?categories=${category}`}
key={category}
>
<CategoryImage category={category} />
{category}
</Link>
))}
{categories
.filter(category => category !== 'AI For Good')
.sort((a, b) => a.localeCompare(b))
.map((category: string) => (
<Link
to={`/search?categories=${category}`}
key={category}
className={styles.category}
>
<CategoryImage category={category} />
<h3>{category}</h3>
</Link>
))}
</div>
</Content>
</Route>
)
}
private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
this.setState({
[event.target.name]: event.target.value
})
}
private searchAssets = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault()
this.props.history.push(`/search?text=${this.state.search}`)
}
private openChannel = (channel: string) => {
this.props.history.push(`/channel/${channel}`)
}
}
Home.contextType = User
export default Home

41
server/package-lock.json generated
View File

@ -2091,7 +2091,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -2112,12 +2113,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"
@ -2132,17 +2135,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",
@ -2259,7 +2265,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -2271,6 +2278,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -2285,6 +2293,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -2292,12 +2301,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"
@ -2316,6 +2327,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -2396,7 +2408,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -2408,6 +2421,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -2493,7 +2507,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -2529,6 +2544,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",
@ -2548,6 +2564,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -2591,12 +2608,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
}
}
},