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

Resolve "Scale descriptor layout"

See merge request !185

src/ui/catalog/descriptor/DescriptorScale.tsx

@@ -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' } }>

src/ui/pages/descriptor/DisplayPage.tsx

@@ -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>
 								}