Skip to content
GitLab
Commit 9342dc81 authored by Oleksii Savran's avatar Oleksii Savran
Browse files

Entry page sections 

-Added SectionHeader
parent 8035d3fb
Hide whitespace changes
Inline Side-by-side
packages/client/src/ui/common/heading/SectionHeader.tsx 0 → 100644
View file @ 9342dc81
import * as React from 'react';
import { createStyles, WithStyles, withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
interface IProps {
title: string | React.ReactNode;
subTitle?: string | React.ReactNode;
className?: string;
actions?: any;
}
const styles = (theme) => createStyles({
root: {
'margin': '2rem 0 1rem',
'fontFamily': 'Roboto-Light',
'borderBottom': 'solid 2px #808080',
'display': 'flex',
'flexDirection': 'row',
'justifyContent': 'space-between',
'&:first-child': {
marginTop: 0,
},
'& h2': {
margin: 0,
},
},
rightArea: {
'display': 'flex',
'alignItems': 'center',
'overflow': 'hidden',
'height': '48px',
'left': '100%',
'& > * > button': {
'marginLeft': '15px',
'html[dir="rtl"] &' : {
marginRight: '15px',
marginLeft: '0',
},
[theme.breakpoints.down('sm')]: {
marginTop: '5px',
marginBottom: '5px',
},
[theme.breakpoints.down('xs')]: {
'marginLeft': '5px',
'width': '100%',
'html[dir="rtl"] &' : {
marginRight: '5px',
marginLeft: '0',
},
},
},
[theme.breakpoints.down('sm')]: {
'overflow': 'initial',
'padding': '0',
'height': 'auto',
'& > *': {
width: '100%',
},
},
'actionsArea': {
alignSelf: 'flex-end',
},
},
});
const SectionHeader = ({ title, subTitle = null, classes, className = null, actions = null }: IProps & WithStyles) => (
<Grid container className={ `${classes.root} ${className}` }>
<Grid item className={ `float-left ${classes.actionsArea}` }>
<h2>{ title }</h2>
{ subTitle && <p>{ subTitle }</p> }
</Grid>
{ actions &&
<Grid item className={ `float-right ${classes.rightArea}` }>
{ actions }
</Grid>
}
</Grid>
);
export default withStyles(styles)(SectionHeader);
packages/ui-express/locales/en/express.json
View file @ 9342dc81
......@@ -17,6 +17,11 @@
"welcome": {
"p": {
"title": "GRIN-Global Community Edition",
"sections": {
"tools": "Tools",
"other": "Other",
"taxonomy": "Taxonomy"
},
"cards": {
"acquisition": {
"title": "Acquisition",
......
packages/ui-express/src/translations.json
View file @ 9342dc81
......@@ -17,6 +17,11 @@
"welcome": {
"p": {
"title": "GRIN-Global Community Edition",
"sections": {
"tools": "Tools",
"other": "Other",
"taxonomy": "Taxonomy"
},
"cards": {
"acquisition": {
"title": "Acquisition",
......
packages/ui-express/src/ui/pages/Welcome.tsx
View file @ 9342dc81
......@@ -8,6 +8,7 @@ import { Card, CardContent, CardHeader } from '@material-ui/core';
import Authorize from '@gringlobal/client/ui/common/authorized/Authorize';
import { UserRole } from '@gringlobal/client/model/gringlobal/SysUser';
import PageTitle from '@gringlobal/client/ui/common/PageTitle';
import SectionHeader from '@gringlobal/client/ui/common/heading/SectionHeader';
const styles = (theme) => ({
card: {
......@@ -31,131 +32,84 @@ class WelcomePage extends React.Component<WithTranslation & WithStyles> {
<Grid container justify="flex-start" spacing={ 2 }>
<Authorize roles={ [ UserRole.USER ] }>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/request">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.distribution.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.distribution.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
</Authorize>
<Authorize roles={ [ UserRole.USER ] }>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/request/new">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.distribution.new.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.distribution.new.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
</Authorize>
<Authorize roles={ [ UserRole.USER ] }>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/request/checklist">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.distribution.checklist.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.distribution.checklist.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
</Authorize>
<>
<SectionHeader title={ t('welcome.p.sections.tools') } className="m-halfrem pt-5 pb-5"/>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/a">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.accessions.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.accessions.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/a/summary">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.accessionSummary.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.accessionSummary.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/t/species">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.species.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.species.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/t/genus">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.genera.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.genera.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/inventory/acquisition">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.acquisition.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.acquisition.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Authorize roles={ [ UserRole.USER ] }>
<>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/inventory">
<Link to="/request">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.inventory.title') }/>
<CardHeader title={ t('welcome.p.cards.distribution.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.inventory.description') }</div>
<div>{ t('welcome.p.cards.distribution.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/inventory/summary">
<Link to="/request/new">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.inventorySummary.title') }/>
<CardHeader title={ t('welcome.p.cards.distribution.new.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.inventorySummary.description') }</div>
<div>{ t('welcome.p.cards.distribution.new.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/inventory/adjust">
<Link to="/request/checklist">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.inventoryadjust.title') }/>
<CardHeader title={ t('welcome.p.cards.distribution.checklist.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.inventoryadjust.description') }</div>
<div>{ t('welcome.p.cards.distribution.checklist.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
</>
</Authorize>
<Authorize roles={ [ UserRole.USER ] }>
<>
<SectionHeader title={ t('client:model._.inventory') } className="m-halfrem pt-5 pb-5"/>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/inventory/group">
<Link to="/inventory/summary">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.inventorygroup.title') }/>
<CardHeader title={ t('welcome.p.cards.inventorySummary.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.inventorygroup.description') }</div>
<div>{ t('welcome.p.cards.inventorySummary.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/inventory/acquisition">
<Link to="/inventory">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.acquisition.title') }/>
<CardHeader title={ t('welcome.p.cards.inventory.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.acquisition.description') }</div>
<div>{ t('welcome.p.cards.inventory.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/inventory/group">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.inventorygroup.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.inventorygroup.description') }</div>
</CardContent>
</Card>
</Link>
......@@ -171,11 +125,11 @@ class WelcomePage extends React.Component<WithTranslation & WithStyles> {
</Link>
</Grid>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/a/action">
<Link to="/inventory/adjust">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.accessionAction.title') }/>
<CardHeader title={ t('welcome.p.cards.inventoryadjust.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.accessionAction.description') }</div>
<div>{ t('welcome.p.cards.inventoryadjust.description') }</div>
</CardContent>
</Card>
</Link>
......@@ -183,6 +137,70 @@ class WelcomePage extends React.Component<WithTranslation & WithStyles> {
</>
</Authorize>
<SectionHeader title={ t('client:model._.accession') } className="m-halfrem pt-5 pb-5"/>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/a/summary">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.accessionSummary.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.accessionSummary.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/a">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.accessions.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.accessions.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Authorize roles={ [ UserRole.USER ] }>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/a/action">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.accessionAction.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.accessionAction.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
</Authorize>
<SectionHeader title={ t('welcome.p.sections.taxonomy') } className="m-halfrem pt-5 pb-5"/>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/t/species">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.species.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.species.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/t/genus">
<Card className={ classes.card }>
<CardHeader title={ t('welcome.p.cards.genera.title') }/>
<CardContent>
<div>{ t('welcome.p.cards.genera.description') }</div>
</CardContent>
</Card>
</Link>
</Grid>
<Authorize roles={ [ UserRole.USER ] }>
<SectionHeader title={ t('welcome.p.sections.other') } className="m-halfrem pt-5 pb-5"/>
</Authorize>
<Authorize roles={ [ UserRole.USER ] }>
<Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
<Link to="/cooperator">
......
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