Updated rendering of PageSection and accession gallery

src/accessions/ui/DisplayPage.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import { translate } from 'react-i18next';
+import { withStyles } from '@material-ui/core/styles';
 
 // Actions
 import { loadAccession } from 'accessions/actions/public';
@@ -33,9 +34,17 @@ import PdciTable from './c/PdciTable';
 import ImageGalleryView from 'repository/ui/c/ImageGalleryView';
 import Button from '@material-ui/core/Button/Button';
 
+const styles = (theme) => ({
+  pageSection: {
+    marginBottom: '1em',
+  },
+});
+
 
 interface IBrowsePageProps extends React.ClassAttributes<any> {
   t: any;
+  classes: any;
+
   uuid: string;
   doi: string; // DOI comes from the route without the '10.'
   accession: AccessionDetails;
@@ -81,8 +90,8 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
   }
 
   public render() {
-    const { t, error, uuid, doi, accessions } = this.props;
-    const {details: accession, pdci, datasets, subsets, files, imageGallery} = this.props.accession ?
+    const { t, error, uuid, doi, accessions, classes } = this.props;
+    const { details: accession, pdci, datasets, subsets, files, imageGallery } = this.props.accession ?
       this.props.accession
       :
       {details: null, pdci: null, datasets: null, subsets: null, files: null, imageGallery: null};
@@ -159,6 +168,10 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
                   </Properties>
                 </MainSection>
 
+                { imageGallery &&
+                  <ImageGalleryView className={ classes.pageSection } imageGallery={ imageGallery }/>
+                }
+
                 <PageSection title={ t('accessions.common.taxonomy') }>
                   <Properties>
                     <PropertiesItem title={ t('accessions.common.genus') }>{ accession.taxonomy.genus }</PropertiesItem>
@@ -183,29 +196,6 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
                     </Properties>
                   </PageSection>
                 }
-                { files &&
-                  <PageSection title={ t('accessions.public.p.display.relatedResources') }>
-                    <Properties>
-                      { files.map((e: RepositoryFile) => (
-                        <PropertiesItem key={ e.uuid } title={
-                          <a href={ `/proxy/api/v1/repository/download/${e.uuid}` }>
-                            <Button variant="raised" component="span">
-                              { t('common:action.download') }
-                            </Button>
-                          </a>
-                        }>
-                          <b>{ e.originalFilename }</b>
-                        </PropertiesItem>
-                      )) }
-                    </Properties>
-                  </PageSection>
-                }
-
-                { imageGallery &&
-                  <PageSection title={ t('accessions.public.p.display.imageGallery') }>
-                    <ImageGalleryView imageGallery={ imageGallery }/>
-                  </PageSection>
-                }
 
                 { accession.coll &&
                   <PageSection title={ t('accessions.public.p.display.collectingInformation') }>
@@ -246,6 +236,24 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
                   </Properties>
                 </PageSection> }
 
+                { files &&
+                  <PageSection title={ t('accessions.public.p.display.relatedResources') }>
+                    <Properties>
+                      { files.map((e: RepositoryFile) => (
+                        <PropertiesItem key={ e.uuid } title={
+                          <a href={ `/proxy/api/v1/repository/download/${e.uuid}` }>
+                            <Button variant="raised" component="span">
+                              { t('common:action.download') }
+                            </Button>
+                          </a>
+                        }>
+                          <b>{ e.originalFilename }</b>
+                        </PropertiesItem>
+                      )) }
+                    </Properties>
+                  </PageSection>
+                }
+
                 { pdci && <PdciTable pdci={ pdci } title={ t('accessions.public.p.display.pdci') }/> }
 
                 <PageSection title={ t('accessions.public.p.display.metadata') }>
@@ -299,4 +307,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
 }, dispatch);
 
 
-export default connect(mapStateToProps, mapDispatchToProps)(translate()(BrowsePage));
+export default connect(mapStateToProps, mapDispatchToProps)(translate()(withStyles(styles)(BrowsePage)));

src/repository/ui/c/ImageGalleryView.tsx

@@ -5,8 +5,8 @@ import ImageGallery from 'model/repository/ImageGallery';
 
 // UI
 import Card, {CardHeader, CardContent, CardMedia} from 'ui/common/Card';
-import {Properties, PropertiesItem} from 'ui/common/Properties';
-import PrettyDate from 'ui/common/time/PrettyDate';
+// import {Properties, PropertiesItem} from 'ui/common/Properties';
+// import PrettyDate from 'ui/common/time/PrettyDate';
 import Grid from '@material-ui/core/Grid';
 import withStyles from '@material-ui/core/styles/withStyles';
 
@@ -22,13 +22,13 @@ const style = (theme) => ({
   },
 });
 
-const ImageGalleryView = ({imageGallery, classes, compact = false, edit = false, ...other}: { imageGallery: ImageGallery, classes?: any, compact?: boolean, edit?: boolean }) => {
+const ImageGalleryView = ({imageGallery, classes, className, compact = false, edit = false, ...other}: { imageGallery: ImageGallery, className?: string, classes?: any, compact?: boolean, edit?: boolean }) => {
   if (!imageGallery) {
     return null;
   }
 
   return compact ? (
-    <Grid item xs={ 12 }>
+    <Grid item xs={ 12 } className={ className }>
       <Card className={ classes.root }>
         <CardHeader title={ imageGallery.title || imageGallery.folder } />
         <CardContent>
@@ -39,7 +39,7 @@ const ImageGalleryView = ({imageGallery, classes, compact = false, edit = false,
   )
   :
   (
-    <Grid item xs={ 12 }>
+    <Grid item xs={ 12 } className={ className }>
       <Grid container spacing={ 16 }>
         { imageGallery.images.map((image) => (
           <Grid key={ image.uuid } item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 }>
@@ -51,21 +51,20 @@ const ImageGalleryView = ({imageGallery, classes, compact = false, edit = false,
             </Card>
           </Grid>
         )) }
-
-        <Grid item xs={ 12 }>
-          <Card className={ classes.root }>
-            <CardContent>
-              <Properties>
-                <PropertiesItem title="repository.admin.c.common.path">{ imageGallery.folder }</PropertiesItem>
-                <PropertiesItem title="repository.admin.c.common.registered"><PrettyDate value={ new Date(imageGallery.createdDate) }/></PropertiesItem>
-                <PropertiesItem title="common:label.lastModified"><PrettyDate value={ new Date(imageGallery.lastModifiedDate) }/></PropertiesItem>
-              </Properties>
-            </CardContent>
-          </Card>
-        </Grid>
       </Grid>
     </Grid>
   );
+  // <Grid item xs={ 12 }>
+  //   <Card className={ classes.root }>
+  //     <CardContent>
+  //       <Properties>
+  //         <PropertiesItem title="repository.admin.c.common.path">{ imageGallery.folder }</PropertiesItem>
+  //         <PropertiesItem title="repository.admin.c.common.registered"><PrettyDate value={ new Date(imageGallery.createdDate) }/></PropertiesItem>
+  //         <PropertiesItem title="common:label.lastModified"><PrettyDate value={ new Date(imageGallery.lastModifiedDate) }/></PropertiesItem>
+  //       </Properties>
+  //     </CardContent>
+  //   </Card>
+  // </Grid>
 };
 
 export default withStyles(style)(ImageGalleryView);

src/ui/layout/PageLayout.tsx

@@ -41,13 +41,14 @@ const styles = (theme) => ({
     paddingRight: '1em',
   },
   mainSection: {
-
+    marginBottom: '1em',
   },
   mainSectionTitle: {
     // color: 'Blue',
   },
   section: {
     height: '100%',
+    marginBottom: '1em',
   },
   sectionTitle: {
     fontSize: '1.3rem',