diff --git a/package.json b/package.json index 2c7043e..d723223 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "babel-loader": "8.0.6", + "moment": "^2.24.0", "react": "^16.10.2", "react-bulma-components": "3.1.3", "react-dom": "^16.10.2", diff --git a/src/App.css b/src/App.css index f5d2f2f..6e9148f 100644 --- a/src/App.css +++ b/src/App.css @@ -17,7 +17,15 @@ color: #fff; } +.subtitle { + color: #aaa; +} + .value { text-align: center; border: 1px solid #888; } + +.menu { + margin: .5em; +} diff --git a/src/App.js b/src/App.js index 1ca89b9..5078b7e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ import React from 'react'; +import moment from 'moment'; import './App.css'; import { Columns, @@ -186,7 +187,7 @@ class App extends React.Component { images = imageMetadata.map((metadata) => { let {name, ratio, image} = metadata; - let width = 256; + let width = 384; let height = (ratio * width).toFixed(); let url = ROOT + image + '?t=' + timestamp; const mouseMove = (e) => { @@ -217,9 +218,13 @@ class App extends React.Component {

{name}

) }); + let time = moment.unix(timestamp); mainContent =
- Run @ {new Date(timestamp * 1000).toLocaleString()} + Run @ {time.format("llll")} + + + {time.fromNow()} {images}
; diff --git a/yarn.lock b/yarn.lock index 7e407c5..845b10e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5522,6 +5522,10 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1: dependencies: minimist "0.0.8" +moment@^2.24.0: + version "2.24.0" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b" + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"