Skip to content
GitLab
Commit be006420 authored by Matija Obreza's avatar Matija Obreza
Browse files

First version of the Entry page 

- Also some scroll control
parent 723d3f65
Hide whitespace changes
Inline Side-by-side
src/ui/common/heading/ContentHeader.tsx
View file @ be006420
......@@ -18,15 +18,15 @@ class ContentHeader extends React.Component<IContentHeader , any> {
const { title, subTitle} = this.props;
return (
<Grid container spacing={ 0 } className={ `back-green pt-10 pb-10 pl-20 pr-20` }>
<Grid container spacing={ 0 } className={ `back-green pt-15 pb-10 pl-20 pr-20` }>
<Grid item xs={ 12 }>
<h3 className="font-bold white mb-5">
<h1 className="font-bold white mb-5" style={ { marginBottom: 0, fontSize: '1.5rem' } }>
{ title }
</h3>
</h1>
<Hidden implementation="css" mdDown>
<h5 className="font-medium white m-0">
<h3 className="font-medium white m-0" style={ { marginTop: '.5rem', fontSize: '1rem' } }>
{ subTitle }
</h5>
</h3>
</Hidden>
</Grid>
</Grid>
......
src/ui/common/page/scrollers.tsx 0 → 100644
View file @ be006420
import * as React from 'react';
// Nicked from
// https://reacttraining.com/react-router/web/guides/scroll-restoration
export class ScrollToTopOnMount extends React.Component {
public componentDidMount() {
if (window) {
window.scrollTo(0, 0);
}
}
public render() {
return null;
}
}
src/ui/pages/descriptor/BrowsePage.tsx
View file @ be006420
......@@ -10,7 +10,7 @@ import { listCrops } from 'actions/crop';
import { Descriptor, IDescriptorFilter } from 'model/descriptor.model';
import { Page, Pagination } from 'model/common.model';
import PagedLoader from 'ui/common/PagedLoader';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import Loading from 'ui/common/Loading';
import PaginationComponent from 'ui/common/pagination';
import DescriptorCard from 'ui/catalog/descriptor/DescriptorCard';
......@@ -96,6 +96,7 @@ class BrowsePage extends React.Component<IDescriptorListsPageProps & any, any> {
return (
<div className="back-gray ">
<ScrollToTopOnMount />
<ContentHeader title="Crop Descriptors"
subTitle="A Genesys Catalog of Published Descriptors"
/>
......
src/ui/pages/descriptor/DisplayPage.tsx
View file @ be006420
......@@ -16,6 +16,7 @@ import Section from 'ui/common/layout/Section';
import Markdown from 'ui/catalog/markdown';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import PrettyDate from 'ui/common/time/PrettyDate';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import { PartnerLink, DescriptorLink, CropLink, DescriptorListLink, DatasetLink } from 'ui/catalog/Links';
import { Table, TableRow, TableCell } from 'ui/common/tables';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
......@@ -106,6 +107,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
// <PropertiesItem title="Publisher:">{ descriptor.publisher || <i>Not specified</i> }</PropertiesItem>
return (
<div>
<ScrollToTopOnMount />
<ContentHeaderWithButton title="Descriptor details" buttons={ <BackButton defaultTarget="/descriptors" /> } />
{ stillLoading ? <Loading /> :
<Grid container spacing={ 24 } className="p-20 back-gray">
......
src/ui/pages/descriptorlist/BrowsePage.tsx
View file @ be006420
......@@ -12,7 +12,7 @@ import { DescriptorList, IDescriptorListFilter } from 'model/descriptor.model';
import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import Loading from 'ui/common/Loading';
import PaginationComponent from 'ui/common/pagination';
import DescriptorListCard from 'ui/catalog/descriptorlist/Card';
......@@ -91,6 +91,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
return (
<Grid container spacing={ 0 }>
<ScrollToTopOnMount />
<Grid item xs={ 12 } md={ 3 } lg={ 2 } className={ classes.filterSection }>
<DescriptorListFilters initialValues={ pagination.filter } onSubmit={ this.applyFilters } />
</Grid>
......
src/ui/pages/descriptorlist/DisplayPage.tsx
View file @ be006420
......@@ -18,6 +18,7 @@ import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import { PartnerLink, DescriptorListLink, CropLink } from 'ui/catalog/Links';
import { Properties, PropertiesItem } from 'ui/catalog/Properties';
import BackButton from 'ui/common/buttons/BackButton';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import Grid from 'material-ui/Grid';
import Card, {CardHeader, CardContent, CardActions } from 'ui/common/Card';
......@@ -131,6 +132,7 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
return (
<div>
<ScrollToTopOnMount />
<ContentHeaderWithButton title="Descriptor list details" buttons={ <BackButton defaultTarget="/descriptorlists" /> } />
{ stillLoading ? <Loading className={ classes.contentContainer } /> :
<span>
......
src/ui/pages/welcome/index.tsx
View file @ be006420
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {withStyles} from 'material-ui/styles';
import Container from 'ui/common/container';
import Heading from 'ui/common/heading';
import { navigateTo } from 'actions/navigation';
function mapStateToProps(state) {
return {
};
}
import ContentHeader from 'ui/common/heading/ContentHeader';
import Grid from 'material-ui/Grid';
import Markdown from 'ui/catalog/markdown';
import { Link } from 'react-router';
import Input, { InputAdornment } from 'material-ui/Input';
import IconButton from 'material-ui/IconButton';
import IconSearch from 'material-ui-icons/Search';
function mapDispatchToProps(dispatch) {
return {
};
}
class WelcomePage extends React.Component<React.Props<any>, void> {
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',
},
aboutBox: {
// TODO
textAlign: 'center',
padding: '1rem',
'& .markdown p': {
fontSize: '2rem',
lineHeight: '2.5rem',
},
},
searchBox: {
// TODO
textAlign: 'center',
padding: '2rem 0',
},
searchField: {
fontSize: '2rem',
backgroundColor: 'White',
padding: '0 0 0 1rem',
},
stats: {
textAlign: 'center',
padding: '2rem 1rem',
// border: 'solid 1px Gray',
height: '3rem',
display: 'flex',
// backgroundColor: '#D4D1C6',
alignItems: 'flex-end' as 'flex-end',
justifyContent: 'center' as 'center',
'& a': {
color: 'White',
},
},
infoBox: {
padding: '2rem',
// border: 'solid 1px Gray',
backgroundColor: '#D4D1C6',
},
/* tslint:enable */
});
const SEARCH_SUGGESTIONS = [
'Try "maize" or "petiole"',
'How about "rice"',
'What is "MARDI" up to?',
'"IRGC 1000" maybe',
'Try "leaf shape"',
'Anything on "cassava"?',
'Maybe "drought"?',
];
class WelcomePage extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = { query: '', queryPlaceholder: 'Search the Catalog' };
}
public render() {
const { classes } = this.props;
const Stats = ({children}) => (
<div className={ `${classes.stats} back-green` }>
{ children }
</div>
);
const InfoBox = ({children}) => (
<div className={ classes.infoBox }>
{ children }
</div>
);
const searchQueryChange = (e) => {
this.setState({
...this.state,
query: e.target.value,
});
};
const onSubmitSearch = (e) => {
const { query } = this.state;
const { navigateTo } = this.props;
e.preventDefault();
if (query && query.length > 0) {
// TODO is this safe??
navigateTo(`/search?q=${query}`);
} else {
this.setState({
...this.state,
queryPlaceholder: SEARCH_SUGGESTIONS[Math.floor(Math.random() * SEARCH_SUGGESTIONS.length)],
});
}
};
return (
<Container testid="counter" size={ 12 } center>
<Heading title="Welcome to the Genesys Catalog" />
<h2>The TO-DO list</h2>
<ul>
<li>Entry page</li>
<li>... and everything else!</li>
</ul>
</Container>
<div>
<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>
</Grid>
<Grid container spacing={ 24 }>
<Grid item xs={ 6 } md={ 3 }>
<Stats>
<Link to="/datasets"><b>Some</b> datasets</Link>
</Stats>
</Grid>
<Grid item xs={ 6 } md={ 3 }>
<Stats>
<Link to="/descriptors">Over <b>700</b> descriptors</Link>
</Stats>
</Grid>
<Grid item xs={ 6 } md={ 3 }>
<Stats>
<Link to="/partners"><b>6</b> partners</Link>
</Stats>
</Grid>
<Grid item xs={ 6 } md={ 3 }>
<Stats>
<Link to="/accessions"><b>3.6M</b> accessions</Link>
</Stats>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<div className={ classes.aboutBox }>
<Markdown source={
`
The **Catalog** of datasets enables genebanks 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!
</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>
</Grid>
</Grid>
</div>
);
}
}
export default connect(
mapStateToProps,
mapDispatchToProps,
)(WelcomePage);
const mapDispatchToProps = (dispatch) => bindActionCreators({
navigateTo,
}, dispatch);
export default connect(null, mapDispatchToProps)(withStyles(styles)(WelcomePage));
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