Commit 6d69c75e authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '217-scale-descriptor-layout' into 'master'

Resolve "Scale descriptor layout"

See merge request !185
parents 0db7e536 5cd4ee6b
Pipeline #4670 passed with stages
in 3 minutes and 16 seconds
......@@ -10,20 +10,40 @@ const styles = (theme) => ({
/* tslint:disable */
scaleContainer: {
// nop
backgroundRepeat: 'repeat no-repeat',
backgroundSize: '40px',
backgroundPosition: '0 1px',
justifyContent: 'space-between' as 'space-between',
alignItems: 'baseline' as 'baseline',
display: 'flex',
flexWrap: 'wrap' as 'wrap',
boxSizing: 'border-box',
// border
borderBottom: 'solid 1px #e4e4e4',
paddingBottom: '2rem',
},
scaleInteger: {
backgroundImage: 'url(/images/descriptor-scale-integer.png)',
},
scaleDecimal: {
backgroundImage: 'url(/images/descriptor-scale-decimal.png)',
},
marker: {
fontSize: '21px',
textAlign: 'center',
'&:first-of-type': {
fontWeight: 'bold' as 'bold',
},
'&:last-of-type': {
'&:first-of-type, &:last-of-type': {
fontWeight: 'bold' as 'bold',
backgroundColor: '#504d46',
color: '#e1e2df',
width: '25px',
display: 'inline-block',
height: '24px',
fontSize: '21px',
},
},
labeled: {
border: 'solid 1px #88ba42',
color: 'White',
// border: 'solid 1px #88ba42',
// borderRadius: '100%',
width: '25px',
display: 'inline-block',
......@@ -31,11 +51,16 @@ const styles = (theme) => ({
fontSize: '21px',
backgroundColor: '#88ba42',
textAlign: 'center',
}
},
unlabeled: {
top: '1.2rem',
position: 'relative' as 'relative',
fontSize: '.8rem',
},
/* tslint:enable */
});
const DescriptorScale = ({classes, min, max, labels, className = '' }: { classes?: any, min: number, max: number, labels: VocabularyTerm[], className: string }) => {
const DescriptorScale = ({classes, decimal, min, max, labels, className = '' }: { classes?: any, decimal?: boolean, min: number, max: number, labels: VocabularyTerm[], className: string }) => {
const bits: number[] = labels.map((l) => +l.code);
log(`Numeric labels`, bits, labels);
......@@ -48,14 +73,15 @@ const DescriptorScale = ({classes, min, max, labels, className = '' }: { classes
return (
<div className={ className }>
<Grid container justify="space-between" alignItems="baseline" className={ `${classes.scaleContainer} mb-20` }>
<div className={ `${classes.scaleContainer} ${decimal ? classes.scaleDecimal : classes.scaleInteger} mb-10` }>
{ bats.map((bat, index) => (
<Grid key={ bat } item xs={ 1 } className={ `${index === 0 || index === bats.length - 1 ? '' : bits.indexOf(bat) < 0 ? 'smHidden' : ''} ${classes.marker}` }>
<span className={ bits.indexOf(bat) < 0 ? '' : classes.labeled }>{ bat }</span>
</Grid>
<div key={ bat } className={ `${bits.indexOf(bat) < 0 ? (index === 0 || index === bats.length - 1 ? '' : classes.unlabeled) : classes.labeled} ${classes.marker}` }>
<span>{ bat }</span>
</div>
)) }
</Grid>
</div>
<p><b>Legend:</b></p>
{ labels.map((label, index) => (
<Grid key={ label.code } container justify="space-between" alignItems="center">
<Grid item xs={ 2 } style={ { textAlign: 'center' } }>
......
......@@ -160,7 +160,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<Properties>
<PropertiesItem title="Allowed values:">{ descriptor.integerOnly ? 'Integers' : 'Decimals' }</PropertiesItem>
</Properties>
<DescriptorScale className="mt-20" min={ descriptor.minValue } max={ descriptor.maxValue } labels={ descriptor.terms } />
<DescriptorScale className="mt-20" decimal={ ! descriptor.integerOnly } min={ descriptor.minValue } max={ descriptor.maxValue } labels={ descriptor.terms } />
</Section>
</Grid>
}
......
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