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