Merge branch '242-entry-page' into 'master'

Resolve "Entry page"

Closes #242

See merge request genesys-pgr/genesys-ui!246

.gitlab-ci.yml

@@ -13,6 +13,7 @@ stages:
   cache:
      paths:
        - node_modules/
+       - .awesome-typescript-loader-cache/
   before_script:
     - npm install
     # Needs to be uncommented if node:version us updated

locales/en/translations.json

@@ -308,7 +308,8 @@
     }
   },
   "common": {
-    "Genesys PGR": "Genesys PGR",
+    "appName": "Genesys PGR",
+    "tagline": "Genesys is an online platform where you can find information about Plant Genetic Resources for Food and Agriculture (PGRFA) conserved in genebanks worldwide.",
     "Not found": "Not found",
     "Nothing matches your request": "Nothing matches your request",
     "label": {

package.json

@@ -2,7 +2,7 @@
   "name": "genesys-pgr-ui",
   "version": "1.0.0",
   "description": "Genesys Website",
-  "keywords": "reactjs, genesys-pgr",
+  "keywords": [ "genebank", "genesys-pgr", "PGRFA", "accession" ],
   "license": "Apache-2.0",
   "homepage": "https://gitlab.croptrust.org/genesys-pgr/genesys-ui.git",
   "repository": {

src/cms/ui/c/ActivityPostCard.tsx

@@ -12,6 +12,7 @@ import Grid from '@material-ui/core/Grid';
 import withStyles from '@material-ui/core/styles/withStyles';
 import Avatar from '@material-ui/core/Avatar';
 import { ActivityPostLink } from 'ui/genesys/Links';
+import IGridSizes from 'ui/common/GridSizes';
 
 const style = (theme) => ({
   header: {
@@ -47,7 +48,7 @@ const style = (theme) => ({
   /*tslint:enable*/
 });
 
-const ActivityPostCard = ({classes, post, compact, edit, t}: { post: ActivityPost, compact?: false, edit?: false, classes?: any, t: any }) => {
+const ActivityPostCard = ({classes, className, post, compact, edit, t, ...gridSizes}: { post: ActivityPost, compact?: false, edit?: false, classes?: any, className?: string, t: any, gridSizes: IGridSizes }) => {
   const urlTitle = post.title && post.title
     .split(/<.*?>/)
     .filter((el) => !!el)
@@ -56,8 +57,8 @@ const ActivityPostCard = ({classes, post, compact, edit, t}: { post: ActivityPos
     .replace(/\s/g, '-');
 
   return (
-    <Grid item xs={ 12 }>
-      <Card>
+    <Grid item { ...gridSizes }>
+      <Card className={ className }>
         <div className={ classes.headerWrapper }>
           { !compact &&
             <Avatar className={ classes.avatar }>{ post.lastModifiedBy[0].toUpperCase() }</Avatar>

src/crop/ui/c/CropCard.tsx

@@ -18,6 +18,7 @@ import withStyles from '@material-ui/core/styles/withStyles';
 import Button from '@material-ui/core/Button';
 import Authorize from 'ui/common/authorized/Authorize';
 import ImageDetailsDialog from 'repository/ui/c/ImageDetailsDialog';
+import IGridSizes from 'ui/common/GridSizes';
 
 const style = (theme) => ({
   root: {
@@ -94,13 +95,16 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
 
 const CropImage = connect(null, mapDispatchToProps)(CropImage_);
 
-const CropCard = ({crop, classes, compact = false, edit = false, t, ...other}: { crop: CropDetails, classes?: any, compact?: boolean, edit?: boolean, t: any }) => {
+const CropCard = ({crop, classes, compact = false, edit = false, t, ...other}: { crop: CropDetails, classes?: any, compact?: boolean, edit?: boolean, t: any}) => {
   if (!crop) {
     return null;
   }
 
+  const gridSizes: IGridSizes = other as IGridSizes || { xs: 12, sm: 6, md: 4, lg: 3, xl: 2 };
+  console.log(`CropCard sizes:`, gridSizes, other);
+
   return compact ? (
-    <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 } >
+    <Grid item { ...gridSizes } >
       <Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>
         <Card className={ classes.root }>
           <CropImage classes={ classes } crop={ crop } />
@@ -111,7 +115,7 @@ const CropCard = ({crop, classes, compact = false, edit = false, t, ...other}: {
   )
   :
   (
-    <Grid item xs={ 12 }>
+    <Grid item { ...gridSizes }>
       <Card className={ classes.root }>
         <CardHeader title={ t('crop.public.p.display.title') }/>
         <CardContent>

src/translations.json

@@ -308,7 +308,8 @@
     }
   },
   "common": {
-    "Genesys PGR": "Genesys PGR",
+    "appName": "Genesys PGR",
+    "tagline": "Genesys is an online platform where you can find information about Plant Genetic Resources for Food and Agriculture (PGRFA) conserved in genebanks worldwide.",
     "Not found": "Not found",
     "Nothing matches your request": "Nothing matches your request",
     "label": {

src/ui/App.tsx

@@ -30,6 +30,7 @@ interface IAppProps extends React.ClassAttributes<any> {
     serverInfo: any;
     serverInfoRequest: any;
     checkSoftwareVersion: any;
+    tReady: any;
 }
 
 class App extends React.Component<IAppProps, any> {

src/ui/common/GridSizes.ts

+export default interface IGridSizes {
+  xs?: boolean | 'auto' | 1 | 2 | 12 | 6 | 4 | 3 | 5 | 7 | 8 | 9 | 10 | 11;
+  sm?: boolean | 'auto' | 1 | 2 | 12 | 6 | 4 | 3 | 5 | 7 | 8 | 9 | 10 | 11;
+  md?: boolean | 'auto' | 1 | 2 | 12 | 6 | 4 | 3 | 5 | 7 | 8 | 9 | 10 | 11;
+  lg?: boolean | 'auto' | 1 | 2 | 12 | 6 | 4 | 3 | 5 | 7 | 8 | 9 | 10 | 11;
+  xl?: boolean | 'auto' | 1 | 2 | 12 | 6 | 4 | 3 | 5 | 7 | 8 | 9 | 10 | 11;
+}

src/ui/common/pie-chart/PieChartCard.tsx

@@ -20,6 +20,10 @@ class PieChartCard extends React.Component<IPieChartCardProps> {
   public render() {
     const {title, maxTerms = 5, terms, total, missing = 0, propertyItemProps, t} = this.props;
 
+    if (!total || !terms) {
+      return null;
+    }
+
     const topXTerms = terms.slice(0, maxTerms).map((term) => ({title: term.term, value: term.count}));
     const other = total - missing - topXTerms.map((term) => term.value).reduce((cur, val) => cur + val);
 

src/ui/pages/welcome/index.tsx

@@ -11,23 +11,21 @@ import { loadLastNews } from 'cms/actions/public';
 // Models
 import ActivityPost from 'model/cms/ActivityPost';
 
-import ContentHeader from 'ui/common/heading/ContentHeader';
-import Grid from '@material-ui/core/Grid';
 import Markdown from 'ui/common/markdown';
+import Grid from '@material-ui/core/Grid';
 import { Link } from 'react-router-dom';
 import Input from '@material-ui/core/Input';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import IconButton from '@material-ui/core/IconButton';
 import Hidden from '@material-ui/core/Hidden';
-import RecordVoiceOverIcon from '@material-ui/icons/RecordVoiceOver';
-import MailOutlineIcon from '@material-ui/icons/MailOutline';
-import BookmarkBorderIcon from '@material-ui/icons/BookmarkBorder';
 import PageLayout, { PageContents } from 'ui/layout/PageLayout';
 import Number from 'ui/common/Number';
 import GridContainer from 'ui/layout/GridContainer';
 import CropCard from 'crop/ui/c/CropCard';
 import ActivityPostCard from 'cms/ui/c/ActivityPostCard';
 import PageTitle from 'ui/common/PageTitle';
+import SectionHeader from 'ui/common/heading/SectionHeader';
+import Card, { CardContent } from 'ui/common/Card';
 
 const styles = (theme) => ({
     /* tslint:disable */
@@ -159,41 +157,28 @@ const styles = (theme) => ({
     aboutBox: {
         position: 'relative' as 'relative',
         width: '100%',
-        background: 'rgba(0, 0, 0, 0.6)',
+        background: '#626e45',
         color: '#fff',
         textAlign: 'center' as 'center',
         '& .markdown p': {
-            fontSize: '1.143rem',
-            lineHeight: '3.071rem',
-            width: '80%',
-            margin: '0 auto',
+            maxWidth: '800px',
+            margin: 'auto',
+            padding: '1.5rem 0',
+            fontSize: '2.0rem',
+            lineHeight: 'normal',
         },
         [theme.breakpoints.down('sm')]: {
             padding: '1rem 0',
             '& .markdown p': {
                 paddingBottom: '0.5rem',
                 fontSize: '1.286rem',
+                lineHeight: 'normal',
                 fontWeight: 'bold' as 'bold',
-                lineHeight: '1.75rem',
+                margin: 'auto',
+                padding: '.2rem 0',
             },
         },
     },
-    plus: {
-        position: 'absolute' as 'absolute',
-        top: '8px',
-        right: '16px',
-        width: '24px',
-        lineHeight: '24px',
-        background: '#88ba42',
-        borderRadius: '50%',
-        fontSize: '1.286rem',
-        fontWeight: 'bold' as 'bold',
-        cursor: 'pointer',
-        [theme.breakpoints.down('sm')]: {
-            position: 'static' as 'static',
-            margin: '0 auto',
-        },
-    },
     moreStuffWrapper: {
         backgroundColor: '#e7e5df',
         paddingTop: '2.14rem',
@@ -252,6 +237,9 @@ const styles = (theme) => ({
           color: '#fff',
         }
     },
+    fullHeight: {
+        height: '100%',
+    },
     /* tslint:enable */
 });
 
@@ -294,12 +282,6 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
             </div>
         );
 
-        const InfoBox = ({children}) => (
-            <div className={ classes.infoBox }>
-                { children }
-            </div>
-        );
-
         const searchQueryChange = (e) => {
             this.setState({
                 ...this.state,
@@ -324,8 +306,10 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
 
         return (
             <PageLayout classes={ {root: classes.root } } withFooter>
-                <PageTitle title={ t('common.Genesys PGR') }/>
-                <ContentHeader title={ t('common.Genesys PGR') } />
+                <PageTitle title={ t('common.appName') }/>
+                <div className={ classes.aboutBox }>
+                    <Markdown source={ t('common.tagline') } />
+                </div>
                 <Grid container spacing={ 0 } className={ classes.background }>
                     <div  className={ classes.backgroundImageWrapper }>
                         <img className={ classes.backgroundImage } srcSet="
@@ -422,91 +406,61 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
                             </Hidden>
                         </Grid>
                     </Grid>
-                    <div className={ classes.aboutBox }>
-                        <Markdown source={
-                                `
-The Genesys Catalog enables genebanks around the world to
-share caracterization and evaluation information on material held in their collections.
-`
-                            } />
-                        <div className={ classes.plus }>
-                            +
-                        </div>
-                    </div>
-                    <Grid item xs={ 12 } className={ classes.moreStuffWrapper }>
-                        <Grid container spacing={ 0 } className={ classes.moreStuff }>
-                            <Grid item xs={ 12 } md={ 4 }>
-                                <InfoBox>
-                                    <Hidden mdUp>
-                                        <span>
-                                            <RecordVoiceOverIcon color="primary"/>
-                                        </span>
-                                    </Hidden>
-                                    <Hidden mdDown>
-                                        <span>
-                                            <img src="images/ICON-CONTRIBUTE.svg" alt=""/>
-                                        </span>
-                                    </Hidden>
-                                    <p className="font-bold">{ t('public.p.welcome.Contribute to Genesys') }</p>
-                                </InfoBox>
+                </Grid>
+                <PageContents>
+                    <Grid item xs={ 12 } className="pt-1rem">
+                        <SectionHeader title="Acknowledgements" subTitle="Genesys is possible because of..." />
+                        <GridContainer>
+                            <Grid item lg={ 4 } >
+                                <Card className={ classes.fullHeight }>
+                                    <CardContent>
+                                        <Link to="/iso3166">Origins of plant genetic resources</Link>
+                                    </CardContent>
+                                </Card>
                             </Grid>
-                            <Grid item xs={ 12 } md={ 4 }>
-                                <InfoBox>
-                                    <Hidden mdUp>
-                                        <span>
-                                            <MailOutlineIcon color="primary"/>
-                                        </span>
-                                    </Hidden>
-                                    <Hidden mdDown>
-                                        <span>
-                                            <img src="images/ICON-SUBSCRIBE.svg" alt=""/>
-                                        </span>
-                                    </Hidden>
-                                    <p className="font-bold">{ t('public.p.welcome.Subscribe to Newsletter') }</p>
-                                </InfoBox>
+                            <Grid item lg={ 4 } >
+                                <Card className={ classes.fullHeight }>
+                                    <CardContent>
+                                        <Link to="/partners">Data providers to Genesys</Link>
+                                    </CardContent>
+                                </Card>
                             </Grid>
-                            <Grid item xs={ 12 } md={ 4 }>
-                                <InfoBox>
-                                    <Hidden mdUp>
-                                        <span>
-                                            <BookmarkBorderIcon color="primary"/>
-                                        </span>
-                                        <p className="font-bold">{ t('public.p.welcome.Bookmark this page') }</p>
-                                    </Hidden>
-                                    <Hidden mdDown>
-                                        <span>
-                                            <img src="images/ICON-ABOUT.svg" alt=""/>
-                                        </span>
-                                        <p className="font-bold">{ t('public.p.welcome.About Genesys PGR') }</p>
-                                    </Hidden>
-                                </InfoBox>
+                            <Grid item lg={ 4 } >
+                                <Card className={ classes.fullHeight }>
+                                    <CardContent>
+                                        <Link to="/content/about">Donor funding</Link>
+                                    </CardContent>
+                                </Card>
                             </Grid>
-                        </Grid>
+                        </GridContainer>
                     </Grid>
-                </Grid>
-                <Grid item xs={ 12 }>
                     { lastNews &&
-                        <PageContents className="pt-1rem">
+                        <Grid item xs={ 12 } className="pt-1rem">
+                        <SectionHeader title="Recent activity" subTitle="The last three posts published by the Genesys team" />
+                        <GridContainer>
+                            { lastNews.slice(0, 3).map((post) => <ActivityPostCard sm={ 12 } md={ 4 } key={ post.id } post={ post } className={ classes.fullHeight } />) }
+                            <Grid item xs={ 12 }>
+                            <Link to="/content/news" className={ `text-center font-medium uppercase ${classes.newsLink}` }>
+                                <span>{ t('public.p.welcome.newsList') }</span>
+                            </Link>
+                            </Grid>
+                        </GridContainer>
+                        </Grid>
+                    }
+                    { crops &&
+                        <Grid item xs={ 12 } className="pt-1rem">
+                            <SectionHeader title="Highlighted crops" subTitle="A random selection of crops in Genesys" />
                             <GridContainer>
-                                { lastNews.map((post) => <ActivityPostCard key={ post.id } post={ post } />) }
+                                { crops.sort(() => Math.random() > 0.5 ? 1 : -1).slice(0, 6).sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard sm={ 12 } md={ 4 } key={ crop.shortName } crop={ crop } compact />) }
                                 <Grid item xs={ 12 }>
-                                    <Link to="/content/news" className={ `text-center font-medium uppercase ${classes.newsLink}` }>
-                                        <span>{ t('public.p.welcome.newsList') }</span>
+                                    <Link to="/c" className={ `text-center font-medium uppercase ${classes.newsLink}` }>
+                                        <span>All crops</span>
                                     </Link>
                                 </Grid>
                             </GridContainer>
-                        </PageContents>
-                    }
-                </Grid>
-                <Grid item xs={ 12 }>
-                    { crops &&
-                    <PageContents className="pt-1rem">
-                            <GridContainer>
-                                { crops && crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact />) }
-                            </GridContainer>
-                        </PageContents>
+                        </Grid>
                     }
-                </Grid>
+                </PageContents>
             </PageLayout>
         );
     }