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

Signed-off-by: Matija Obreza <matija.obreza@croptrust.org>

src/crop/ui/BrowsePage.tsx

@@ -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>

src/crop/ui/c/CropCard.tsx

 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>
   )