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> {
filterObj={ paged && paged.filter || {} }
onSubmit={ this.myApplyFilters }
/>
<PageContents>
<PageContents className="pt-1rem container-spacing-horizontal">
{ ! paged ? <Loading /> :
<PagedLoader
paged={ paged }
......
......@@ -28,7 +28,7 @@ import CropChips from 'crop/ui/c/CropChips';
import LocationMap from 'ui/common/LocationMap';
import {CountryLink, DatasetLink, InstituteLink, SubsetLink} from 'ui/genesys/Links';
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 PdciTable from './c/PdciTable';
import ImageGalleryView from 'repository/ui/c/ImageGalleryView';
......@@ -114,7 +114,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
{ error && <div>{ JSON.stringify(error) }</div> }
{ accession &&
<PageContents>
<PageContents className="pt-1rem">
<MainSection title={
<div>
{ t('accessions.common.modelName') }: { accession.accessionNumber }
......@@ -265,7 +265,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
</Properties>
</PageSection>
<GridLayout>
<GridContainer className="mb-15">
{ datasets && datasets.length > 0 &&
<PropertiesCard
small
......@@ -282,7 +282,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
propertiesList={ subsets.map((subset) => ({ title: t('subset.common.modelName'), value: <SubsetLink to={ subset } /> })) }
/>
}
</GridLayout>
</GridContainer>
</PageContents>
}
</div>
......
......@@ -17,7 +17,7 @@ import AccessionOverview from 'model/accession/AccessionOverview';
// UI
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 Loading from 'ui/common/Loading';
import Tabs, { Tab } from 'ui/common/Tabs';
......@@ -144,9 +144,9 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
onSubmit={ applyOverviewFilters }
/>
{ ! overview ? <Loading /> :
<div style={ {display: 'flex', marginTop: '1em', marginBottom: '1em'} }>
<PageContents>
<GridLayout>
<div>
<PageContents className="pt-1rem">
<GridContainer>
{ 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/>
}
......@@ -193,7 +193,7 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
{ 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/>
}
</GridLayout>
</GridContainer>
</PageContents>
</div>
}
......
......@@ -13,7 +13,7 @@ import CropDetails from 'model/genesys/CropDetails';
import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader';
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 ActionButton from 'ui/common/buttons/ActionButton';
import Authorize from 'ui/common/authorized/Authorize';
......@@ -38,12 +38,16 @@ class BrowsePage extends React.Component<IBrowsePageProps> {
<PageLayout>
<ContentHeader title={ t('crop.public.p.browse.title') } subTitle={ t('crop.public.p.browse.subTitle') } />
<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>
<PageContents>
<GridLayout style={ { width: 'auto', margin: '8px 6px' } }>
<PageContents className="pt-1rem">
<GridContainer>
{ crops && crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact />) }
</GridLayout>
</GridContainer>
</PageContents>
</PageLayout>
);
......
......@@ -94,7 +94,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PageLayout withFooter>
<ContentHeader title={ t('crop.public.p.display.title') } />
{ !crop || crop.shortName !== shortName ? (<Loading/>) :
<PageContents>
<PageContents className="pt-1rem container-spacing-horizontal pb-1rem">
{ cropDetails.blurb && cropDetails.blurb.body &&
<Section title={ shortName }>
<div className={ classes.cropBlurb } dangerouslySetInnerHTML={ {__html: cropDetails.blurb.body} }/>
......
......@@ -76,7 +76,7 @@ class CropEditPage extends React.Component<ICropEditPageProps, any> {
return (
<PageLayout>
<PageContents>
<PageContents className="pt-1rem">
<Grid item xs={ 12 }>
<Paper className="p-20 mb-10">
<CropForm initialValues={ crop } onSubmit={ this.onSave } onDelete={ this.onDelete } cropNames={ cropNames } t={ t }/>
......
......@@ -81,7 +81,7 @@ class CountryDisplayPage extends React.Component<ICountryDisplayPageProps> {
<ContentHeader title={ `${t('geo.public.p.countryList.countryProfile', { code: isoCode }) }` }/>
<div>
{ stillLoading ? <Loading /> :
<PageContents>
<PageContents className="pt1rem">
<MainSection title={ `${details.name}` }>
<Properties>
<PropertiesItem title={ t('geo.public.p.countryList.moreInformation') }>
......
......@@ -12,7 +12,7 @@ import {loadCountries} from 'geo/actions/public';
// UI
import PageLayout, { PageContents } from 'ui/layout/PageLayout';
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 Loading from 'ui/common/Loading';
......@@ -50,15 +50,15 @@ class CountryListPage extends React.Component<ICountryListPageProps> {
title={ t(`geo.public.p.countryList.title`) }
subTitle={ t(`geo.public.p.countryList.subTitle`) }
/>
<PageContents>
<PageContents className="pt-1rem">
{ stillLoading ? <Loading /> :
<GridLayout style={ { width: 'auto', margin: '8px 6px' } }>
<GridContainer>
{
countries && countries.sort((a, b) => a.name.localeCompare(b.name)).map((country: Country) => (
<CountryCard key={ country.name } country={ country }/>
))
}
</GridLayout>
</GridContainer>
}
</PageContents>
</PageLayout>
......
......@@ -16,7 +16,7 @@ import navigateTo from 'actions/navigation';
import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import ContentHeader from 'ui/common/heading/ContentHeader';
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 GeoRegionCard from 'geo/ui/c/GeoRegionCard';
import CountryCard from 'geo/ui/c/CountryCard';
......@@ -73,8 +73,8 @@ class RegionDisplayPage extends React.Component<IRegionDisplayPageProps> {
</span>
} />
<PageContents>
<GridLayout style={ { width: 'auto', margin: '8px 6px' } }>
<PageContents className="pt-1rem">
<GridContainer>
{
details.subRegions && details.subRegions.sort((a, b) => a.name.localeCompare(b.name)).map((region: GeoRegion) => (
<GeoRegionCard key={ region.name } region={ region }/>
......@@ -85,7 +85,7 @@ class RegionDisplayPage extends React.Component<IRegionDisplayPageProps> {
<CountryCard key={ country.name } country={ country }/>
))
}
</GridLayout>
</GridContainer>
</PageContents>
</div>
}
......
......@@ -12,7 +12,7 @@ import {loadRegions} from 'geo/actions/public';
// UI
import PageLayout, { PageContents } from 'ui/layout/PageLayout';
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 GeoRegionCard from 'geo/ui/c/GeoRegionCard';
......@@ -50,15 +50,15 @@ class RegionListPage extends React.Component<IRegionListPageProps> {
title={ t(`geo.public.p.regionList.title`) }
subTitle={ t(`geo.public.p.regionList.subTitle`) }
/>
<PageContents>
<PageContents className="pt-1rem">
{ stillLoading ? <Loading /> :
<GridLayout style={ { width: 'auto', margin: '8px 6px' } }>
<GridContainer>
{
regions && regions.sort((a, b) => a.isoCode.localeCompare(b.isoCode)).map((region: GeoRegion) => (
<GeoRegionCard key={ region.name } region={ region }/>
))
}
</GridLayout>
</GridContainer>
}
</PageContents>
</PageLayout>
......
......@@ -22,7 +22,6 @@ import PaginationComponent from 'ui/common/pagination';
import InstituteCard from 'institutes/ui/с/InstituteCard';
import InstituteFilters from './с/Filters';
class BrowsePage extends BrowsePageTemplate<FaoInstitute> {
protected static needs = [
({ search, params: { filterCode } }) => {
......@@ -62,7 +61,7 @@ class BrowsePage extends BrowsePageTemplate<FaoInstitute> {
filterObj={ paged && paged.filter || {} }
onSubmit={ this.myApplyFilters }
/>
<PageContents>
<PageContents className="pt-1rem container-spacing-horizontal">
{ ! paged ? <Loading /> :
<PagedLoader
paged={ paged }
......
......@@ -13,7 +13,7 @@ import FaoInstituteDetails from 'model/genesys/InstituteDetails';
// UI
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 ContentHeader from 'ui/common/heading/ContentHeader';
import LocationMap from 'ui/common/LocationMap';
......@@ -30,6 +30,7 @@ import BarChart from 'ui/common/bar-chart';
interface IDisplayPageProps extends React.ClassAttributes<any> {
t: any;
classes?: any;
width: Breakpoint;
code: string;
institute: FaoInstituteDetails;
......@@ -39,6 +40,7 @@ interface IDisplayPageProps extends React.ClassAttributes<any> {
}
const mobile = ['sm', 'xs'] as Breakpoint[];
class DisplayPage extends React.Component<IDisplayPageProps, any> {
protected static needs = [
......@@ -110,7 +112,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
{ error && <div>{ JSON.stringify(error) }</div> }
{ institute &&
<PageContents>
<PageContents className="pt-1rem">
<MainSection title={ `${institute.details.fullName}` }>
<Properties>
<PropertiesItem title={ t('institutes.common.instituteCode') }>{ institute.details.code }</PropertiesItem>
......@@ -147,7 +149,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</PageSection>
}
<GridLayout>
<GridContainer className="mb-15">
{ cropShortNameOverview && cropShortNameOverview.terms && cropShortNameOverview.terms.length > 0 &&
<PropertiesCard
title={ t('institutes.public.p.display.representedCrops') }
......@@ -213,7 +215,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</PropertiesCard>
}
</GridLayout>
</GridContainer>
{ institute.lastUpdates && institute.lastUpdates.length > 0 &&
<PageSection title={ t('institutes.public.p.display.lastUpdates') }>
......
......@@ -73,23 +73,35 @@ class Dashboard extends React.Component<IDashboardProps, any> {
<DimensionDialog/>
<ExecutionDialog/>
</div> }/>
<PageContents style={ {width: 'calc(100% - 2em)'} }>
<PageContents className="pt-1rem">
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
{ stillLoading && <Loading /> }
<h5>{ t(`kpi.admin.p.dashboard.KPIExecutions`) }</h5>
{ execs && execs.content && execs.content.map((exec, i) => (
<ExecutionCard key={ exec.id } index={ i } execution={ exec } compact style={ {marginBottom: '8px'} }/>
{ execs && execs.content && execs.content.length > 0 &&
<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>
{ params && params.content && params.content.map((param, i) => (
<ParameterCard key={ param.id } parameter={ param } index={ i } style={ {marginBottom: '8px'} }/>
{ params && params.content && params.content.length > 0 &&
<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>
{ dims && dims.content && dims.content.map((dim, i) => (
<DimensionCard key={ dim.id } dimension={ dim } index={ i } style={ {marginBottom: '8px'} }/>
{ dims && dims.content && dims.content.length > 0 &&
<div className="container-spacing-horizontal">
{ dims.content.map((dim, i) => (
<DimensionCard key={ dim.id } dimension={ dim } index={ i } style={ { marginBottom: '8px' } }/>
)) }
</div>
}
</Grid>
</Grid>
</PageContents>
......
......@@ -106,7 +106,7 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
<Button variant="contained" onClick={ this.execute }>{ t('kpi.admin.p.executionDisplay.execute') }</Button>
</div>
}/>
<PageContents>
<PageContents className="pt-1rem">
<Grid container spacing={ 8 }>
<Grid item sm={ 12 }>
<PageSection title={ execution.title }>
......
......@@ -4,7 +4,7 @@ import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
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 ContentHeader from 'ui/common/heading/ContentHeader';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
......@@ -17,6 +17,7 @@ interface IMyListPageProps extends React.ClassAttributes<any> {
navigateTo: any;
t: any;
clearMyList: () => void;
classes: any;
}
class MyListPage extends React.Component<IMyListPageProps> {
......@@ -79,7 +80,9 @@ class MyListPage extends React.Component<IMyListPageProps> {
</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>
) : (
<ContentHeaderWithButton title={ t('list.public.p.browse.noAccessions') }/>
......
......@@ -59,7 +59,7 @@ class EditFilePage extends React.Component<IEditPageProps, any> {
return file === null ? (<Loading/>) : (
<div>
<ContentHeaderWithButton title={ t(`repository.admin.p.editFile.formTitle`) } />
<PageContents>
<PageContents className="pt-1rem">
<Card>
<CardContent>
<FileForm initialValues={ file } onCancel={ this.handleCancel } onSubmit={ this.handleSubmit }/>
......
......@@ -113,7 +113,7 @@ class ImageGalleryPage extends React.Component<IRepositoryBrowserProps, any> {
{ gallery && gallery._permissions.manage && <Permissions clazz={ ImageGallery.clazz } id={ gallery.id } /> }
</span>
} />
<PageContents>
<PageContents className="pt-1rem">
<ImageGalleryView imageGallery={ gallery } />
<div>
<input type="file" onChange={ this.upload } />
......
......@@ -2,7 +2,6 @@ import * as React from 'react';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import { bindActionCreators } from 'redux';
import { withStyles } from '@material-ui/core/styles';
import { normalize } from 'path';
import { getFolder, uploadFile, deleteFolder, createGallery, removeFile } from 'repository/actions/admin';
......@@ -29,7 +28,6 @@ import CreateFolderDialog from './CreateFolderDialog';
import UpdateFolderDialog from './UpdateFolderDialog';
interface IRepositoryBrowserProps extends React.ClassAttributes<any> {
classes: any;
t?: any;
root: string;
......@@ -44,10 +42,6 @@ interface IRepositoryBrowserProps extends React.ClassAttributes<any> {
navigateTo: (path: string, qs?: any) => any;
}
const styles = (theme) => ({
});
class RepositoryBrowser extends React.Component<IRepositoryBrowserProps, any> {
protected static needs = [
......@@ -146,7 +140,7 @@ class RepositoryBrowser extends React.Component<IRepositoryBrowserProps, any> {
{ folder.folder && folder.folder._permissions.manage && <Permissions clazz={ RepositoryFolder.clazz } id={ folder.folder.id } /> }
</span>
} />
<PageContents>
<PageContents className={ `container-spacing-horizontal pt-1rem` }>
<div>
{ folder.folder && root !== `${folder.folder.path}/` && <FolderCard compact key="parent" folder={ parentFolder } /> }
{ folder.subFolders.map((subFolder) => <FolderCard compact key={ subFolder.uuid } folder={ subFolder } />) }
......@@ -183,4 +177,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
navigateTo,
}, dispatch);
export default translate()(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(RepositoryBrowser)));
export default translate()(connect(mapStateToProps, mapDispatchToProps)(RepositoryBrowser));
......@@ -17,7 +17,6 @@ import PagedLoader from 'ui/common/PagedLoader';
import RequestCard from 'requests/ui/admin/c/RequestCard';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
class BrowsePage extends BrowsePageTemplate<any> {
protected static needs = [
......@@ -32,7 +31,7 @@ class BrowsePage extends BrowsePageTemplate<any> {
}
public render() {
const { paged, t, loadMoreData } = this.props;
const { paged, t, loadMoreData} = this.props;
const renderRequest = (r: MaterialRequest, index: number) => {
return <RequestCard key={ r.uuid } index={ index } request={ r } />;
......@@ -41,7 +40,7 @@ class BrowsePage extends BrowsePageTemplate<any> {
return (
<div>
<ContentHeaderWithButton title={ t('requests.admin.p.browse.title', {totalElements: paged ? paged.totalElements : '-' }) }/>
<PageContents>
<PageContents className="pt-1rem container-spacing-horizontal">
{ ! paged ? <Loading /> :
<PagedLoader
paged={ paged }
......
......@@ -66,7 +66,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
}
/>
{ request.body &&
<PageContents>
<PageContents className="pt-1rem">
<MainSection title={ t('requests.admin.p.display.requestInformation') }>
<Properties>
<PropertiesItem title={ t('user.common.email') }>{ request.email }</PropertiesItem>
......
Markdown is supported
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