Skip to content
GitLab
Commit 46099f06 authored by Maxim Babichev's avatar Maxim Babichev Committed by Matija Obreza
Browse files

CSS: Font sizes and margins 



Signed-off-by: Matija Obreza's avatarMatija Obreza <matija.obreza@croptrust.org>
parent 8d866bb2
Hide whitespace changes
Inline Side-by-side
src/ui/catalog/Properties.tsx
View file @ 46099f06
......@@ -40,8 +40,8 @@ class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertie
const { title, classes, children } = this.props;
return (
<Grid container spacing={ 0 } className={ classes.propertiesRow }>
<Grid item xs={ 4 } md={ 3 } className="font-bold p-halfrem">{ title }</Grid>
<Grid item xs={ 8 } md={ 9 } className={ `${classes.propertiesValue} p-halfrem` }>{ children }</Grid>
<Grid item xs={ 4 } md={ 3 } className="font-bold p-halfrem" style={ { fontSize: '1rem' } }>{ title }</Grid>
<Grid item xs={ 8 } md={ 9 } className={ `${classes.propertiesValue} p-halfrem` } style={ { fontSize: '1rem' } }>{ children }</Grid>
</Grid>
);
}
......
src/ui/catalog/descriptor/Filters.tsx
View file @ 46099f06
......@@ -22,7 +22,7 @@ import {Descriptor} from 'model/descriptor.model';
const DescriptorFilters = ({handleSubmit, initialize, ...other}) => (
<FiltersBlock title="Crop descriptors" handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
<FiltersBlock title="Descriptors" handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
<TextFilter name="_text" label="Keyword search" placeholder="mardi rice" className="p-20" />
<CollapsibleComponentSearch title="Crop">
<CropFilter />
......
src/ui/common/heading/ContentHeader.tsx
View file @ 46099f06
......@@ -24,13 +24,13 @@ class ContentHeader extends React.Component<IContentHeader , any> {
const { title, subTitle} = this.props;
return (
<Grid container spacing={ 0 } className={ `back-green pt-15 pb-10 pl-20 pr-20` }>
<Grid container spacing={ 0 } className={ `back-green pt-10 pb-10 pl-20 pr-20` }>
<Grid item xs={ 12 }>
<h1 className="font-bold white mb-5" style={ { marginBottom: 0, fontSize: '1.5rem' } }>
<h1 className="font-bold white mb-5" style={ { marginBottom: 0, fontSize: '1.714rem'} }>
{ title }
</h1>
<Hidden implementation="css" mdDown>
<h3 className="font-medium white m-0" style={ { marginTop: '.5rem', fontSize: '1rem' } }>
<h3 className="font-medium white m-0" style={ { marginTop: '.5rem', fontSize: '0.8571rem' } }>
{ subTitle }
</h3>
</Hidden>
......
src/ui/common/markdown/index.tsx
View file @ 46099f06
......@@ -11,7 +11,7 @@ interface IMarkdownTextProps extends React.HTMLProps<HTMLElement> {
function Markdown({source, rows, style, className, basic}: IMarkdownTextProps) {
if (source) {
const mdStyle: object = rows ? { maxHeight: `${rows + 1.5}rem`, overflow: 'hidden', marginBottom: '.5rem' } : {};
const mdStyle: object = rows ? { maxHeight: `${rows + 1.5}rem`, overflow: 'hidden', marginBottom: '1.429rem' } : {};
if (basic) {
// the 'markdown-basic' className is used to render the div as inline-block
......
src/ui/common/pagination/index.tsx
View file @ 46099f06
......@@ -255,7 +255,7 @@ class PaginationComponent extends React.Component<IPaginationComponentProps, any
>
<PlayArrow className={ classes.arrowRevert }/>
</Button>
<Hidden implementation="css" only={ mobile }>
<Hidden implementation="js" only={ mobile }>
<span className={ `${classes.checkedPage} ${classes.bold}` }>
{ pageObj ? pageObj.number + 1 : 0 }
</span>
......
src/ui/layout/Header/index.tsx
View file @ 46099f06
......@@ -70,6 +70,10 @@ const styleSheet = {
},
},
/* tslint:enable */
menuBtn: {
width: '1em',
marginRight: '1.429rem',
},
};
interface IHeaderProps extends React.ClassAttributes<any> {
......@@ -137,7 +141,7 @@ class Header extends React.Component<IHeaderProps, any> {
<AppBar position="static" className={ classes.headerRoot } >
<Toolbar className={ classes.blockHeader }>
<div className="mobile-navigation-block">
<IconButton aria-label="Menu" color="accent" onClick={ this.handleLeftMenuOpen } >
<IconButton className={ classes.menuBtn } aria-label="Menu" color="accent" onClick={ this.handleLeftMenuOpen } >
<MenuIcon />
</IconButton>
......
src/ui/pages/dashboard/c/MyDataTable.tsx
View file @ 46099f06
......@@ -11,6 +11,7 @@ import PrettyDate from 'ui/common/time/PrettyDate';
import Paper from 'material-ui/Paper';
import Button from 'material-ui/Button';
import Grid from 'material-ui/Grid';
interface IDatasetLinkProps extends React.Props<any> {
tab: string;
......@@ -81,36 +82,38 @@ export default function MyDataTable({
<PaginationComponent displayName="records" pageObj={ paged } onChange={ onPaginationChange } sortOptions={ sortOptions } />
<ContentContainer>
<Paper>
<Table widths={ [ '10px', '40%', null, null, '10px' ] } headers={ (
<TableRow>
<TableCell style={ { maxWidth: '10px' } }>No.</TableCell>
<TableCell>Title</TableCell>
<TableCell>Created</TableCell>
<TableCell>Status</TableCell>
<TableCell style={ { maxWidth: '10px' } } />
</TableRow>
) }>
{ paged && paged.content.map((row, i) => (
<TableRow key={ row.id }>
<TableCell className="font-bold">{ paged.size * paged.number + i + 1 }</TableCell>
<TableCell className="font-bold">
<ResolveLink row={ row }>{ row.title || (<i>Untitled</i>) }</ResolveLink>
</TableCell>
<TableCell>{ row.createdDate && <PrettyDate value={ row.createdDate } /> }</TableCell>
<TableCell>{ row.published ? 'Published' : 'In progress' }</TableCell>
<TableCell>
<ResolveLink row={ row }>
<Button raised>{ row.published && row._permissions.write ? 'VIEW' : 'EDIT' }</Button>
</ResolveLink>
</TableCell>
</TableRow>
),
) }
</Table>
</Paper>
</ContentContainer>
<Grid container spacing={ 0 }>
<ContentContainer>
<Paper>
<Table widths={ [ '10px', '40%', null, null, '10px' ] } headers={ (
<TableRow>
<TableCell style={ { maxWidth: '10px' } }>No.</TableCell>
<TableCell>Title</TableCell>
<TableCell>Created</TableCell>
<TableCell>Status</TableCell>
<TableCell style={ { maxWidth: '10px' } } />
</TableRow>
) }>
{ paged && paged.content.map((row, i) => (
<TableRow key={ row.id }>
<TableCell className="font-bold" style={ { fontSize: '1rem' } }>{ paged.size * paged.number + i + 1 }</TableCell>
<TableCell className="font-bold" style={ { fontSize: '1rem' } }>
<ResolveLink row={ row }>{ row.title || (<i>Untitled</i>) }</ResolveLink>
</TableCell>
<TableCell style={ { fontSize: '1rem' } }>{ row.createdDate && <PrettyDate value={ row.createdDate } /> }</TableCell>
<TableCell style={ { fontSize: '1rem' } }>{ row.published ? 'Published' : 'In progress' }</TableCell>
<TableCell style={ { fontSize: '1rem' } }>
<ResolveLink row={ row }>
<Button raised>{ row.published && row._permissions.write ? 'VIEW' : 'EDIT' }</Button>
</ResolveLink>
</TableCell>
</TableRow>
),
) }
</Table>
</Paper>
</ContentContainer>
</Grid>
<PaginationComponent displayName="records" pageObj={ paged } onChange={ onPaginationChange } sortOptions={ sortOptions } />
</div>
......
src/ui/pages/dataset/BrowsePage.tsx
View file @ 46099f06
......@@ -103,12 +103,14 @@ class BrowsePage extends React.Component<IDatasetsProps, any> {
}
</Grid>
</Grid>
<Grid container spacing={ 0 }>
<Grid item xs={ 12 }>
<PaginationComponent pageObj={ paged }
onChange={ this.onPaginationChange } displayName="datasets"
sortOptions={ Dataset.SORT_OPTIONS } />
</Grid>
<Grid container spacing={ 0 } className="back-gray-yellow">
<Grid item md={ 3 } lg={ 2 } />
<Grid item xs={ 12 } md={ 9 } lg={ 10 }>
<PaginationComponent
pageObj={ paged }
onChange={ this.onPaginationChange } displayName="datasets"
sortOptions={ Dataset.SORT_OPTIONS } />
</Grid>
</Grid>
</Grid>
);
......
src/ui/pages/dataset/c/Card.tsx
View file @ 46099f06
......@@ -36,7 +36,7 @@ class DatasetCard extends React.Component<IDatasetCardProps, any> {
}
/>
<CardContent>
<Markdown className="mb-20" rows={ 3 } source={ dataset.description } />
<Markdown rows={ 3 } source={ dataset.description } />
<Properties>
<PropertiesItem title="Data provider:"><PartnerLink to={ dataset.owner } /></PropertiesItem>
<PropertiesItem title="Upload date:"><PrettyDate value={ dataset.createdDate } /></PropertiesItem>
......
src/ui/pages/dataset/c/Summary.tsx
View file @ 46099f06
......@@ -37,7 +37,7 @@ class Summary extends React.Component<ISummaryProps, any> {
return (
<Paper square>
<div className="pl-20 pr-20 pt-20 pb-20">
<h4 className="green font-bold m-0">
<h4 className="green font-bold m-0" style={ { fontSize: '1.286rem' } }>
SUMMARY
</h4>
</div>
......@@ -46,7 +46,7 @@ class Summary extends React.Component<ISummaryProps, any> {
<Grid container spacing={ 0 } className="pt-20 pb-10">
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold">
<h4 className="font-bold mb-15">
Number of accessions assessed in the dataset
</h4>
<h1 className="font-bold m-0">
......@@ -56,7 +56,7 @@ class Summary extends React.Component<ISummaryProps, any> {
</Grid>
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold">
<h4 className="font-bold mb-15">
Number of traits observed in the dataset
</h4>
<h1 className="font-bold m-0">
......@@ -66,22 +66,22 @@ class Summary extends React.Component<ISummaryProps, any> {
</Grid>
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold">
<h4 className="font-bold mb-15">
Data provider
</h4>
<h5 className="font-bold m-0">
<h6 className="font-bold m-0">
<PartnerLink to={ owner } />
</h5>
</h6>
</div>
</Grid>
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold">
<h4 className="font-bold mb-15">
Contact
</h4>
<p className="">
<h6 className="">
{ this.renderName(creators) }
</p>
</h6>
</div>
</Grid>
</Grid>
......
src/ui/pages/dataset/dataset-stepper/StepNavigation.tsx
View file @ 46099f06
......@@ -79,7 +79,7 @@ class StepNavigation extends React.Component<IStepNavigationProps, any> {
<Grid container spacing={ 0 } className={ classes.root }>
{ topDivider && <Divider/> }
<Grid item xs={ 12 } className={ classes.header }>
<h3 className={ `${ classes.title } font-bold m-0` }>
<h3 className={ `${ classes.title } font-bold m-0` } style={ { fontSize: '1.714rem' } }>
{
showStepName && `${this.state.id}. ${steps.find((e) => e.id === this.state.id).name}`
}
......
src/ui/pages/dataset/dataset-stepper/TopSection.tsx
View file @ 46099f06
......@@ -42,24 +42,24 @@ const styles = (theme) => ({
const TopSection = ({classes, pageTitle}) => (
<Grid container spacing={ 0 } className={ classes.root }>
<Grid item xs={ 12 } className={ classes.header }>
<h3 className="white mb-5 font-bold">
{ pageTitle }
</h3>
<h1 className="white mb-5 font-bold" style={ { marginBottom: 0, fontSize: '1.714rem'} }>
{ pageTitle }
</h1>
<Hidden implementation="css" smDown>
<h5 className="font-medium white m-0">
<h3 className="font-medium white m-0" style={ { marginTop: '.5rem', fontSize: '0.8571rem' } }>
Publish your datasets
</h5>
</h3>
</Hidden>
</Grid>
<Grid item xs={ 12 } className={ classes.subHeader }>
<h3 className="font-bold m-0 lh-35">
<h4 className="font-bold m-0 lh-35">
Dataset publication
</h3>
</h4>
<div className={ classes.flexGrow }/>
<div className={ classes.guide }>
<Hidden implementation="css" smDown>
<div>
<span>
<span style={ { fontSize: '1rem' } }>
New in the data publication process?
</span>
<Button raised className={ `${ classes.headerButton } ${ classes.btnGreen }` }>
......
src/ui/pages/dataset/dataset-stepper/steps/creators/DatasetCreatorForm.tsx
View file @ 46099f06
......@@ -124,12 +124,9 @@ class DatasetCreatorForm extends React.Component<IDatasetCreatorFormProps, any>
}
public render() {
const { classes } = this.props;
return (
<Grid spacing={ 0 } container>
<form className={ classes.form }>
<form className="full-width">
<FieldArray name="creators" component={ this.renderCreators }/>
</form>
<Grid item xs={ 12 } className="back-white">
......
src/ui/pages/descriptor/DisplayPage.tsx
View file @ 46099f06
......@@ -110,7 +110,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<ScrollToTopOnMount />
<ContentHeaderWithButton title="Descriptor details" buttons={ <BackButton defaultTarget="/descriptors" /> } />
{ stillLoading ? <Loading /> :
<Grid container spacing={ 24 } className="p-20 back-gray">
<Grid container spacing={ 0 } className="p-20 back-gray">
<Grid item xs={ 12 }>
<Card square>
<CardHeader title={ descriptor.title } />
......
src/ui/pages/descriptor/c/DescriptorForm.tsx
View file @ 46099f06
......@@ -130,7 +130,7 @@ class DescriptorForm extends React.Component<any, any> {
return (
<div>
<form onSubmit={ handleSubmit }>
<Heading title={ pageTitle } level={ 1 } />
<Heading title={ pageTitle } level={ 2 } />
<Field required name="owner"
editable={ ! (initialValues.uuid && initialValues.version) }
......
src/ui/pages/partner/BrowsePage.tsx
View file @ 46099f06
......@@ -110,12 +110,12 @@ class PartnerListPage extends React.Component<IBrowsePageProps, any> {
</Grid>
</Grid>
{ stillLoading ? <Loading /> :
<Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 9 } className="pb-10">
<Grid container spacing={ 0 } className="p-10">
<Grid item xs={ 12 } md={ 9 } className="p-10">
{ paged.content.map((e, i) => <PartnerCard partner={ e } key={ i }/>) }
</Grid>
<Grid item xs={ 12 } md={ 3 } className="pb-10">
<Summary paged={ paged }/>
<Grid item xs={ 12 } md={ 3 } className="p-10">
<Summary paged={ paged }/>
</Grid>
</Grid>
}
......
src/ui/pages/partner/EditPage.tsx
View file @ 46099f06
......@@ -48,7 +48,7 @@ class PartnerEditPage extends React.Component<IPartnerEditPageProps, any> {
}
return (
<Grid container className="back-gray p-20">
<Grid container spacing={ 0 } className="back-gray p-20">
<Grid item xs={ 12 }>
<Paper className="p-20">
<PartnerForm initialValues={ partner }
......
src/ui/pages/partner/c/Filters.tsx
View file @ 46099f06
......@@ -9,7 +9,7 @@ import StringFilter from 'ui/common/filter/StringFilter';
import StringArrFilter from 'ui/common/filter/StringArrFilter';
const PartnerFilters = ({handleSubmit, initialValues, initialize, ...other}) => (
<FiltersBlock title="Catalog partners" handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
<FiltersBlock title="Partners" handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
<CollapsibleComponentSearch title="Text search">
<StringArrFilter name="shortName" label="Acronym" placeholder="ICRISAT"/>
<StringFilter name="name" searchType="contains" label="Title" placeholder="International"/>
......
src/ui/pages/partner/c/PartnerCard.tsx
View file @ 46099f06
......@@ -29,6 +29,7 @@ const styles = (theme) => ({
},
/* tslint:enable */
italic: {
fontSize: '1rem',
fontStyle: 'italic',
color: '#4d4c46',
},
......@@ -61,7 +62,7 @@ class PartnerCard extends React.Component<IPartnerCardProps, any> {
}
return (
<Card className="m-20" square>
<Card className="mb-20" square>
<CardHeader
classes={ {
title: `${classes.titleCard}`,
......
src/ui/pages/partner/c/Summary.tsx
View file @ 46099f06
......@@ -17,7 +17,7 @@ class Summary extends React.Component<ISummaryProps, any> {
const {paged} = this.props;
return (
<Paper className="mt-20 mr-20" square>
<Paper square>
<div className="pl-20 pr-20 pt-20 pb-20">
<h4 className="green font-bold m-0">
SUMMARY
......@@ -28,7 +28,7 @@ class Summary extends React.Component<ISummaryProps, any> {
<Grid container spacing={ 0 } className="pt-20 pb-10">
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold">
<h4 className="font-bold mb-15">
Number of data publishers
</h4>
<h1 className="font-bold m-0">
......@@ -38,7 +38,7 @@ class Summary extends React.Component<ISummaryProps, any> {
</Grid>
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold">
<h4 className="font-bold mb-15">
Number of countries
</h4>
<h1 className="font-bold m-0">
......@@ -48,7 +48,7 @@ class Summary extends React.Component<ISummaryProps, any> {
</Grid>
<Grid item xs={ 12 }>
<div className="pt-15 pb-15 pl-20 pr-20 mb-10 even-row">
<h4 className="font-bold">
<h4 className="font-bold mb-15">
Number of institutes
</h4>
<h1 className="font-bold m-0">
......
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