Skip to content

GitLab

Commit 149ec381 authored by Matija Obreza's avatar Matija Obreza
Browse files

Entry page reworked

parent 41db8574
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 117 deletions
locales/en/translations.json
View file @ 149ec381
......@@ -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/cms/ui/c/ActivityPostCard.tsx
View file @ 149ec381
......@@ -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
View file @ 149ec381
......@@ -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
View file @ 149ec381
......@@ -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
View file @ 149ec381
......@@ -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 0 → 100644
View file @ 149ec381
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/pages/welcome/index.tsx
View file @ 149ec381
......@@ -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>
);
}
......
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