Commit 0b12a666 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov
Browse files

PropertyItem layouts

Fixed one property in card width bug
parent e4da9210
......@@ -28,6 +28,19 @@ const styles = (theme) => ({
},
propertiesValue: {
overflowX: 'hidden' as 'hidden',
display: 'flex' as 'flex',
alignItems: 'center' as 'center',
fontSize: '1rem',
padding: '.7rem 1rem',
},
propertiesValueSmall: {
alignItems: 'flex-end' as 'flex-end',
[theme.breakpoints.down('sm')]: {
justifyContent: 'flex-end' as 'flex-end',
},
},
propertiesValueNumeric: {
justifyContent: 'flex-end' as 'flex-end',
},
});
......@@ -36,21 +49,24 @@ interface IItemProps extends React.ClassAttributes<any> {
title: any;
small?: boolean;
keepEmpty?: boolean;
numeric?: boolean;
// children: any;
}
class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue'>, any> {
class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue' | 'propertiesValueSmall' | 'propertiesValueNumeric'>, any> {
public render() {
const { keepEmpty, small, title, classes, children } = this.props;
const { keepEmpty, small, numeric, title, classes, children } = this.props;
if (!keepEmpty && ! children) {
return null;
}
return (
<Grid item xs={ 12 } md={ small ? 3 : 12 } className={ classes.propertiesRow }>
<Grid container spacing={ 0 }>
<Grid item xs={ small ? 8 : 6 } md={ small ? 10 : 3 } className="font-bold p-halfrem" style={ { fontSize: '1rem', fontFamily: 'Roboto, sans-serif' } }>{ title }</Grid>
<Grid item xs={ small ? 4 : 6 } md={ small ? 2 : 9 } className={ `${classes.propertiesValue} p-halfrem` } style={ { fontSize: '1rem' } }>{ children }</Grid>
<Grid container style={ small ? {height: '100%' } : {} } spacing={ 0 }>
<Grid item xs={ small && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 9 : 3) } className="font-bold p-halfrem" style={ { fontSize: '1rem', fontFamily: 'Roboto, sans-serif' } }>{ title }</Grid>
<Grid item xs={ small && numeric ? 4 : 6 } md={ small ? 12 : (numeric ? 3 : 9) } className={ `${small ? classes.propertiesValueSmall : ''} ${numeric && !small ? classes.propertiesValueNumeric : ''} ${classes.propertiesValue}` }>
{ children }
</Grid>
</Grid>
</Grid>
);
......@@ -62,7 +78,7 @@ interface IProps extends React.ClassAttributes<any> {
// children: any;
}
class Properties1 extends React.Component<IProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue'>, any> {
class Properties1 extends React.Component<IProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue' | 'propertiesValueSmall' | 'propertiesValueNumeric'>, any> {
public render() {
const { children, classes} = this.props;
return (
......
......@@ -23,11 +23,11 @@ class PropertiesCard extends React.Component<IBundledProps, any> {
<Grid item lg={ small ? 6 : 12 } md={ 12 } xs={ 12 }>
<PageSection title={ title }>
<Grid container justify={ 'center' } spacing={ 16 }>
<Grid item md={ children ? 7 : 12 } sm={ 12 }>
<Grid item md={ children ? 7 : 12 } sm={ 12 } style={ {width: '100%'} }>
<Properties>
{
propertiesList.map((property) => (
<PropertiesItem title={ property.title }>
<PropertiesItem numeric title={ property.title }>
{ property.value && typeof property.value === 'number' ? t(`common:label.prettyNumber`, {value: property.value}) : property.value }
</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