9
client/src/components/atoms/CategoryImage.module.scss
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
@import '../../styles/variables';
|
||||||
|
|
||||||
|
.categoryImage {
|
||||||
|
height: 4rem;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
margin-bottom: $spacer / $line-height;
|
||||||
|
background-color: $brand-grey-lighter;
|
||||||
|
}
|
121
client/src/components/atoms/CategoryImage.tsx
Normal file
|
@ -0,0 +1,121 @@
|
||||||
|
import React, { PureComponent } from 'react'
|
||||||
|
import styles from './CategoryImage.module.scss'
|
||||||
|
|
||||||
|
import agriculture from '../../img/categories/agriculture.jpg'
|
||||||
|
import anthroarche from '../../img/categories/anthroarche.jpg'
|
||||||
|
import astronomy from '../../img/categories/astronomy.jpg'
|
||||||
|
import biology from '../../img/categories/biology.jpg'
|
||||||
|
import business from '../../img/categories/business.jpg'
|
||||||
|
import chemistry from '../../img/categories/chemistry.jpg'
|
||||||
|
import communication from '../../img/categories/communication.jpg'
|
||||||
|
import computer from '../../img/categories/computer.jpg'
|
||||||
|
import dataofdata from '../../img/categories/dataofdata.jpg'
|
||||||
|
import deeplearning from '../../img/categories/deeplearning.jpg'
|
||||||
|
import demographics from '../../img/categories/demographics.jpg'
|
||||||
|
import earth from '../../img/categories/earth.jpg'
|
||||||
|
import economics from '../../img/categories/economics.jpg'
|
||||||
|
import engineering from '../../img/categories/engineering.jpg'
|
||||||
|
import history from '../../img/categories/history.jpg'
|
||||||
|
import imagesets from '../../img/categories/imagesets.jpg'
|
||||||
|
import language from '../../img/categories/language.jpg'
|
||||||
|
import law from '../../img/categories/law.jpg'
|
||||||
|
import mathematics from '../../img/categories/mathematics.jpg'
|
||||||
|
import medicine from '../../img/categories/medicine.jpg'
|
||||||
|
import other from '../../img/categories/other.jpg'
|
||||||
|
import performingarts from '../../img/categories/performingarts.jpg'
|
||||||
|
import philosophy from '../../img/categories/philosophy.jpg'
|
||||||
|
import physics from '../../img/categories/physics.jpg'
|
||||||
|
import politics from '../../img/categories/politics.jpg'
|
||||||
|
import psychology from '../../img/categories/psychology.jpg'
|
||||||
|
import sociology from '../../img/categories/sociology.jpg'
|
||||||
|
import sports from '../../img/categories/sports.jpg'
|
||||||
|
import theology from '../../img/categories/theology.jpg'
|
||||||
|
import transport from '../../img/categories/transport.jpg'
|
||||||
|
import urbanplanning from '../../img/categories/urbanplanning.jpg'
|
||||||
|
import visualart from '../../img/categories/visualart.jpg'
|
||||||
|
|
||||||
|
const categoryImageFile = (category: string) => {
|
||||||
|
switch (category) {
|
||||||
|
case 'agriculture':
|
||||||
|
return agriculture
|
||||||
|
case 'anthroarche':
|
||||||
|
return anthroarche
|
||||||
|
case 'astronomy':
|
||||||
|
return astronomy
|
||||||
|
case 'biology':
|
||||||
|
return biology
|
||||||
|
case 'business':
|
||||||
|
return business
|
||||||
|
case 'chemistry':
|
||||||
|
return chemistry
|
||||||
|
case 'communication':
|
||||||
|
return communication
|
||||||
|
case 'computer':
|
||||||
|
return computer
|
||||||
|
case 'dataofdata':
|
||||||
|
return dataofdata
|
||||||
|
case 'deeplearning':
|
||||||
|
return deeplearning
|
||||||
|
case 'demographics':
|
||||||
|
return demographics
|
||||||
|
case 'earth':
|
||||||
|
return earth
|
||||||
|
case 'economics-and-finance':
|
||||||
|
return economics
|
||||||
|
case 'engineering':
|
||||||
|
return engineering
|
||||||
|
case 'history':
|
||||||
|
return history
|
||||||
|
case 'imagesets':
|
||||||
|
return imagesets
|
||||||
|
case 'language':
|
||||||
|
return language
|
||||||
|
case 'law':
|
||||||
|
return law
|
||||||
|
case 'mathematics':
|
||||||
|
return mathematics
|
||||||
|
case 'medicine':
|
||||||
|
return medicine
|
||||||
|
case 'other':
|
||||||
|
return other
|
||||||
|
case 'performingarts':
|
||||||
|
return performingarts
|
||||||
|
case 'philosophy':
|
||||||
|
return philosophy
|
||||||
|
case 'physics':
|
||||||
|
return physics
|
||||||
|
case 'politics':
|
||||||
|
return politics
|
||||||
|
case 'psychology':
|
||||||
|
return psychology
|
||||||
|
case 'sociology':
|
||||||
|
return sociology
|
||||||
|
case 'sports':
|
||||||
|
return sports
|
||||||
|
case 'theology':
|
||||||
|
return theology
|
||||||
|
case 'transport':
|
||||||
|
return transport
|
||||||
|
case 'urbanplanning':
|
||||||
|
return urbanplanning
|
||||||
|
case 'visualart':
|
||||||
|
return visualart
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class CategoryImage extends PureComponent<{ category: string }> {
|
||||||
|
public render() {
|
||||||
|
const image = categoryImageFile(this.props.category)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={styles.categoryImage}
|
||||||
|
style={{
|
||||||
|
backgroundImage: `url(${image})`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
|
@ -9,6 +9,7 @@
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
background: $brand-white;
|
background: $brand-white;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
|
@ -59,8 +60,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.assetFooter {
|
.assetFooter {
|
||||||
border-top: 1px solid $brand-grey-lighter;
|
|
||||||
padding-top: $spacer / 2;
|
|
||||||
margin-top: $spacer / 2;
|
margin-top: $spacer / 2;
|
||||||
font-size: $font-size-small;
|
font-size: $font-size-small;
|
||||||
color: $brand-grey-light;
|
color: $brand-grey-light;
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React from 'react'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import styles from './Asset.module.scss'
|
import styles from './Asset.module.scss'
|
||||||
|
import CategoryImage from '../atoms/CategoryImage'
|
||||||
|
|
||||||
const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
|
const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
|
||||||
const { metadata } = asset.findServiceByType('Metadata')
|
const { metadata } = asset.findServiceByType('Metadata')
|
||||||
|
@ -19,15 +20,12 @@ const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
|
||||||
) : (
|
) : (
|
||||||
<article className={styles.asset}>
|
<article className={styles.asset}>
|
||||||
<Link to={`/asset/${asset.id}`}>
|
<Link to={`/asset/${asset.id}`}>
|
||||||
|
<CategoryImage category={base.categories[0][0]} />
|
||||||
<h1>{base.name}</h1>
|
<h1>{base.name}</h1>
|
||||||
<p>{base.description.substring(0, 90)}</p>
|
<p>{base.description.substring(0, 90)}...</p>
|
||||||
|
|
||||||
<footer className={styles.assetFooter}>
|
<footer className={styles.assetFooter}>
|
||||||
{base.categories ? (
|
{base.categories && <div>{base.categories[0][0]}</div>}
|
||||||
<div>{base.category}</div>
|
|
||||||
) : (
|
|
||||||
<div>Fake Category</div>
|
|
||||||
)}
|
|
||||||
</footer>
|
</footer>
|
||||||
</Link>
|
</Link>
|
||||||
</article>
|
</article>
|
||||||
|
|
BIN
client/src/img/categories/agriculture.jpg
Executable file
After Width: | Height: | Size: 20 KiB |
BIN
client/src/img/categories/anthroarche.jpg
Executable file
After Width: | Height: | Size: 18 KiB |
BIN
client/src/img/categories/astronomy.jpg
Executable file
After Width: | Height: | Size: 16 KiB |
BIN
client/src/img/categories/biology.jpg
Executable file
After Width: | Height: | Size: 14 KiB |
BIN
client/src/img/categories/business.jpg
Executable file
After Width: | Height: | Size: 16 KiB |
BIN
client/src/img/categories/chemistry.jpg
Executable file
After Width: | Height: | Size: 30 KiB |
BIN
client/src/img/categories/communication.jpg
Executable file
After Width: | Height: | Size: 29 KiB |
BIN
client/src/img/categories/computer.jpg
Executable file
After Width: | Height: | Size: 26 KiB |
BIN
client/src/img/categories/dataofdata.jpg
Executable file
After Width: | Height: | Size: 31 KiB |
BIN
client/src/img/categories/deeplearning.jpg
Executable file
After Width: | Height: | Size: 33 KiB |
BIN
client/src/img/categories/demographics.jpg
Executable file
After Width: | Height: | Size: 21 KiB |
BIN
client/src/img/categories/earth.jpg
Executable file
After Width: | Height: | Size: 27 KiB |
BIN
client/src/img/categories/economics.jpg
Executable file
After Width: | Height: | Size: 23 KiB |
BIN
client/src/img/categories/engineering.jpg
Executable file
After Width: | Height: | Size: 26 KiB |
BIN
client/src/img/categories/history.jpg
Executable file
After Width: | Height: | Size: 25 KiB |
BIN
client/src/img/categories/imagesets.jpg
Executable file
After Width: | Height: | Size: 24 KiB |
BIN
client/src/img/categories/language.jpg
Executable file
After Width: | Height: | Size: 30 KiB |
BIN
client/src/img/categories/law.jpg
Executable file
After Width: | Height: | Size: 13 KiB |
BIN
client/src/img/categories/mathematics.jpg
Executable file
After Width: | Height: | Size: 17 KiB |
BIN
client/src/img/categories/medicine.jpg
Executable file
After Width: | Height: | Size: 22 KiB |
BIN
client/src/img/categories/other.jpg
Executable file
After Width: | Height: | Size: 49 KiB |
BIN
client/src/img/categories/performingarts.jpg
Executable file
After Width: | Height: | Size: 24 KiB |
BIN
client/src/img/categories/philosophy.jpg
Executable file
After Width: | Height: | Size: 16 KiB |
BIN
client/src/img/categories/physics.jpg
Executable file
After Width: | Height: | Size: 12 KiB |
BIN
client/src/img/categories/politics.jpg
Executable file
After Width: | Height: | Size: 19 KiB |
BIN
client/src/img/categories/psychology.jpg
Executable file
After Width: | Height: | Size: 14 KiB |
BIN
client/src/img/categories/sociology.jpg
Executable file
After Width: | Height: | Size: 36 KiB |
BIN
client/src/img/categories/sports.jpg
Executable file
After Width: | Height: | Size: 22 KiB |
BIN
client/src/img/categories/theology.jpg
Executable file
After Width: | Height: | Size: 14 KiB |
BIN
client/src/img/categories/transport.jpg
Executable file
After Width: | Height: | Size: 32 KiB |
BIN
client/src/img/categories/urbanplanning.jpg
Executable file
After Width: | Height: | Size: 22 KiB |
BIN
client/src/img/categories/visualart.jpg
Executable file
After Width: | Height: | Size: 22 KiB |