diff --git a/package-lock.json b/package-lock.json index 050c8cc..80d322c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11838,6 +11838,11 @@ "resolved": "https://registry.npmjs.org/mock-fs/-/mock-fs-4.8.0.tgz", "integrity": "sha512-Gwj4KnJOW15YeTJKO5frFd/WDO5Mc0zxXqL9oHx3+e9rBqW8EVARqQHSaIXznUdljrD6pvbNGW2ZGXKPEfYJfw==" }, + "moment": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + }, "mout": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/mout/-/mout-0.11.1.tgz", @@ -16602,6 +16607,11 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-moment": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.8.4.tgz", + "integrity": "sha512-QhI19OcfhiAn60/O6bMR0w8ApXrPFCjv6+eV0I/P9/AswzjgEAx4L7VxMBCpS/jrythLa12Q9v88req+ys4YpA==" + }, "react-router": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", diff --git a/package.json b/package.json index 4f8710e..9eedc16 100644 --- a/package.json +++ b/package.json @@ -23,10 +23,12 @@ "classnames": "^2.2.6", "eslint": "^5.6.0", "is-url": "^1.2.4", + "moment": "^2.24.0", "query-string": "^6.2.0", "react": "^16.8.1", "react-dom": "^16.8.1", "react-helmet": "^5.2.0", + "react-moment": "^0.8.4", "react-router-dom": "^4.3.1", "react-transition-group": "^2.5.3", "slugify": "^1.3.4", diff --git a/src/routes/Details/AssetDetails.module.scss b/src/routes/Details/AssetDetails.module.scss index b8f6e48..f4f46f5 100644 --- a/src/routes/Details/AssetDetails.module.scss +++ b/src/routes/Details/AssetDetails.module.scss @@ -8,14 +8,14 @@ color: $brand-grey-light; font-size: $font-size-large; border-bottom: 1px solid $brand-grey-lighter; - margin-bottom: $spacer / 2; - padding-bottom: $spacer / 2; + margin-bottom: $spacer / $line-height; + padding-bottom: $spacer / $line-height; } .metaPrimaryData { font-size: $font-size-small; - span { + > * { display: block; white-space: nowrap; } @@ -25,13 +25,13 @@ justify-content: space-between; flex-wrap: wrap; - span { + > * { flex: 0 0 48%; } } @media (min-width: $break-point--medium) { - span { + > * { flex: 0; } } @@ -46,6 +46,7 @@ margin-bottom: $spacer; list-style: none; padding-left: 0; + font-size: $font-size-small; li { width: 100%; diff --git a/src/routes/Details/AssetDetails.tsx b/src/routes/Details/AssetDetails.tsx index 8a2c820..85730ba 100644 --- a/src/routes/Details/AssetDetails.tsx +++ b/src/routes/Details/AssetDetails.tsx @@ -1,5 +1,7 @@ import React, { PureComponent } from 'react' +import { Link } from 'react-router-dom' import Button from '../../components/atoms/Button' +import Moment from 'react-moment' import styles from './AssetDetails.module.scss' interface AssetDetailsProps { @@ -16,14 +18,28 @@ export default class AssetDetails extends PureComponent { return ( <>