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:
parent
c11fceaf17
commit
9e15845995
@ -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;
|
||||
}
|
||||
|
@ -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})` }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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 ? (
|
||||
|
@ -53,6 +53,7 @@ export default class Details extends Component<DetailsProps, DetailsState> {
|
||||
metadata.base.categories && (
|
||||
<CategoryImage
|
||||
header
|
||||
dimmed
|
||||
category={metadata.base.categories[0]}
|
||||
/>
|
||||
)
|
||||
|
@ -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()}
|
||||
|
||||
|
@ -12,6 +12,10 @@
|
||||
@media (min-width: $break-point--small) {
|
||||
font-size: $font-size-h1;
|
||||
}
|
||||
|
||||
+ div:not(.description) {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
|
@ -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}
|
||||
|
@ -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."
|
||||
|
@ -33,12 +33,6 @@
|
||||
}
|
||||
|
||||
.category {
|
||||
// category image
|
||||
> div {
|
||||
opacity: .7;
|
||||
transition: .2s ease-out;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-base;
|
||||
color: $brand-grey;
|
||||
|
Loading…
Reference in New Issue
Block a user