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
...@@ -22,7 +22,6 @@ import PaginationComponent from 'ui/common/pagination'; ...@@ -22,7 +22,6 @@ import PaginationComponent from 'ui/common/pagination';
import SubsetCard from 'subsets/ui/c/SubsetCard'; import SubsetCard from 'subsets/ui/c/SubsetCard';
import SubsetFilters from './c/Filters'; import SubsetFilters from './c/Filters';
class BrowsePage extends BrowsePageTemplate<Subset> { class BrowsePage extends BrowsePageTemplate<Subset> {
protected static needs = [ protected static needs = [
...@@ -63,7 +62,7 @@ class BrowsePage extends BrowsePageTemplate<Subset> { ...@@ -63,7 +62,7 @@ class BrowsePage extends BrowsePageTemplate<Subset> {
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 }
......
...@@ -64,7 +64,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -64,7 +64,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<ContentHeaderWithButton title={ t('subsets.public.p.display.title', {subsetTitle: subset && subset.title}) } buttons={ isActionsActive ? <ActionButton action={ this.onUnpublish } title={ t('common:action.reject') }/> : '' } /> <ContentHeaderWithButton title={ t('subsets.public.p.display.title', {subsetTitle: subset && subset.title}) } buttons={ isActionsActive ? <ActionButton action={ this.onUnpublish } title={ t('common:action.reject') }/> : '' } />
<PageContents> <PageContents className="pt-1rem">
{ stillLoading ? <Loading /> : { stillLoading ? <Loading /> :
<div> <div>
{ error && <div>{ JSON.stringify(error) }</div> } { error && <div>{ JSON.stringify(error) }</div> }
......
...@@ -32,7 +32,7 @@ class PropertiesCard extends React.Component<IBundledProps, any> { ...@@ -32,7 +32,7 @@ class PropertiesCard extends React.Component<IBundledProps, any> {
{ topSection } { topSection }
</Grid> </Grid>
<Grid container justify={ 'center' } spacing={ 16 }> <Grid container justify={ 'center' } spacing={ 16 }>
<Grid item md={ children ? 7 : 12 } sm={ 12 } style={ {width: '100%'} }> <Grid item md={ children ? 7 : 12 } sm={ 12 }>
<Properties> <Properties>
{ {
propertiesList.map((property, i) => ( propertiesList.map((property, i) => (
......
...@@ -4,7 +4,7 @@ import {Bar} from './Bar'; ...@@ -4,7 +4,7 @@ import {Bar} from './Bar';
import BarGrid from './BarGrid'; import BarGrid from './BarGrid';
const chartHeight = 200; const chartHeight = 200;
const measureMargin = chartHeight / 4; // const measureMargin = chartHeight / 4;
const defaultChartColor = '#88ba42'; const defaultChartColor = '#88ba42';
const spacingQuota = 7; const spacingQuota = 7;
...@@ -15,7 +15,7 @@ const style = (theme) => ({ ...@@ -15,7 +15,7 @@ const style = (theme) => ({
/*tslint:disable*/ /*tslint:disable*/
measureSection: { measureSection: {
'& > div': { '& > div': {
marginBottom: `calc(${measureMargin}px - 1em)`, // marginBottom: `calc(${measureMargin}px - 1em)`,
} }
}, },
/*tslint:enable*/ /*tslint:enable*/
......
...@@ -8,9 +8,11 @@ const styles = (theme) => ({ ...@@ -8,9 +8,11 @@ const styles = (theme) => ({
subHeader: { subHeader: {
display: 'flex', display: 'flex',
backgroundColor: '#D4D2C7', backgroundColor: '#D4D2C7',
padding: '10px 20px',
borderBottom: '1px solid #B2AFA6', borderBottom: '1px solid #B2AFA6',
'& > div': { '& > div': {
marginTop: 'auto',
marginBottom: 'auto',
marginLeft: '1em',
[theme.breakpoints.down('sm')]: { [theme.breakpoints.down('sm')]: {
display: 'flex' as 'flex', display: 'flex' as 'flex',
width: '100%', width: '100%',
...@@ -23,11 +25,27 @@ const styles = (theme) => ({ ...@@ -23,11 +25,27 @@ const styles = (theme) => ({
position: 'sticky' as 'sticky', position: 'sticky' as 'sticky',
overflow: 'hidden' as 'hidden', overflow: 'hidden' as 'hidden',
left: '100%', left: '100%',
padding: '0 16px', '& > button': { // For case when we have one button
'& > span': { margin: '8px',
[theme.breakpoints.down('sm')]: {
width: '100%',
margin: '8px 0',
},
},
'& > span, & > div': { // For case when we use dialog
paddingBottom: '1px', paddingBottom: '1px',
'& > span': {
margin: '0 !important',
'& > button': {
margin: '8px',
[theme.breakpoints.down('sm')]: {
width: '100%',
margin: '8px 0',
},
},
},
}, },
'& > * > *': { '& > * > button': { // For case when we have container with buttons
margin: '8px', margin: '8px',
[theme.breakpoints.down('sm')]: { [theme.breakpoints.down('sm')]: {
width: '100%', width: '100%',
......
...@@ -2,20 +2,24 @@ import * as React from 'react'; ...@@ -2,20 +2,24 @@ import * as React from 'react';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import {withStyles} from '@material-ui/core/styles'; import {withStyles} from '@material-ui/core/styles';
const spacing = 16; const spacing = 0;
const totalMargin = 14; // const totalMargin = 14;
/*tslint:disable*/
const styles = (theme) => ({ const styles = (theme) => ({
root: { root: {
width: 'auto' as 'auto', width: 'calc(100% + 1em)',
margin: `${0 - spacing / 2}px ${totalMargin - spacing / 2}px`, margin: '-.5em',
'& > *': {
padding: '.5em',
},
}, },
}); });
const Layout = ({children = null, style = {}, classes}) => ( const GridContainer = ({children = null, style = {}, classes, className = null}) => (
<Grid container spacing={ spacing } className={ classes.root } style={ style }> <Grid container spacing={ spacing } className={ `${classes.root} ${className}` } style={ style }>
{ children } { children }
</Grid> </Grid>
); );
export default withStyles(styles)(Layout); export default withStyles(styles)(GridContainer);
...@@ -82,7 +82,7 @@ const Layout = ({classes, children = null, sidebar = null, withFooter = false}: ...@@ -82,7 +82,7 @@ const Layout = ({classes, children = null, sidebar = null, withFooter = false}:
</div> </div>
); );
const Contents = ({classes, style = {}, children = null}) => children && <div style={ style } className={ classes.pageContents }>{ children }</div>; const Contents = ({classes, style = {}, children = null, className = ''}) => children && <div style={ style } className={ `${className} ${classes.pageContents}` }>{ children }</div>;
const Section1 = ({classes, title, children = null}) => children && ( const Section1 = ({classes, title, children = null}) => children && (
<Card className={ classes.mainSection }> <Card className={ classes.mainSection }>
<CardHeader classes={ { title: classes.mainSectionTitle } } title={ title } /> <CardHeader classes={ { title: classes.mainSectionTitle } } title={ title } />
......
...@@ -27,6 +27,7 @@ class BrowsePage<T> extends React.Component<IBrowsePageProps<T> & any, any> { ...@@ -27,6 +27,7 @@ class BrowsePage<T> extends React.Component<IBrowsePageProps<T> & any, any> {
if (! paged) { if (! paged) {
applyFilters(filterCode || ''); applyFilters(filterCode || '');
} else if (filterCode !== paged.filterCode) { } else if (filterCode !== paged.filterCode) {
console.log(filterCode, `==============================!======================`, paged.filterCode);
updateRoute(paged); updateRoute(paged);
} }
} }
......
...@@ -17,9 +17,9 @@ import Hidden from '@material-ui/core/Hidden'; ...@@ -17,9 +17,9 @@ import Hidden from '@material-ui/core/Hidden';
import RecordVoiceOverIcon from '@material-ui/icons/RecordVoiceOver'; import RecordVoiceOverIcon from '@material-ui/icons/RecordVoiceOver';
import MailOutlineIcon from '@material-ui/icons/MailOutline'; import MailOutlineIcon from '@material-ui/icons/MailOutline';
import BookmarkBorderIcon from '@material-ui/icons/BookmarkBorder'; import BookmarkBorderIcon from '@material-ui/icons/BookmarkBorder';
import PageLayout from 'ui/layout/PageLayout'; import PageLayout, { PageContents } from 'ui/layout/PageLayout';
import Number from 'ui/common/Number'; import Number from 'ui/common/Number';
import GridLayout from 'ui/layout/GridLayout'; import GridContainer from 'ui/layout/GridContainer';
import CropCard from 'crop/ui/c/CropCard'; import CropCard from 'crop/ui/c/CropCard';
const styles = (theme) => ({ const styles = (theme) => ({
...@@ -77,6 +77,7 @@ const styles = (theme) => ({ ...@@ -77,6 +77,7 @@ const styles = (theme) => ({
background: '#0b6eb5', background: '#0b6eb5',
padding: '0 1.143rem', padding: '0 1.143rem',
maxHeight: 'none', maxHeight: 'none',
height: 'initial',
outline: '2px solid #0b6eb5', outline: '2px solid #0b6eb5',
'& button': { '& button': {
width: 'auto', width: 'auto',
...@@ -444,9 +445,11 @@ share caracterization and evaluation information on material held in their colle ...@@ -444,9 +445,11 @@ share caracterization and evaluation information on material held in their colle
</Grid> </Grid>
<Grid item xs={ 12 }> <Grid item xs={ 12 }>
{ crops && { crops &&
<GridLayout style={ { width: 'auto', margin: '8px 6px' } }> <PageContents className="pt-1rem">
{ crops && crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact />) } <GridContainer>
</GridLayout> { crops && crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact />) }
</GridContainer>
</PageContents>
} }
</Grid> </Grid>
</PageLayout> </PageLayout>
......
...@@ -15,6 +15,16 @@ const theme = createMuiTheme({ ...@@ -15,6 +15,16 @@ const theme = createMuiTheme({
marginBottom: '0.71rem', // 10px marginBottom: '0.71rem', // 10px
}, },
}, },
MuiTypography: {
body2: {
color: 'initial',
fontWeight: 'initial',
},
h5: {
color: 'unset',
},
},
MuiCheckbox: { MuiCheckbox: {
colorSecondary: { colorSecondary: {
'&$checked': { '&$checked': {
......
...@@ -56,7 +56,7 @@ class BrowsePage extends BrowsePageTemplate<User> { ...@@ -56,7 +56,7 @@ class BrowsePage extends BrowsePageTemplate<User> {
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 }
......
...@@ -70,7 +70,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> { ...@@ -70,7 +70,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
</div> </div>
} }
/> />
<PageContents> <PageContents className="pt-1rem">
<UserProfileCard userProfile={ user } admin /> <UserProfileCard userProfile={ user } admin />
</PageContents> </PageContents>
</div> </div>
......
...@@ -67,7 +67,7 @@ class EditUserPage extends React.Component<IEditPageProps, any> { ...@@ -67,7 +67,7 @@ class EditUserPage extends React.Component<IEditPageProps, any> {
return user === null ? (<Loading/>) : ( return user === null ? (<Loading/>) : (
<div> <div>
<ContentHeaderWithButton title={ t(`user.admin.p.edit.title`) } /> <ContentHeaderWithButton title={ t(`user.admin.p.edit.title`) } />
<PageContents> <PageContents className="pt-1rem">
<Card> <Card>
<CardContent> <CardContent>
<UserForm t={ t } initialValues={ user } onCancel={ this.handleCancel } onSubmit={ this.handleSubmit }/> <UserForm t={ t } initialValues={ user } onCancel={ this.handleCancel } onSubmit={ this.handleSubmit }/>
......
...@@ -79,7 +79,7 @@ class Registration extends React.Component<IRegistrationProps, any> { ...@@ -79,7 +79,7 @@ class Registration extends React.Component<IRegistrationProps, any> {
{ errorMsg && <div style={ { color: 'red' } }>{ errorMsg }</div> } { errorMsg && <div style={ { color: 'red' } }>{ errorMsg }</div> }
<Button variant="contained" color="secondary" type="submit" style={ {margin: '1rem 0 1rem 0'} }> <Button variant="contained" color="secondary" type="submit" style={ {marginTop: '1rem'} }>
{ t('user.public.c.registrationForm.register') } { t('user.public.c.registrationForm.register') }
</Button> </Button>
......
...@@ -10,9 +10,9 @@ import Grid from '@material-ui/core/Grid'; ...@@ -10,9 +10,9 @@ import Grid from '@material-ui/core/Grid';
// Model // Model
import {User} from 'model/user/User'; import {User} from 'model/user/User';
const UserProfileCard = ({userProfile, admin = false, t, ...other}: { userProfile: User, admin?: boolean, t: any} & React.ClassAttributes<any>) => { const UserProfileCard = ({userProfile, admin = false, t, className, ...other}: { userProfile: User, admin?: boolean, t: any, className: string} & React.ClassAttributes<any>) => {
return ( return (
<div className=""> <div className={ className }>
<Card square> <Card square>
<CardHeader title={ userProfile.fullName } /> <CardHeader title={ userProfile.fullName } />
<CardContent> <CardContent>
......
...@@ -48,7 +48,7 @@ class UserProfile extends React.Component<IUserProfileProps, void> { ...@@ -48,7 +48,7 @@ class UserProfile extends React.Component<IUserProfileProps, void> {
{ stillLoading ? <Loading /> : { stillLoading ? <Loading /> :
<div> <div>
<ContentHeaderWithButton title={ t('user.dashboard.p.profile.title') } /> <ContentHeaderWithButton title={ t('user.dashboard.p.profile.title') } />
<UserProfileCard userProfile={ userProfile } /> <UserProfileCard className="p-1rem" userProfile={ userProfile } />
</div> </div>
} }
</div> </div>
......
...@@ -410,6 +410,24 @@ $mui-breakpoints: ( ...@@ -410,6 +410,24 @@ $mui-breakpoints: (
} }
} }
.container-spacing-horizontal {
margin-top: -1em;
margin-bottom: -1em;
& > * {
margin-top: 1em;
margin-bottom: 1em;
}
}
.container-spacing-vertical {
margin-left: -1em;
margin-right: -1em;
& > * {
margin-left: 1em;
margin-right: 1em;
}
}
/** Text **/ /** Text **/
.font-bold { .font-bold {
font-weight: bold; font-weight: bold;
...@@ -601,127 +619,147 @@ h4 { ...@@ -601,127 +619,147 @@ h4 {
// Paddings and margins // Paddings and margins
.p-0 { .p-0 {
padding: 0; padding: 0 !important;
} }
.pl-5 { .pl-5 {
padding-left: 5px; padding-left: 5px !important;
} }
.pr-5 { .pr-5 {
padding-right: 5px; padding-right: 5px !important;
} }
.pt-5 { .pt-5 {
padding-top: 5px; padding-top: 5px !important;
} }
.pb-5 { .pb-5 {
padding-bottom: 5px; padding-bottom: 5px !important;
} }
.pb-7 { .pb-7 {
padding-bottom: 7px; padding-bottom: 7px !important;
} }
.p-10 { .p-10 {
padding: 10px; padding: 10px !important;
} }
.pl-10 { .pl-10 {
padding-left: 10px; padding-left: 10px !important;
} }
.pr-10 { .pr-10 {
padding-right: 10px; padding-right: 10px !important;
} }
.pt-10 { .pt-10 {
padding-top: 10px; padding-top: 10px !important;
} }
.pb-10 { .pb-10 {
padding-bottom: 10px; padding-bottom: 10px !important;
} }
.pl-15 { .pl-15 {
padding-left: 15px; padding-left: 15px !important;
} }
.pr-15 { .pr-15 {
padding-right: 15px; padding-right: 15px !important;
} }
.pt-15 { .pt-15 {
padding-top: 15px; padding-top: 15px !important;
} }
.pb-15 { .pb-15 {
padding-bottom: 15px; padding-bottom: 15px !important;
} }
.pl-20 { .pl-20 {
padding-left: 20px; padding-left: 20px !important;
} }
.pr-20 { .pr-20 {
padding-right: 20px; padding-right: 20px !important;
} }
.pt-20 { .pt-20 {
padding-top: 20px; padding-top: 20px !important;
} }
.pb-20 { .pb-20 {
padding-bottom: 20px; padding-bottom: 20px !important;
} }
.p-20 { .p-20 {
padding: 20px; padding: 20px !important;
} }
.p-1rem { .p-1rem {
padding: 1rem; padding: 1rem !important;
} }
.p-halfrem { .p-halfrem {
padding: .7rem 1rem; padding: .7rem 1rem !important;
}
.pt-1rem {
padding-top: 1rem !important;
}
.pr-1rem {
padding-right: 1rem !important;
}
.pb-1rem {
padding-bottom: 1rem !important;
}
.pl-1rem {
padding-left: 1rem !important;
} }
.m-0 { .m-0 {
margin: 0; margin: 0 !important;
} }
.mb-5 { .mb-5 {
margin-bottom: 5px; margin-bottom: 5px !important;
} }
.ml-20 { .ml-20 {
margin-left: 20px; margin-left: 20px !important;
} }