Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Catalog
catalog.genesys-pgr.org
Commits
be006420
Commit
be006420
authored
Feb 14, 2018
by
Matija Obreza
Browse files
First version of the Entry page
- Also some scroll control
parent
723d3f65
Changes
8
Hide whitespace changes
Inline
Side-by-side
images/entrypage-bg.jpg
0 → 100644
View file @
be006420
49.7 KB
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-1
0
pb-10 pl-20 pr-20`
}
>
<
Grid
container
spacing
=
{
0
}
className
=
{
`back-green pt-1
5
pb-10 pl-20 pr-20`
}
>
<
Grid
item
xs
=
{
12
}
>
<
h
3
className
=
"font-bold white mb-5"
>
<
h
1
className
=
"font-bold white mb-5"
style
=
{
{
marginBottom
:
0
,
fontSize
:
'
1.5rem
'
}
}
>
{
title
}
</
h
3
>
</
h
1
>
<
Hidden
implementation
=
"css"
mdDown
>
<
h
5
className
=
"font-medium white m-0"
>
<
h
3
className
=
"font-medium white m-0"
style
=
{
{
marginTop
:
'
.5rem
'
,
fontSize
:
'
1rem
'
}
}
>
{
subTitle
}
</
h
5
>
</
h
3
>
</
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
));
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment