Commit 533595c7 authored by Matija Obreza's avatar Matija Obreza
Browse files

Crop list uses 200x200 thumb or crop-placeholder.jpg


Signed-off-by: Matija Obreza's avatarMatija Obreza <matija.obreza@croptrust.org>
parent 1d6f90c8
......@@ -40,7 +40,7 @@ class BrowsePage extends React.Component<IBrowsePageProps> {
</Authorize>
<PageContents>
<GridLayout>
{ crops && crops.map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact/>) }
{ crops && crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact/>) }
</GridLayout>
</PageContents>
</PageLayout>
......
import * as React from 'react';
import {Link} from 'react-router-dom';
import { Link } from 'react-router-dom';
// Models
import CropDetails from 'model/genesys/CropDetails';
// UI
import Card, {CardHeader, CardContent, CardMedia, CardActions} from 'ui/common/Card';
import {Properties, PropertiesItem} from 'ui/common/Properties';
import Card, { CardHeader, CardContent, CardActions } from 'ui/common/Card';
import { Properties, PropertiesItem } from 'ui/common/Properties';
import PrettyDate from 'ui/common/time/PrettyDate';
import Grid from '@material-ui/core/Grid';
import withStyles from '@material-ui/core/styles/withStyles';
import Button from '@material-ui/core/Button';
import Authorize from 'ui/common/authorized/Authorize';
import Number from 'ui/common/Number';
const style = (theme) => ({
root: {
......@@ -22,10 +21,44 @@ const style = (theme) => ({
display: 'flex',
},
media: {
height: 150,
// marginTop: '-25%',
height: 200,
display: 'inline-block' as 'inline-block',
// vertical-align: top; /*not required*/
position: 'relative' as 'relative',
overflow: 'hidden' as 'hidden',
},
mediaImage: {
// maxHeight: '100%',
minWidth: '100%',
width: 'auto' as 'auto',
height: 'auto' as 'auto',
position: 'absolute' as 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
margin: 'auto' as 'auto',
},
});
const CropImage = ({classes, crop}: { classes: any, crop: CropDetails}) => {
// console.log(`renderImage`, crop);
const hasCover = crop.covers && crop.covers.length > 0;
const image = hasCover ? crop.covers[0] : null;
return (
<div className={ classes.media }>
{ hasCover &&
<img className={ classes.mediaImage } srcSet={ `/proxy/uploads/d/_thumbs${image.thumbnailPath}/200x200.png 1x, /proxy/uploads/d${image.storagePath} 4x` }
src={ `/proxy/uploads/d${image.storagePath}` } alt={ crop.name } /> }
{ !hasCover &&
<img className={ classes.mediaImage } src={ `images/crop-placeholder.jpg` } alt={ crop.name } />
}
</div>
);
};
const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { crop: CropDetails, classes?: any, compact?: boolean, edit?: boolean }) => {
if (!crop) {
return null;
......@@ -34,15 +67,12 @@ const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { cr
return compact ? (
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 } >
<Card className={ classes.root }>
{ crop.covers && crop.covers.length > 0 && <CardMedia className={ classes.media } title={ crop.name } image={ `/proxy/uploads/d${crop.covers[0].storagePath}` } /> }
<CropImage classes={ classes } crop={ crop } />
<CardHeader title={
<Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>
{ crop.name }
</Link>
}/>
<CardContent>
<Number value={ crop.accessionCount } />
</CardContent>
</Card>
</Grid>
)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment