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

Merge branch '287-implement-entry-page-ui' into 'master'

Resolve "Implement entry page UI"

Closes #287

See merge request !224
parents 1485d2c7 936bf79f
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path fill="#2B2924" d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M13.2,18h-2.4v-7.2h2.4V18z M13.2,8.4h-2.4
V6h2.4V8.4z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<circle fill="#2B2924" cx="12" cy="12" r="12"/>
<g>
<circle fill="#FFFFFF" cx="10.1" cy="9.5" r="2.5"/>
<path fill="#FFFFFF" d="M10.1,13.3c-1.7,0-5.1,0.9-5.1,2.5v1.3h10.2v-1.3C15.2,14.2,11.8,13.3,10.1,13.3z M15,7.2L14,8.3
c0.5,0.8,0.5,1.7,0,2.5l1.1,1.1C16.3,10.5,16.3,8.6,15,7.2z M17.1,5l-1,1c1.8,1.9,1.8,4.8,0,6.8l1,1C19.6,11.5,19.6,7.6,17.1,5z"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path fill="#fff" d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,5.9,13.1,3,9.5,3S3,5.9,3,9.5S5.9,16,9.5,16c1.6,0,3.1-0.6,4.2-1.6
l0.3,0.3v0.8l5,5l1.5-1.5L15.5,14z M9.5,14C7,14,5,12,5,9.5S7,5,9.5,5S14,7,14,9.5S12,14,9.5,14z"/>
<path fill="none" d="M0,0h24v24H0V0z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<circle fill="#2B2924" cx="12" cy="12" r="12"/>
<path fill="#FFFFFF" d="M17,7H7C6.3,7,5.8,7.6,5.8,8.3l0,7.5C5.8,16.4,6.3,17,7,17h10c0.7,0,1.2-0.6,1.2-1.2V8.3
C18.2,7.6,17.7,7,17,7z M17,15.7H7V9.5l5,3.1l5-3.1V15.7z M12,11.4L7,8.3h10L12,11.4z"/>
</svg>
......@@ -11,59 +11,189 @@ import Markdown from 'ui/catalog/markdown';
import { Link } from 'react-router-dom';
import Input, { InputAdornment } from 'material-ui/Input';
import IconButton from 'material-ui/IconButton';
import IconSearch from 'material-ui-icons/Search';
import Hidden from 'material-ui/Hidden';
import RecordVoiceOverIcon from 'material-ui-icons/RecordVoiceOver';
import MailOutlineIcon from 'material-ui-icons/MailOutline';
import BookmarkBorderIcon from 'material-ui-icons/BookmarkBorder';
const styles = (theme) => ({
/* tslint:disable */
background: {
backgroundImage: 'url("/images/entrypage-bg.jpg")',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'bottom left',
padding: '2rem .5rem',
},
moreStuff: {
padding: '2rem .5rem',
/* tslint:disable */
background: {
backgroundImage: 'url("/images/entrypage.jpg")',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'left bottom',
[theme.breakpoints.down('sm')]: {
backgroundPosition: '-440px -180px',
},
aboutBox: {
// TODO
textAlign: 'center',
padding: '1rem',
'& .markdown p': {
fontSize: '2rem',
lineHeight: '2.5rem',
},
},
searchBox: {
textAlign: 'center',
padding: '6.857rem 0 5.714rem 0',
[theme.breakpoints.down('md')]: {
padding: '4.857rem 0 2.714rem 0',
},
},
searchWrapper: {
width: '56%',
margin: '0 auto',
border: '5px solid rgba(0, 0, 0, 0.4)',
borderRight: '9px solid rgba(0, 0, 0, 0.4)',
borderRadius: '10px',
[theme.breakpoints.down('md')]: {
width: '88%',
},
},
searchField: {
width: '100%',
background: 'rgba(255, 255, 255, 0.9)',
border: '2px solid #000',
borderRadius: '4px',
'& input': {
paddingLeft: '1.429rem',
fontSize: '1.286rem',
},
searchBox: {
// TODO
textAlign: 'center',
padding: '2rem 0',
},
searchButton: {
background: '#0b6eb5',
padding: '0 1.143rem',
outline: '2px solid #0b6eb5',
'& button': {
width: 'auto',
verticalAlign: 'middle',
color: '#fff',
},
searchField: {
fontSize: '2rem',
backgroundColor: 'White',
padding: '0 0 0 1rem',
'& img': {
width: '24px',
height: '24px',
},
'& span.search': {
margin: '0 .5rem',
fontSize: '1.286rem',
[theme.breakpoints.down('md')]: {
display: 'none',
},
},
stats: {
textAlign: 'center',
padding: '2rem 1rem',
// border: 'solid 1px Gray',
},
statsWrapper: {
marginBottom: '2.857rem',
},
statsContainer: {
width: '56%',
margin: '0 auto',
[theme.breakpoints.down('md')]: {
width: '72%',
},
},
stats: {
padding: '0 1.429rem',
height: '4.857rem',
display: 'flex',
background: 'rgba(0, 0, 0, 0.6)',
border: '2px solid rgba(255, 255, 255, 0.8)',
alignItems: 'center' as 'center',
'& a': {
color: '#88ba42',
},
[theme.breakpoints.down('md')]: {
justifyContent: 'center' as 'center',
height: '3rem',
display: 'flex',
// backgroundColor: '#D4D1C6',
alignItems: 'flex-end' as 'flex-end',
justifyContent: 'center' as 'center',
'& a': {
color: 'White',
color: '#fff',
},
},
},
amount: {
display: 'block',
fontSize: '2.143rem',
fontWeight: 'bold' as 'bold',
color: '#fff',
},
aboutBox: {
position: 'relative' as 'relative',
width: '100%',
background: 'rgba(0, 0, 0, 0.6)',
color: '#fff',
textAlign: 'center',
'& .markdown p': {
fontSize: '1.143rem',
lineHeight: '3.071rem',
width: '80%',
margin: '0 auto',
},
[theme.breakpoints.down('md')]: {
padding: '1rem 0',
'& .markdown p': {
paddingBottom: '0.5rem',
fontSize: '1.286rem',
fontWeight: 'bold' as 'bold',
lineHeight: '1.75rem',
},
},
infoBox: {
padding: '2rem',
// border: 'solid 1px Gray',
backgroundColor: '#D4D1C6',
},
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('md')]: {
position: 'static' as 'static',
margin: '0 auto',
},
/* tslint:enable */
},
moreStuffWrapper: {
backgroundColor: '#e7e5df',
paddingTop: '2.14rem',
},
moreStuff: {
width: '60%',
margin: '0 auto',
'& > div': {
borderLeft: '1px solid #2b2924',
},
'& > div:last-child': {
borderRight: '1px solid #2b2924',
},
[theme.breakpoints.down('md')]: {
width: '90%',
color: '#8fc848',
'& > div': {
border: 'none',
borderBottom: '1px solid #2b2924',
padding: '1rem 0',
},
'& > div:last-child': {
border: 'none',
},
},
},
infoBox: {
padding: '.5rem',
display: 'flex',
alignItems: 'center' as 'center',
justifyContent: 'center' as 'center',
'& span': {
marginRight: '1rem',
'& img': {
width: '40px',
height: '40px',
},
},
'& p': {
margin: 0,
fontSize: '1.071rem',
},
},
/* tslint:enable */
});
const SEARCH_SUGGESTIONS = [
......@@ -80,14 +210,14 @@ class WelcomePage extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = { query: '', queryPlaceholder: 'Search the Catalog' };
this.state = { query: '', queryPlaceholder: 'Search the catalog ...' };
}
public render() {
const { classes } = this.props;
const Stats = ({children}) => (
<div className={ `${classes.stats} back-green` }>
<div className={ classes.stats }>
{ children }
</div>
);
......@@ -125,74 +255,162 @@ class WelcomePage extends React.Component<any, any> {
<ContentHeader title="Genesys Catalog" />
<Grid container spacing={ 0 } className={ classes.background }>
<Grid item xs={ 12 }>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<div className={ classes.searchBox }>
<form onSubmit={ onSubmitSearch }>
<Input type="text" onChange={ searchQueryChange } className={ classes.searchField }
placeholder={ this.state.queryPlaceholder }
endAdornment={
<InputAdornment position="end">
<IconButton type="button" onClick={ onSubmitSearch }><IconSearch /></IconButton>
</InputAdornment>
}
/>
</form>
<div className={ classes.searchBox }>
<form onSubmit={ onSubmitSearch }>
<div className={ classes.searchWrapper }>
<Input type="text" onChange={ searchQueryChange } className={ classes.searchField }
disableUnderline
placeholder={ this.state.queryPlaceholder }
endAdornment={
<InputAdornment position="end" className={ classes.searchButton }>
<IconButton type="button" onClick={ onSubmitSearch }>
<img src="images/ICON-SEARCH.svg" alt=""/>
<span className="search">Search</span>
</IconButton>
</InputAdornment>
}
/>
</div>
</Grid>
<Grid container spacing={ 24 }>
<Grid item xs={ 6 } md={ 3 }>
</form>
</div>
</Grid>
<Grid item xs={ 12 } className={ classes.statsWrapper }>
<Grid container spacing={ 16 } className={ classes.statsContainer }>
<Hidden mdDown>
<Grid item xs={ 12 } md={ 3 }>
<Stats>
<Link to="/datasets"><b>Some</b> datasets</Link>
<Link to="/accessions">
<span className={ classes.amount }>75.543</span>
Crop accessions
</Link>
</Stats>
</Grid>
<Grid item xs={ 6 } md={ 3 }>
<Grid item xs={ 12 } md={ 3 }>
<Stats>
<Link to="/descriptors">Over <b>700</b> descriptors</Link>
<Link to="/datasets">
<span className={ classes.amount }>1.543</span>
Phenotypic datasets
</Link>
</Stats>
</Grid>
<Grid item xs={ 6 } md={ 3 }>
<Grid item xs={ 12 } md={ 3 }>
<Stats>
<Link to="/partners"><b>6</b> partners</Link>
<Link to="/descriptors">
<span className={ classes.amount }>9.432</span>
Crop descriptors
</Link>
</Stats>
</Grid>
<Grid item xs={ 6 } md={ 3 }>
<Grid item xs={ 12 } md={ 3 }>
<Stats>
<Link to="/accessions"><b>3.6M</b> accessions</Link>
<Link to="/partners">
<span className={ classes.amount }>450</span>
Partners
</Link>
</Stats>
</Grid>
</Grid>
</Hidden>
<Hidden mdUp>
<Grid item xs={ 12 } md={ 3 }>
<Stats>
<Link to="/accessions">
Browse 100+ Datasets
</Link>
</Stats>
</Grid>
<Grid item xs={ 12 } md={ 3 }>
<Stats>
<Link to="/datasets">
Browse 700+ Descriptors
</Link>
</Stats>
</Grid>
<Grid item xs={ 12 } md={ 3 }>
<Stats>
<Link to="/descriptors">
Browse 6 Partners
</Link>
</Stats>
</Grid>
<Grid item xs={ 12 } md={ 3 }>
<Stats>
<Link to="/partners">
Browse 3,6m Partners
</Link>
</Stats>
</Grid>
</Hidden>
</Grid>
</Grid>
</Grid>
<div className={ classes.aboutBox }>
<Markdown source={
<div className={ classes.aboutBox }>
<Hidden mdDown>
<Markdown source={
`
The Genesys Catalog enables genebanks around the world to
share caracterization and evaluation information on material held in their collections.
`
The **Catalog** of datasets enables genebanks around the World to
share information on material in their collections.
} />
</Hidden>
<Hidden mdUp>
<Markdown source={
`
The Catalog of datasets enables genbanks around the World to share information on material in their collections.
`
} />
</div>
<Grid container spacing={ 24 } className={ classes.moreStuff }>
<Grid item xs={ 12 }>
<div className="mb-20 text-center p-10">
Here be dragons!
} />
</Hidden>
<div className={ classes.plus }>
+
</div>
</Grid>
<Grid item xs={ 12 } md={ 4 }>
<InfoBox>
Contribute to Genesys
</InfoBox>
</Grid>
<Grid item xs={ 12 } md={ 4 }>
<InfoBox>
Subscribe to the Genesys newsletter
</InfoBox>
</Grid>
<Grid item xs={ 12 } md={ 4 }>
<InfoBox>
Here be more dragons!
</InfoBox>
</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">Contribute to Genesys</p>
</InfoBox>
</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">Subscribe to Newsletter</p>
</InfoBox>
</Grid>
<Grid item xs={ 12 } md={ 4 }>
<InfoBox>
<Hidden mdUp>
<span>
<BookmarkBorderIcon color="primary"/>
</span>
<p className="font-bold">Bookmark this page</p>
</Hidden>
<Hidden mdDown>
<span>
<img src="images/ICON-ABOUT.svg" alt=""/>
</span>
<p className="font-bold">About Genesys Catalog</p>
</Hidden>
</InfoBox>
</Grid>
</Grid>
</Grid>
</Grid>
</div>
......
Supports Markdown
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