From ceec91670d15aea76291ee000be007ebbebf575c Mon Sep 17 00:00:00 2001 From: Maciej Ziarkowski Date: Wed, 4 Sep 2019 15:05:41 +0100 Subject: [PATCH 01/21] Add types for react-leaflet-universal --- app/package-lock.json | 27 ++++++++++++++++++- app/package.json | 1 + app/src/frontend/map/map.tsx | 13 ++++++--- .../frontend/map/react-leaflet-universal.d.ts | 3 +++ 4 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 app/src/frontend/map/react-leaflet-universal.d.ts diff --git a/app/package-lock.json b/app/package-lock.json index 47d27e62..de4d07b9 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -1037,6 +1037,12 @@ "@types/node": "*" } }, + "@types/geojson": { + "version": "7946.0.7", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz", + "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==", + "dev": true + }, "@types/glob": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz", @@ -1075,6 +1081,15 @@ "integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==", "dev": true }, + "@types/leaflet": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.1.tgz", + "integrity": "sha512-E5k+vyE2Tv9wQsO6ZsEy08Pjd8RjHPkCzz3Ubt7feMc+5+VkbXtcZMcciczRWuMN5rFIsVywLxRhvTp7fAbbzg==", + "dev": true, + "requires": { + "@types/geojson": "*" + } + }, "@types/mime": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.1.tgz", @@ -1139,6 +1154,16 @@ "@types/react": "*" } }, + "@types/react-leaflet": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.4.0.tgz", + "integrity": "sha512-kDZ2Ky6FQxXRODBEFlq25Lu80Nc7UsDSHCmHTa22UQn2RIJxe3O443K0vzOrFyzWPpVEOmqBpfDkX9QSTBoFxg==", + "dev": true, + "requires": { + "@types/leaflet": "*", + "@types/react": "*" + } + }, "@types/react-router": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.0.3.tgz", @@ -10515,7 +10540,7 @@ }, "semver": { "version": "4.3.2", - "resolved": "http://registry.npmjs.org/semver/-/semver-4.3.2.tgz", + "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.2.tgz", "integrity": "sha1-x6BxWKgL7dBSNVt3DYLWZA+AO+c=" } } diff --git a/app/package.json b/app/package.json index 24d15a57..767467c5 100644 --- a/app/package.json +++ b/app/package.json @@ -45,6 +45,7 @@ "@types/prop-types": "^15.7.1", "@types/react": "^16.9.1", "@types/react-dom": "^16.8.5", + "@types/react-leaflet": "^2.4.0", "@types/react-router-dom": "^4.3.4", "@types/webpack-env": "^1.14.0", "babel-eslint": "^10.0.2", diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx index 78f20aa4..5d48e1f0 100644 --- a/app/src/frontend/map/map.tsx +++ b/app/src/frontend/map/map.tsx @@ -1,5 +1,6 @@ -import React, { Component, Fragment } from 'react'; +import { LatLngExpression } from 'leaflet'; import PropTypes from 'prop-types'; +import React, { Component, Fragment } from 'react'; import { Map, TileLayer, ZoomControl, AttributionControl } from 'react-leaflet-universal'; import '../../../node_modules/leaflet/dist/leaflet.css' @@ -13,10 +14,16 @@ import ThemeSwitcher from './theme-switcher'; const OS_API_KEY = 'NVUxtY5r8eA6eIfwrPTAGKrAAsoeI9E9'; +interface ColouringMapState { + theme: 'light' | 'night'; + lat: number; + lng: number; + zoom: number; +} /** * Map area */ -class ColouringMap extends Component { // TODO: add proper types +class ColouringMap extends Component { // TODO: add proper types static propTypes = { // TODO: generate propTypes from TS building: PropTypes.object, revision_id: PropTypes.number, @@ -91,7 +98,7 @@ class ColouringMap extends Component { // TODO: add proper types } render() { - const position = [this.state.lat, this.state.lng]; + const position: LatLngExpression = [this.state.lat, this.state.lng]; // baselayer const key = OS_API_KEY diff --git a/app/src/frontend/map/react-leaflet-universal.d.ts b/app/src/frontend/map/react-leaflet-universal.d.ts new file mode 100644 index 00000000..2640309f --- /dev/null +++ b/app/src/frontend/map/react-leaflet-universal.d.ts @@ -0,0 +1,3 @@ +declare module 'react-leaflet-universal' { + export * from 'react-leaflet'; +} \ No newline at end of file From 6422be118d0a59e6df25ce84b41de17cfdf6282d Mon Sep 17 00:00:00 2001 From: Maciej Ziarkowski Date: Wed, 4 Sep 2019 17:04:07 +0100 Subject: [PATCH 02/21] Reorganise/restyle header --- app/src/frontend/header.css | 19 ++++++++++++++++--- app/src/frontend/header.tsx | 27 +++++++++++---------------- 2 files changed, 27 insertions(+), 19 deletions(-) diff --git a/app/src/frontend/header.css b/app/src/frontend/header.css index 7dcf4d8a..3d2cbecc 100644 --- a/app/src/frontend/header.css +++ b/app/src/frontend/header.css @@ -2,10 +2,8 @@ * Main header */ .main-header { - display: block; - min-height: 79px; text-decoration: none; - border-bottom: 3px solid #222; + border-bottom: 2px solid #222; } .main-header .navbar { padding: 0.75em 0.5em 0.75em; @@ -13,3 +11,18 @@ .main-header .navbar-brand { margin: 0 1em 0 0; } + +.main-header .shorten-username { + text-overflow: '…)'; + white-space: nowrap; + overflow: hidden; + display: inline-block; + vertical-align: bottom; + max-width: 70vw; +} + +@media (min-width: 768px) { + .main-header .shorten-username { + max-width: 5vw; + } +} \ No newline at end of file diff --git a/app/src/frontend/header.tsx b/app/src/frontend/header.tsx index 7b8ba663..3e9bce04 100644 --- a/app/src/frontend/header.tsx +++ b/app/src/frontend/header.tsx @@ -30,19 +30,24 @@ class Header extends React.Component { // TODO: add proper types render() { return (
-