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

category image tweaks, use for channel too

This commit is contained in:
Matthias Kretschmann 2019-05-23 19:42:57 +02:00
parent c11fceaf17
commit 9e15845995
Signed by: m
GPG Key ID: 606EEEF3C479A91F
11 changed files with 60 additions and 23 deletions

View File

@ -8,13 +8,18 @@
background-color: $body-background;
border-radius: $border-radius;
overflow: hidden;
opacity: .8;
opacity: .85;
transition: .2s ease-out;
border: 1px solid $brand-grey-lighter;
}
.header {
composes: categoryImage;
height: 8rem;
margin-top: $spacer;
opacity: .5;
}
.dimmed {
composes: categoryImage;
opacity: .6;
}

View File

@ -1,4 +1,5 @@
import React, { PureComponent } from 'react'
import cx from 'classnames'
import styles from './CategoryImage.module.scss'
import agriculture from '../../img/categories/agriculture.jpg'
@ -141,18 +142,19 @@ const categoryImageFile = (category: string) => {
export default class CategoryImage extends PureComponent<{
category: string
header?: boolean
dimmed?: boolean
}> {
public render() {
const image = categoryImageFile(this.props.category)
const classNames = cx(styles.categoryImage, {
[styles.header]: this.props.header,
[styles.dimmed]: this.props.dimmed
})
return (
<div
className={
this.props.header ? styles.header : styles.categoryImage
}
style={{
backgroundImage: `url(${image})`
}}
className={classNames}
style={{ backgroundImage: `url(${image})` }}
/>
)
}

View File

@ -38,7 +38,7 @@ const AssetTeaser = ({
>
<Link to={`/asset/${asset.id}`}>
{base.categories && !minimal && (
<CategoryImage category={base.categories[0]} />
<CategoryImage dimmed category={base.categories[0]} />
)}
<h1>{base.name}</h1>

View File

@ -38,7 +38,29 @@
}
.channelTitle {
margin-top: $spacer * 2;
margin-top: $spacer * 4;
@media (min-width: $break-point--medium) {
margin-top: -($spacer / 1.5);
}
}
.channelHeader {
a {
display: block;
&:hover,
&:focus {
transform: none;
// category image
// stylelint-disable-next-line
.channelTitle + div {
opacity: 1;
background-size: 105%;
}
}
}
}
.channelResults {

View File

@ -6,6 +6,7 @@ import Spinner from '../atoms/Spinner'
import AssetTeaser from '../molecules/AssetTeaser'
import styles from './ChannelTeaser.module.scss'
import channels from '../../data/channels.json'
import CategoryImage from '../atoms/CategoryImage'
interface ChannelTeaserProps {
channel: string
@ -72,12 +73,13 @@ export default class ChannelTeaser extends Component<
return (
<div className={styles.channel}>
<div>
<div>
<h2 className={styles.channelTitle}>
<Link to={`/channels/${slug}`}>{title} </Link>
</h2>
<header className={styles.channelHeader}>
<Link to={`/channels/${slug}`}>
<h2 className={styles.channelTitle}>{title} </h2>
<CategoryImage category={title} />
</Link>
<p>{teaser}</p>
</div>
</header>
</div>
<div>
{isLoadingChannel ? (

View File

@ -53,6 +53,7 @@ export default class Details extends Component<DetailsProps, DetailsState> {
metadata.base.categories && (
<CategoryImage
header
dimmed
category={metadata.base.categories[0]}
/>
)

View File

@ -9,6 +9,7 @@ import Pagination from '../../components/molecules/Pagination'
import styles from './Channel.module.scss'
import Content from '../../components/atoms/Content'
import channels from '../../data/channels.json'
import CategoryImage from '../atoms/CategoryImage'
interface ChannelProps {
history: History
@ -112,7 +113,11 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
const { title, description, totalPages, currentPage } = this.state
return (
<Route title={title} description={description}>
<Route
title={title}
description={description}
image={<CategoryImage header category={title} />}
>
<Content wide>
{this.renderResults()}

View File

@ -12,6 +12,10 @@
@media (min-width: $break-point--small) {
font-size: $font-size-h1;
}
+ div:not(.description) {
margin-bottom: $spacer;
}
}
.description {

View File

@ -31,7 +31,9 @@ const Route = ({
<header className={styles.header}>
<Content wide={wide}>
<h1 className={styles.title}>{title}</h1>
{image && image}
{description && (
<Markdown
text={description}

View File

@ -3,7 +3,7 @@
"description": "Channels are... You can do this with them... They're cool because...",
"items": [
{
"title": "AI for Good",
"title": "AI For Good",
"slug": "ai-for-good",
"teaser": "AI for Good is an initiative to promote the use of artificial intelligence for good causes.",
"description": "AI for 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](https://aiforgood.itu.int) 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 with UN Sister agencies, XPRIZE Foundation and ACM."

View File

@ -33,12 +33,6 @@
}
.category {
// category image
> div {
opacity: .7;
transition: .2s ease-out;
}
h3 {
font-size: $font-size-base;
color: $brand-grey;