Entry page sections

-Added SectionHeader

packages/client/src/ui/common/heading/SectionHeader.tsx

+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

@@ -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

@@ -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

@@ -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">