Commit fe3fce16 authored by Matija Obreza's avatar Matija Obreza
Browse files

Entry page with limited width for content

- CropCard sizes fixed
parent 05c039c6
......@@ -6,7 +6,14 @@
"Bookmark this page": "Bookmark this page",
"Contribute to Genesys": "Contribute to Genesys",
"Subscribe to Newsletter": "Subscribe to Newsletter",
"newsList": "News list",
"acknowledgements": "Genesys is possible because of",
"ackProvenance": "Providers of plant genetic resources",
"ackDonors": "Donor funding",
"ackData": "Data providers to Genesys",
"recentActivity": "Recent activity",
"linkToAllActivity": "Browse all posts",
"cropList": "Highlighted crops",
"linkToAllCrops": "Browse all crops in Genesys",
"search": {
"placeholder": "Search Genesys...",
"suggestion0": "Try 'maize' or 'wild triticum'",
......
......@@ -35,7 +35,7 @@ class BrowsePage extends React.Component<IBrowsePageProps> {
const {crops, t} = this.props;
return (
<PageLayout>
<PageLayout withFooter>
<PageTitle title={ t('crop.public.p.browse.title') } />
<ContentHeader title={ t('crop.public.p.browse.title') } subTitle={ t('crop.public.p.browse.subTitle') } />
<PageContents className="pt-1rem">
......
......@@ -100,7 +100,7 @@ const CropCard = ({crop, classes, compact = false, edit = false, t, ...other}: {
return null;
}
const gridSizes: IGridSizes = other as IGridSizes || { xs: 12, sm: 6, md: 4, lg: 3, xl: 2 };
const gridSizes: IGridSizes = { xs: 12, sm: 6, md: 4, lg: 3, xl: 2, ...other };
console.log(`CropCard sizes:`, gridSizes, other);
return compact ? (
......
......@@ -6,7 +6,14 @@
"Bookmark this page": "Bookmark this page",
"Contribute to Genesys": "Contribute to Genesys",
"Subscribe to Newsletter": "Subscribe to Newsletter",
"newsList": "News list",
"acknowledgements": "Genesys is possible because of",
"ackProvenance": "Providers of plant genetic resources",
"ackDonors": "Donor funding",
"ackData": "Data providers to Genesys",
"recentActivity": "Recent activity",
"linkToAllActivity": "Browse all posts",
"cropList": "Highlighted crops",
"linkToAllCrops": "Browse all crops in Genesys",
"search": {
"placeholder": "Search Genesys...",
"suggestion0": "Try 'maize' or 'wild triticum'",
......
......@@ -17,7 +17,7 @@ const styles = (theme) => ({
});
/*tslint:enable*/
const SectionHeader = ({ title, subTitle = null, classes }: { title: any, subTitle?: string, classes: any }) => (
const SectionHeader = ({ title, subTitle = null, classes }: { title: any, subTitle?: any, classes: any }) => (
<div className={ classes.root }>
<h2>{ title }</h2>
{ subTitle && <p>{ subTitle }</p> }
......
......@@ -31,6 +31,7 @@ const styles = (theme) => ({
width: '100%',
},
footer: {
marginTop: '2em',
flexGrow: 'initial' as 'initial',
},
// Spacing for PageContents
......
......@@ -60,6 +60,7 @@ const styles = (theme) => ({
},
searchWrapper: {
width: '56%',
maxWidth: '1000px',
margin: '0 auto',
border: '5px solid rgba(0, 0, 0, 0.4)',
'html[dir="ltr"] &': {
......@@ -122,6 +123,7 @@ const styles = (theme) => ({
},
statsContainer: {
width: '56%',
maxWidth: '1000px',
margin: '0 auto',
[theme.breakpoints.down('sm')]: {
width: '72%',
......@@ -156,8 +158,9 @@ const styles = (theme) => ({
},
aboutBox: {
position: 'relative' as 'relative',
fontFamily: 'Roboto-Light',
width: '100%',
background: '#626e45',
background: '#87b842',
color: '#fff',
textAlign: 'center' as 'center',
'& .markdown p': {
......@@ -226,20 +229,17 @@ const styles = (theme) => ({
fontSize: '1.071rem',
},
},
newsLink: {
display: 'block',
width: '100%',
fontSize: '1.3rem',
backgroundColor: '#88ba43',
height: '2.8rem',
lineHeight: '2.8rem',
'& > span': {
color: '#fff',
}
},
fullHeight: {
height: '100%',
},
limitWidth: {
marginTop: '2em',
[theme.breakpoints.up('md')]: {
maxWidth: '1200px',
marginLeft: 'auto' as 'auto',
marginRight: 'auto' as 'auto',
},
}
/* tslint:enable */
});
......@@ -341,7 +341,7 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
<Grid item xs={ 12 } className={ classes.statsWrapper }>
<Grid container spacing={ 16 } className={ classes.statsContainer }>
<Hidden smDown>
<Grid item xs={ 12 } md={ 3 }>
<Grid item xs={ 12 } md={ 4 }>
<Stats>
<Link to="/a/overview">
<span className={ classes.amount }><Number value={ serverInfo.accessionCount } /></span>
......@@ -349,7 +349,7 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
</Link>
</Stats>
</Grid>
<Grid item xs={ 12 } md={ 3 }>
<Grid item xs={ 12 } md={ 4 }>
<Stats>
<Link to="/subsets">
<span className={ classes.amount }><Number value={ serverInfo.subsetCount } /></span>
......@@ -357,7 +357,7 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
</Link>
</Stats>
</Grid>
<Grid item xs={ 12 } md={ 3 }>
<Grid item xs={ 12 } md={ 4 }>
<Stats>
<Link to="/datasets/overview">
<span className={ classes.amount }><Number value={ serverInfo.datasetCount } /></span>
......@@ -365,101 +365,74 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
</Link>
</Stats>
</Grid>
<Grid item xs={ 12 } md={ 3 }>
<Stats>
<Link to="/wiews">
<span className={ classes.amount }><Number value={ serverInfo.instituteCount } /></span>
{ t('institutes.common.stats', { count: serverInfo.instituteCount }) }
</Link>
</Stats>
</Grid>
</Hidden>
<Hidden mdUp>
<Grid item xs={ 12 } md={ 3 }>
<Grid item xs={ 12 } md={ 4 }>
<Stats>
<Link to="/a/overview">
{ t('accessions.common.stats', { count: serverInfo.accessionCount }) }
</Link>
</Stats>
</Grid>
<Grid item xs={ 12 } md={ 3 }>
<Grid item xs={ 12 } md={ 4 }>
<Stats>
<Link to="/subsets">
{ t('subsets.common.stats', { count: serverInfo.subsetCount }) }
</Link>
</Stats>
</Grid>
<Grid item xs={ 12 } md={ 3 }>
<Grid item xs={ 12 } md={ 4 }>
<Stats>
<Link to="/datasets/overview">
{ t('datasets.common.stats', { count: serverInfo.datasetCount }) }
</Link>
</Stats>
</Grid>
<Grid item xs={ 12 } md={ 3 }>
<Stats>
<Link to="/wiews">
{ t('institutes.common.stats', { count: serverInfo.instituteCount }) }
</Link>
</Stats>
</Grid>
</Hidden>
</Grid>
</Grid>
</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 lg={ 4 } >
<Card className={ classes.fullHeight }>
<CardContent>
<Link to="/partners">Data providers to Genesys</Link>
</CardContent>
</Card>
</Grid>
<Grid item lg={ 4 } >
<Card className={ classes.fullHeight }>
<CardContent>
<Link to="/content/about">Donor funding</Link>
</CardContent>
</Card>
</Grid>
</GridContainer>
</Grid>
<PageContents className={ classes.limitWidth }>
<SectionHeader title={ t('public.p.welcome.recentActivity') } subTitle={ <Link to="/content/news">{ t('public.p.welcome.linkToAllActivity') }</Link> } />
{ lastNews &&
<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>
{ lastNews.slice(0, 3).map((post) => <ActivityPostCard xs={ 12 } md={ 4 } key={ post.id } post={ post } className={ classes.fullHeight } />) }
</GridContainer>
</Grid>
}
<SectionHeader title={ t('public.p.welcome.cropList') } subTitle={ <Link to="/c">{ t('public.p.welcome.linkToAllCrops') }</Link> } />
{ crops &&
<Grid item xs={ 12 } className="pt-1rem">
<SectionHeader title="Highlighted crops" subTitle="A random selection of crops in Genesys" />
<GridContainer>
{ 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="/c" className={ `text-center font-medium uppercase ${classes.newsLink}` }>
<span>All crops</span>
</Link>
</Grid>
</GridContainer>
</Grid>
<GridContainer>
{ crops.sort(() => Math.random() > 0.5 ? 1 : -1).slice(0, 6).sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard xs={ 12 } sm={ 12 } md={ 4 } lg={ 4 } key={ crop.shortName } crop={ crop } compact />) }
</GridContainer>
}
<SectionHeader title={ t('public.p.welcome.acknowledgements') } />
<GridContainer>
<Grid item xs={ 12 } md={ 4 } >
<Card className={ classes.fullHeight }>
<CardContent>
<Link to="/iso3166">{ t('public.p.welcome.ackProvenance') }</Link>
</CardContent>
</Card>
</Grid>
<Grid item xs={ 12 } md={ 4 } >
<Card className={ classes.fullHeight }>
<CardContent>
<Link to="/partners">{ t('public.p.welcome.ackData') }</Link>
</CardContent>
</Card>
</Grid>
<Grid item xs={ 12 } md={ 4 } >
<Card className={ classes.fullHeight }>
<CardContent>
<Link to="/content/about">{ t('public.p.welcome.ackDonors') }</Link>
</CardContent>
</Card>
</Grid>
</GridContainer>
</PageContents>
</PageLayout>
);
......
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