Commit 04f3f75e authored by Viacheslav Pavlov's avatar Viacheslav Pavlov Committed by Matija Obreza
Browse files

Standardized page layouts

- Added padding top to all pages, added `!important` for all `p-*` and `m-*` classes
- Container implementation changed to css variant
- GridLayout renamed to GridContainer, fixed ContentHeaderWithButton paddings
- added correct layouts to all browse pages
- removed unnecessary classNames
- Custom padding/margins used
- fixed GridLayout paddings, fixed spacing on some browse pages
parent 8e930da5
...@@ -77,7 +77,7 @@ class BrowsePage extends BrowsePageTemplate<Accession> { ...@@ -77,7 +77,7 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
filterObj={ paged && paged.filter || {} } filterObj={ paged && paged.filter || {} }
onSubmit={ this.myApplyFilters } onSubmit={ this.myApplyFilters }
/> />
<PageContents> <PageContents className="pt-1rem container-spacing-horizontal">
{ ! paged ? <Loading /> : { ! paged ? <Loading /> :
<PagedLoader <PagedLoader
paged={ paged } paged={ paged }
......
...@@ -28,7 +28,7 @@ import CropChips from 'crop/ui/c/CropChips'; ...@@ -28,7 +28,7 @@ import CropChips from 'crop/ui/c/CropChips';
import LocationMap from 'ui/common/LocationMap'; import LocationMap from 'ui/common/LocationMap';
import {CountryLink, DatasetLink, InstituteLink, SubsetLink} from 'ui/genesys/Links'; import {CountryLink, DatasetLink, InstituteLink, SubsetLink} from 'ui/genesys/Links';
import PropertiesCard from 'ui/common/PropertiesCard'; import PropertiesCard from 'ui/common/PropertiesCard';
import GridLayout from 'ui/layout/GridLayout'; import GridContainer from 'ui/layout/GridContainer';
import McpdDate from 'ui/common/time/McpdDate'; import McpdDate from 'ui/common/time/McpdDate';
import PdciTable from './c/PdciTable'; import PdciTable from './c/PdciTable';
import ImageGalleryView from 'repository/ui/c/ImageGalleryView'; import ImageGalleryView from 'repository/ui/c/ImageGalleryView';
...@@ -114,7 +114,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> { ...@@ -114,7 +114,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
{ error && <div>{ JSON.stringify(error) }</div> } { error && <div>{ JSON.stringify(error) }</div> }
{ accession && { accession &&
<PageContents> <PageContents className="pt-1rem">
<MainSection title={ <MainSection title={
<div> <div>
{ t('accessions.common.modelName') }: { accession.accessionNumber } { t('accessions.common.modelName') }: { accession.accessionNumber }
...@@ -265,7 +265,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> { ...@@ -265,7 +265,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
</Properties> </Properties>
</PageSection> </PageSection>
<GridLayout> <GridContainer className="mb-15">
{ datasets && datasets.length > 0 && { datasets && datasets.length > 0 &&
<PropertiesCard <PropertiesCard
small small
...@@ -282,7 +282,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> { ...@@ -282,7 +282,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
propertiesList={ subsets.map((subset) => ({ title: t('subset.common.modelName'), value: <SubsetLink to={ subset } /> })) } propertiesList={ subsets.map((subset) => ({ title: t('subset.common.modelName'), value: <SubsetLink to={ subset } /> })) }
/> />
} }
</GridLayout> </GridContainer>
</PageContents> </PageContents>
} }
</div> </div>
......
...@@ -17,7 +17,7 @@ import AccessionOverview from 'model/accession/AccessionOverview'; ...@@ -17,7 +17,7 @@ import AccessionOverview from 'model/accession/AccessionOverview';
// UI // UI
import PageLayout, { PageContents } from 'ui/layout/PageLayout'; import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import GridLayout from 'ui/layout/GridLayout'; import GridContainer from 'ui/layout/GridContainer';
import ContentHeader from 'ui/common/heading/ContentHeader'; import ContentHeader from 'ui/common/heading/ContentHeader';
import Loading from 'ui/common/Loading'; import Loading from 'ui/common/Loading';
import Tabs, { Tab } from 'ui/common/Tabs'; import Tabs, { Tab } from 'ui/common/Tabs';
...@@ -144,9 +144,9 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> { ...@@ -144,9 +144,9 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
onSubmit={ applyOverviewFilters } onSubmit={ applyOverviewFilters }
/> />
{ ! overview ? <Loading /> : { ! overview ? <Loading /> :
<div style={ {display: 'flex', marginTop: '1em', marginBottom: '1em'} }> <div>
<PageContents> <PageContents className="pt-1rem">
<GridLayout> <GridContainer>
{ overviewsTerms && overviewsTerms.get('institute.code') && overviewsTerms.get('institute.code').length > 2 && { overviewsTerms && overviewsTerms.get('institute.code') && overviewsTerms.get('institute.code').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('institute.code').map((term) => ({title: term.term, value: filterByTerm('holder.code', term, term.count) })) } title={ t(`accessions.common.overview.institute code`) } small/> <PropertiesCard propertiesList={ overviewsTerms.get('institute.code').map((term) => ({title: term.term, value: filterByTerm('holder.code', term, term.count) })) } title={ t(`accessions.common.overview.institute code`) } small/>
} }
...@@ -193,7 +193,7 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> { ...@@ -193,7 +193,7 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
{ overviewsTerms && overviewsTerms.get('sgsv') && overviewsTerms.get('sgsv').length > 2 && { overviewsTerms && overviewsTerms.get('sgsv') && overviewsTerms.get('sgsv').length > 2 &&
<PropertiesCard propertiesList={ overviewsTerms.get('sgsv').map((term) => ({title: term.term === '1' ? 'Yes' : 'No', value: filterByTerm('sgsv', term, term.count) })) } title={ t(`accessions.common.overview.sgsv`) } small/> <PropertiesCard propertiesList={ overviewsTerms.get('sgsv').map((term) => ({title: term.term === '1' ? 'Yes' : 'No', value: filterByTerm('sgsv', term, term.count) })) } title={ t(`accessions.common.overview.sgsv`) } small/>
} }
</GridLayout> </GridContainer>
</PageContents> </PageContents>
</div> </div>
} }
......
...@@ -13,7 +13,7 @@ import CropDetails from 'model/genesys/CropDetails'; ...@@ -13,7 +13,7 @@ import CropDetails from 'model/genesys/CropDetails';
import PageLayout, { PageContents } from 'ui/layout/PageLayout'; import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader'; import ContentHeader from 'ui/common/heading/ContentHeader';
import CropCard from 'crop/ui/c/CropCard'; import CropCard from 'crop/ui/c/CropCard';
import GridLayout from 'ui/layout/GridLayout'; import GridContainer from 'ui/layout/GridContainer';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton'; import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import ActionButton from 'ui/common/buttons/ActionButton'; import ActionButton from 'ui/common/buttons/ActionButton';
import Authorize from 'ui/common/authorized/Authorize'; import Authorize from 'ui/common/authorized/Authorize';
...@@ -38,12 +38,16 @@ class BrowsePage extends React.Component<IBrowsePageProps> { ...@@ -38,12 +38,16 @@ class BrowsePage extends React.Component<IBrowsePageProps> {
<PageLayout> <PageLayout>
<ContentHeader title={ t('crop.public.p.browse.title') } subTitle={ t('crop.public.p.browse.subTitle') } /> <ContentHeader title={ t('crop.public.p.browse.title') } subTitle={ t('crop.public.p.browse.subTitle') } />
<Authorize role="ROLE_ADMINISTRATOR"> <Authorize role="ROLE_ADMINISTRATOR">
<ContentHeaderWithButton buttons={ <ActionButton title={ t('crop.public.p.browse.createCrop') } action={ this.addNewCropHandle } style={ {margin: '4px', padding: '0'} }/> }/> <ContentHeaderWithButton buttons={
<div>
<ActionButton title={ t('crop.public.p.browse.createCrop') } action={ this.addNewCropHandle }/>
</div>
}/>
</Authorize> </Authorize>
<PageContents> <PageContents className="pt-1rem">
<GridLayout style={ { width: 'auto', margin: '8px 6px' } }> <GridContainer>
{ crops && crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact />) } { crops && crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact />) }
</GridLayout> </GridContainer>
</PageContents> </PageContents>
</PageLayout> </PageLayout>
); );
......
...@@ -94,7 +94,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -94,7 +94,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PageLayout withFooter> <PageLayout withFooter>
<ContentHeader title={ t('crop.public.p.display.title') } /> <ContentHeader title={ t('crop.public.p.display.title') } />
{ !crop || crop.shortName !== shortName ? (<Loading/>) : { !crop || crop.shortName !== shortName ? (<Loading/>) :
<PageContents> <PageContents className="pt-1rem container-spacing-horizontal pb-1rem">
{ cropDetails.blurb && cropDetails.blurb.body && { cropDetails.blurb && cropDetails.blurb.body &&
<Section title={ shortName }> <Section title={ shortName }>
<div className={ classes.cropBlurb } dangerouslySetInnerHTML={ {__html: cropDetails.blurb.body} }/> <div className={ classes.cropBlurb } dangerouslySetInnerHTML={ {__html: cropDetails.blurb.body} }/>
......
...@@ -76,7 +76,7 @@ class CropEditPage extends React.Component<ICropEditPageProps, any> { ...@@ -76,7 +76,7 @@ class CropEditPage extends React.Component<ICropEditPageProps, any> {
return ( return (
<PageLayout> <PageLayout>
<PageContents> <PageContents className="pt-1rem">
<Grid item xs={ 12 }> <Grid item xs={ 12 }>
<Paper className="p-20 mb-10"> <Paper className="p-20 mb-10">
<CropForm initialValues={ crop } onSubmit={ this.onSave } onDelete={ this.onDelete } cropNames={ cropNames } t={ t }/> <CropForm initialValues={ crop } onSubmit={ this.onSave } onDelete={ this.onDelete } cropNames={ cropNames } t={ t }/>
......
...@@ -81,7 +81,7 @@ class CountryDisplayPage extends React.Component<ICountryDisplayPageProps> { ...@@ -81,7 +81,7 @@ class CountryDisplayPage extends React.Component<ICountryDisplayPageProps> {
<ContentHeader title={ `${t('geo.public.p.countryList.countryProfile', { code: isoCode }) }` }/> <ContentHeader title={ `${t('geo.public.p.countryList.countryProfile', { code: isoCode }) }` }/>
<div> <div>
{ stillLoading ? <Loading /> : { stillLoading ? <Loading /> :
<PageContents> <PageContents className="pt1rem">
<MainSection title={ `${details.name}` }> <MainSection title={ `${details.name}` }>
<Properties> <Properties>
<PropertiesItem title={ t('geo.public.p.countryList.moreInformation') }> <PropertiesItem title={ t('geo.public.p.countryList.moreInformation') }>
......
...@@ -12,7 +12,7 @@ import {loadCountries} from 'geo/actions/public'; ...@@ -12,7 +12,7 @@ import {loadCountries} from 'geo/actions/public';
// UI // UI
import PageLayout, { PageContents } from 'ui/layout/PageLayout'; import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader'; import ContentHeader from 'ui/common/heading/ContentHeader';
import GridLayout from 'ui/layout/GridLayout'; import GridContainer from 'ui/layout/GridContainer';
import CountryCard from 'geo/ui/c/CountryCard'; import CountryCard from 'geo/ui/c/CountryCard';
import Loading from 'ui/common/Loading'; import Loading from 'ui/common/Loading';
...@@ -50,15 +50,15 @@ class CountryListPage extends React.Component<ICountryListPageProps> { ...@@ -50,15 +50,15 @@ class CountryListPage extends React.Component<ICountryListPageProps> {
title={ t(`geo.public.p.countryList.title`) } title={ t(`geo.public.p.countryList.title`) }
subTitle={ t(`geo.public.p.countryList.subTitle`) } subTitle={ t(`geo.public.p.countryList.subTitle`) }
/> />
<PageContents> <PageContents className="pt-1rem">
{ stillLoading ? <Loading /> : { stillLoading ? <Loading /> :
<GridLayout style={ { width: 'auto', margin: '8px 6px' } }> <GridContainer>
{ {
countries && countries.sort((a, b) => a.name.localeCompare(b.name)).map((country: Country) => ( countries && countries.sort((a, b) => a.name.localeCompare(b.name)).map((country: Country) => (
<CountryCard key={ country.name } country={ country }/> <CountryCard key={ country.name } country={ country }/>
)) ))
} }
</GridLayout> </GridContainer>
} }
</PageContents> </PageContents>
</PageLayout> </PageLayout>
......
...@@ -16,7 +16,7 @@ import navigateTo from 'actions/navigation'; ...@@ -16,7 +16,7 @@ import navigateTo from 'actions/navigation';
import PageLayout, { PageContents } from 'ui/layout/PageLayout'; import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader'; import ContentHeader from 'ui/common/heading/ContentHeader';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton'; import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import GridLayout from 'ui/layout/GridLayout'; import GridContainer from 'ui/layout/GridContainer';
import Loading from 'ui/common/Loading'; import Loading from 'ui/common/Loading';
import GeoRegionCard from 'geo/ui/c/GeoRegionCard'; import GeoRegionCard from 'geo/ui/c/GeoRegionCard';
import CountryCard from 'geo/ui/c/CountryCard'; import CountryCard from 'geo/ui/c/CountryCard';
...@@ -73,8 +73,8 @@ class RegionDisplayPage extends React.Component<IRegionDisplayPageProps> { ...@@ -73,8 +73,8 @@ class RegionDisplayPage extends React.Component<IRegionDisplayPageProps> {
</span> </span>
} /> } />
<PageContents> <PageContents className="pt-1rem">
<GridLayout style={ { width: 'auto', margin: '8px 6px' } }> <GridContainer>
{ {
details.subRegions && details.subRegions.sort((a, b) => a.name.localeCompare(b.name)).map((region: GeoRegion) => ( details.subRegions && details.subRegions.sort((a, b) => a.name.localeCompare(b.name)).map((region: GeoRegion) => (
<GeoRegionCard key={ region.name } region={ region }/> <GeoRegionCard key={ region.name } region={ region }/>
...@@ -85,7 +85,7 @@ class RegionDisplayPage extends React.Component<IRegionDisplayPageProps> { ...@@ -85,7 +85,7 @@ class RegionDisplayPage extends React.Component<IRegionDisplayPageProps> {
<CountryCard key={ country.name } country={ country }/> <CountryCard key={ country.name } country={ country }/>
)) ))
} }
</GridLayout> </GridContainer>
</PageContents> </PageContents>
</div> </div>
} }
......
...@@ -12,7 +12,7 @@ import {loadRegions} from 'geo/actions/public'; ...@@ -12,7 +12,7 @@ import {loadRegions} from 'geo/actions/public';
// UI // UI
import PageLayout, { PageContents } from 'ui/layout/PageLayout'; import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader'; import ContentHeader from 'ui/common/heading/ContentHeader';
import GridLayout from 'ui/layout/GridLayout'; import GridContainer from 'ui/layout/GridContainer';
import Loading from 'ui/common/Loading'; import Loading from 'ui/common/Loading';
import GeoRegionCard from 'geo/ui/c/GeoRegionCard'; import GeoRegionCard from 'geo/ui/c/GeoRegionCard';
...@@ -50,15 +50,15 @@ class RegionListPage extends React.Component<IRegionListPageProps> { ...@@ -50,15 +50,15 @@ class RegionListPage extends React.Component<IRegionListPageProps> {
title={ t(`geo.public.p.regionList.title`) } title={ t(`geo.public.p.regionList.title`) }
subTitle={ t(`geo.public.p.regionList.subTitle`) } subTitle={ t(`geo.public.p.regionList.subTitle`) }
/> />
<PageContents> <PageContents className="pt-1rem">
{ stillLoading ? <Loading /> : { stillLoading ? <Loading /> :
<GridLayout style={ { width: 'auto', margin: '8px 6px' } }> <GridContainer>
{ {
regions && regions.sort((a, b) => a.isoCode.localeCompare(b.isoCode)).map((region: GeoRegion) => ( regions && regions.sort((a, b) => a.isoCode.localeCompare(b.isoCode)).map((region: GeoRegion) => (
<GeoRegionCard key={ region.name } region={ region }/> <GeoRegionCard key={ region.name } region={ region }/>
)) ))
} }
</GridLayout> </GridContainer>
} }
</PageContents> </PageContents>
</PageLayout> </PageLayout>
......
...@@ -22,7 +22,6 @@ import PaginationComponent from 'ui/common/pagination'; ...@@ -22,7 +22,6 @@ import PaginationComponent from 'ui/common/pagination';
import InstituteCard from 'institutes/ui/с/InstituteCard'; import InstituteCard from 'institutes/ui/с/InstituteCard';
import InstituteFilters from './с/Filters'; import InstituteFilters from './с/Filters';
class BrowsePage extends BrowsePageTemplate<FaoInstitute> { class BrowsePage extends BrowsePageTemplate<FaoInstitute> {
protected static needs = [ protected static needs = [
({ search, params: { filterCode } }) => { ({ search, params: { filterCode } }) => {
...@@ -62,7 +61,7 @@ class BrowsePage extends BrowsePageTemplate<FaoInstitute> { ...@@ -62,7 +61,7 @@ class BrowsePage extends BrowsePageTemplate<FaoInstitute> {
filterObj={ paged && paged.filter || {} } filterObj={ paged && paged.filter || {} }
onSubmit={ this.myApplyFilters } onSubmit={ this.myApplyFilters }
/> />
<PageContents> <PageContents className="pt-1rem container-spacing-horizontal">
{ ! paged ? <Loading /> : { ! paged ? <Loading /> :
<PagedLoader <PagedLoader
paged={ paged } paged={ paged }
......
...@@ -13,7 +13,7 @@ import FaoInstituteDetails from 'model/genesys/InstituteDetails'; ...@@ -13,7 +13,7 @@ import FaoInstituteDetails from 'model/genesys/InstituteDetails';
// UI // UI
import PageLayout, { MainSection, PageContents, PageSection } from 'ui/layout/PageLayout'; import PageLayout, { MainSection, PageContents, PageSection } from 'ui/layout/PageLayout';
import GridLayout from 'ui/layout/GridLayout'; import GridContainer from 'ui/layout/GridContainer';
import PropertiesCard from 'ui/common/PropertiesCard.tsx'; import PropertiesCard from 'ui/common/PropertiesCard.tsx';
import ContentHeader from 'ui/common/heading/ContentHeader'; import ContentHeader from 'ui/common/heading/ContentHeader';
import LocationMap from 'ui/common/LocationMap'; import LocationMap from 'ui/common/LocationMap';
...@@ -30,6 +30,7 @@ import BarChart from 'ui/common/bar-chart'; ...@@ -30,6 +30,7 @@ import BarChart from 'ui/common/bar-chart';
interface IDisplayPageProps extends React.ClassAttributes<any> { interface IDisplayPageProps extends React.ClassAttributes<any> {
t: any; t: any;
classes?: any;
width: Breakpoint; width: Breakpoint;
code: string; code: string;
institute: FaoInstituteDetails; institute: FaoInstituteDetails;
...@@ -39,6 +40,7 @@ interface IDisplayPageProps extends React.ClassAttributes<any> { ...@@ -39,6 +40,7 @@ interface IDisplayPageProps extends React.ClassAttributes<any> {
} }
const mobile = ['sm', 'xs'] as Breakpoint[]; const mobile = ['sm', 'xs'] as Breakpoint[];
class DisplayPage extends React.Component<IDisplayPageProps, any> { class DisplayPage extends React.Component<IDisplayPageProps, any> {
protected static needs = [ protected static needs = [
...@@ -110,7 +112,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -110,7 +112,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
{ error && <div>{ JSON.stringify(error) }</div> } { error && <div>{ JSON.stringify(error) }</div> }
{ institute && { institute &&
<PageContents> <PageContents className="pt-1rem">
<MainSection title={ `${institute.details.fullName}` }> <MainSection title={ `${institute.details.fullName}` }>
<Properties> <Properties>
<PropertiesItem title={ t('institutes.common.instituteCode') }>{ institute.details.code }</PropertiesItem> <PropertiesItem title={ t('institutes.common.instituteCode') }>{ institute.details.code }</PropertiesItem>
...@@ -147,7 +149,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -147,7 +149,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</PageSection> </PageSection>
} }
<GridLayout> <GridContainer className="mb-15">
{ cropShortNameOverview && cropShortNameOverview.terms && cropShortNameOverview.terms.length > 0 && { cropShortNameOverview && cropShortNameOverview.terms && cropShortNameOverview.terms.length > 0 &&
<PropertiesCard <PropertiesCard
title={ t('institutes.public.p.display.representedCrops') } title={ t('institutes.public.p.display.representedCrops') }
...@@ -213,7 +215,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -213,7 +215,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</PropertiesCard> </PropertiesCard>
} }
</GridLayout> </GridContainer>
{ institute.lastUpdates && institute.lastUpdates.length > 0 && { institute.lastUpdates && institute.lastUpdates.length > 0 &&
<PageSection title={ t('institutes.public.p.display.lastUpdates') }> <PageSection title={ t('institutes.public.p.display.lastUpdates') }>
......
...@@ -73,23 +73,35 @@ class Dashboard extends React.Component<IDashboardProps, any> { ...@@ -73,23 +73,35 @@ class Dashboard extends React.Component<IDashboardProps, any> {
<DimensionDialog/> <DimensionDialog/>
<ExecutionDialog/> <ExecutionDialog/>
</div> }/> </div> }/>
<PageContents style={ {width: 'calc(100% - 2em)'} }> <PageContents className="pt-1rem">
<Grid container spacing={ 0 }> <Grid container spacing={ 0 }>
<Grid item xs={ 12 }> <Grid item xs={ 12 }>
{ stillLoading && <Loading /> } { stillLoading && <Loading /> }
<h5>{ t(`kpi.admin.p.dashboard.KPIExecutions`) }</h5> <h5>{ t(`kpi.admin.p.dashboard.KPIExecutions`) }</h5>
{ execs && execs.content && execs.content.map((exec, i) => ( { execs && execs.content && execs.content.length > 0 &&
<ExecutionCard key={ exec.id } index={ i } execution={ exec } compact style={ {marginBottom: '8px'} }/> <div className="container-spacing-horizontal">
)) } { execs.content.map((exec, i) => (
<ExecutionCard key={ exec.id } index={ i } execution={ exec } compact/>
)) }
</div>
}
<h5>{ t(`kpi.admin.p.dashboard.KPIParameters`) }</h5> <h5>{ t(`kpi.admin.p.dashboard.KPIParameters`) }</h5>
{ params && params.content && params.content.map((param, i) => ( { params && params.content && params.content.length > 0 &&
<ParameterCard key={ param.id } parameter={ param } index={ i } style={ {marginBottom: '8px'} }/> <div className="container-spacing-horizontal">
)) } { params.content.map((param, i) => (
<ParameterCard key={ param.id } parameter={ param } index={ i } style={ { marginBottom: '8px' } }/>
)) }
</div>
}
<h5>{ t(`kpi.admin.p.dashboard.KPIDimensions`) }</h5> <h5>{ t(`kpi.admin.p.dashboard.KPIDimensions`) }</h5>
{ dims && dims.content && dims.content.map((dim, i) => ( { dims && dims.content && dims.content.length > 0 &&
<DimensionCard key={ dim.id } dimension={ dim } index={ i } style={ {marginBottom: '8px'} }/> <div className="container-spacing-horizontal">
)) } { dims.content.map((dim, i) => (
<DimensionCard key={ dim.id } dimension={ dim } index={ i } style={ { marginBottom: '8px' } }/>
)) }
</div>
}
</Grid> </Grid>
</Grid> </Grid>
</PageContents> </PageContents>
......
...@@ -106,7 +106,7 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> { ...@@ -106,7 +106,7 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
<Button variant="contained" onClick={ this.execute }>{ t('kpi.admin.p.executionDisplay.execute') }</Button> <Button variant="contained" onClick={ this.execute }>{ t('kpi.admin.p.executionDisplay.execute') }</Button>
</div> </div>
}/> }/>
<PageContents> <PageContents className="pt-1rem">
<Grid container spacing={ 8 }> <Grid container spacing={ 8 }>
<Grid item sm={ 12 }> <Grid item sm={ 12 }>
<PageSection title={ execution.title }> <PageSection title={ execution.title }>
......
...@@ -4,7 +4,7 @@ import {connect} from 'react-redux'; ...@@ -4,7 +4,7 @@ import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'; import {bindActionCreators} from 'redux';
import AccessionCard from 'accessions/ui/c/AccessionCard'; import AccessionCard from 'accessions/ui/c/AccessionCard';
import PageLayout from 'ui/layout/PageLayout'; import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import AccessionService from 'service/genesys/AccessionService'; import AccessionService from 'service/genesys/AccessionService';
import ContentHeader from 'ui/common/heading/ContentHeader'; import ContentHeader from 'ui/common/heading/ContentHeader';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton'; import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
...@@ -17,6 +17,7 @@ interface IMyListPageProps extends React.ClassAttributes<any> { ...@@ -17,6 +17,7 @@ interface IMyListPageProps extends React.ClassAttributes<any> {
navigateTo: any; navigateTo: any;
t: any; t: any;
clearMyList: () => void; clearMyList: () => void;
classes: any;
} }
class MyListPage extends React.Component<IMyListPageProps> { class MyListPage extends React.Component<IMyListPageProps> {
...@@ -79,7 +80,9 @@ class MyListPage extends React.Component<IMyListPageProps> { ...@@ -79,7 +80,9 @@ class MyListPage extends React.Component<IMyListPageProps> {
</div> </div>
} }
/> />
{ accessions.map((accession, index) => <div key={ index } className="pr-20 pb-10 pt-10 pl-20"><AccessionCard index={ index } accession={ accession }/></div>) } <PageContents className={ `container-spacing-horizontal pt-1rem` }>
{ accessions.map((accession, index) => <AccessionCard key={ index } index={ index } accession={ accession }/>) }
</PageContents>
</div> </div>
) : ( ) : (
<ContentHeaderWithButton title={ t('list.public.p.browse.noAccessions') }/> <ContentHeaderWithButton title={ t('list.public.p.browse.noAccessions') }/>
......
...@@ -59,7 +59,7 @@ class EditFilePage extends React.Component<IEditPageProps, any> { ...@@ -59,7 +59,7 @@ class EditFilePage extends React.Component<IEditPageProps, any> {
return file === null ? (<Loading/>) : ( return file === null ? (<Loading/>) : (
<div> <div>
<ContentHeaderWithButton title={ t(`repository.admin.p.editFile.formTitle`) } /> <ContentHeaderWithButton title={ t(`repository.admin.p.editFile.formTitle`) } />
<PageContents> <PageContents className="pt-1rem">
<Card> <Card>
<CardContent> <CardContent>
<FileForm initialValues={ file } onCancel={ this.handleCancel } onSubmit={ this.handleSubmit }/> <FileForm initialValues={ file } onCancel={ this.handleCancel } onSubmit={ this.handleSubmit }/>
......
...@@ -113,7 +113,7 @@ class ImageGalleryPage extends React.Component<IRepositoryBrowserProps, any> { ...@@ -113,7 +113,7 @@ class ImageGalleryPage extends React.Component<IRepositoryBrowserProps, any> {
{ gallery && gallery._permissions.manage && <Permissions clazz={ ImageGallery.clazz } id={ gallery.id } /> } { gallery && gallery._permissions.manage && <Permissions clazz={ ImageGallery.clazz } id={ gallery.id } /> }
</span> </span>
} /> } />
<PageContents> <PageContents className="pt-1rem">
<ImageGalleryView imageGallery={ gallery } /> <ImageGalleryView imageGallery={ gallery } />
<div>