Skip to content

Commit 77081f1

Browse files
nc9nc9
committed
v2 base
1 parent b539672 commit 77081f1

28 files changed

+103253
-88
lines changed

‎package.json

+9-1
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,15 @@
88
"@nivo/core": "^0.61.0",
99
"@nivo/line": "^0.61.1",
1010
"@sentry/browser": "^5.14.2",
11+
"autoprefixer": "^9.7.5",
1112
"axios": "^0.19.2",
1213
"axios-cache-adapter": "^2.5.0",
14+
"classnames": "^2.2.6",
1315
"date-fns": "^2.10.0",
1416
"lodash.camelcase": "^4.3.0",
1517
"numeral": "^2.0.6",
18+
"postcss-cli": "^7.1.0",
19+
"postcss-import": "^12.0.1",
1620
"query-string": "^6.11.1",
1721
"react": "^16.13.0",
1822
"react-dom": "^16.13.0",
@@ -23,11 +27,15 @@
2327
"react-map-gl": "^5.2.3",
2428
"react-router-dom": "^5.1.2",
2529
"react-scripts": "3.4.0",
26-
"react-table": "^7.0.0"
30+
"react-table": "^7.0.0",
31+
"tailwindcss": "^1.2.0"
2732
},
2833
"scripts": {
2934
"start": "react-scripts start",
35+
"start:css": "postcss src/styles/index.css -o src/styles/tailwind.css -w",
36+
"build:css": "postcss src/styles/index.css -o src/styles/tailwind.css --env production",
3037
"build": "react-scripts build",
38+
"build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
3139
"eject": "react-scripts eject",
3240
"purgecf": "./cloudflare-purge.sh",
3341
"predeploy": "react-scripts build",

‎postcss.config.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const tailwindcss = require("tailwindcss")
2+
3+
module.exports = {
4+
plugins: [
5+
tailwindcss("./tailwind.js"),
6+
require("postcss-import"),
7+
require("autoprefixer"),
8+
// require("@tailwindcss/custom-forms"),
9+
],
10+
}

‎src/App.js

+30-32
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,15 @@ import { logPageView } from "./analyticsTracker"
55
import ErrorBoundary from "./components/ErrorBoundary"
66
import LaunchScreen from "./components/LaunchScreen"
77
import NotFoundContent from "./components/NotFound"
8+
import Footer from "./components/Footer"
89

910
// import SocialProjectApp from "./projects/social"
1011
// import SportsGrantsApp from "./projects/sportsgrants"
1112
// import ClimateActApp from "./projects/climateact"
12-
import CovidProject from "./projects/covid20"
13+
import CovidProject from "./projects/covid20/Dashboard"
1314

1415
import infoTorchLogo from "./images/infotorch-logo.png"
15-
const styles = {
16-
root: {
17-
display: "grid",
18-
gridTemplateRows: "80px auto",
19-
height: "100vh",
20-
alignItems: "start",
21-
},
22-
appBar: {
23-
gridColumn: "1",
24-
gridRow: "1",
25-
backgroundColor: "#006db3",
26-
borderBottom: `2px solid #006db3`,
27-
color: "white",
28-
},
29-
}
16+
import { MdHighlight } from "react-icons/md"
3017

3118
const App = () => {
3219
const [state] = useState({
@@ -40,17 +27,24 @@ const App = () => {
4027
}, [history])
4128

4229
return (
43-
<div styles={styles.root}>
30+
<div class="">
4431
{/* <CssBaseline /> */}
4532

4633
<ErrorBoundary>
4734
{!ready && <LaunchScreen />}
4835
{ready && (
4936
<>
50-
<div style={styles.appBar}>
51-
<div>
52-
<div display="flex" flexGrow={1}>
53-
<img src={infoTorchLogo} height="50" alt="logo" />
37+
<nav class="bg-blue-800 absolute top-0 left-0 w-full z-10 md:flex-row md:flex-no-wrap md:justify-start flex items-center p-4">
38+
<div class=" mx-auto px-2 ">
39+
<div class="w-full items-left px-4">
40+
{/* <img src={infoTorchLogo} height="50" alt="logo" /> */}
41+
<a
42+
class="text-white text-lg text-bold lowercase lg:inline-block font-semibold"
43+
href="/covid19"
44+
>
45+
{/* <MdHighlight /> */}
46+
Infotorch
47+
</a>
5448
</div>
5549

5650
{/* <IconButton
@@ -90,10 +84,10 @@ const App = () => {
9084
</IconButton> */}
9185
{/* </div> */}
9286
</div>
93-
</div>
94-
95-
<Switch>
96-
{/* <Route path="/social">
87+
</nav>
88+
<main class="bg-gray-200">
89+
<Switch>
90+
{/* <Route path="/social">
9791
<SocialProjectApp />
9892
</Route>
9993
<Route path="/climateact">
@@ -102,14 +96,18 @@ const App = () => {
10296
<Route path="/sportsgrants">
10397
<SportsGrantsApp />
10498
</Route> */}
105-
<Route path="/covid19">
106-
<CovidProject />
107-
</Route>
99+
<Route path="/covid19">
100+
<CovidProject />
101+
</Route>
108102

109-
<Route>
110-
<NotFoundContent />
111-
</Route>
112-
</Switch>
103+
<Route>
104+
<NotFoundContent />
105+
</Route>
106+
</Switch>
107+
</main>
108+
<footer className="footerFixed" class="flex border-box bg-white">
109+
<Footer />
110+
</footer>
113111
</>
114112
)}
115113
</ErrorBoundary>

‎src/components/Footer.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from "react"
2+
import pkg from "../../package.json"
3+
4+
const ProjectIntro = () => (
5+
<div class="w-full block mb-8 mt-4 py-4">
6+
<div class="px-4 mx-auto">
7+
<div className="flex flex-wrap">
8+
<div className="w-1/2 px-4">
9+
<div className="font-mono font-small">v{pkg["version"]}</div>
10+
</div>
11+
12+
<div className="w-1/2 px-4">
13+
<ul className="flex flex-wrap list-none justify-end">
14+
<li>
15+
<a
16+
href="mailto:[email protected]"
17+
className="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
18+
>
19+
Email
20+
</a>
21+
</li>
22+
<li>
23+
<a
24+
href="https://github.com/infotorch"
25+
className="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
26+
>
27+
Code
28+
</a>
29+
</li>
30+
<li>
31+
<a
32+
href="https://github.com/infotorch/covid19-australia-api"
33+
className="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
34+
>
35+
API
36+
</a>
37+
</li>
38+
<li>
39+
<a
40+
href="http://twitter.com/infotorchorg"
41+
className="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
42+
>
43+
Twitter
44+
</a>
45+
</li>
46+
<li>
47+
<a
48+
href="http://twitter.com/infotorchorg"
49+
className="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
50+
>
51+
Facebook
52+
</a>
53+
</li>
54+
</ul>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
)
60+
61+
export default ProjectIntro

‎src/index.css

-10
This file was deleted.

‎src/index.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@ import React from "react"
22
import ReactDOM from "react-dom"
33
import * as Sentry from "@sentry/browser"
44
import { BrowserRouter } from "react-router-dom"
5-
65
import { initializeGA } from "./analyticsTracker"
7-
8-
import "./index.css"
96
import App from "./App"
7+
import "./styles/tailwind.css"
108

119
initializeGA()
1210

‎src/projects/covid19/components/CovidChart.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const colors = {
1010
SA: "red",
1111
TAS: "#006A4E",
1212
NT: "#E65A00",
13+
ACT: "black",
1314
}
1415

1516
const getColor = bar => colors[bar.id]
@@ -82,13 +83,13 @@ const SocialFollowingLookupChart = ({ username }) => {
8283
}}
8384
curve={"basis"}
8485
// enablePointLabel={true}
85-
margin={{ top: 20, right: 60, bottom: 80, left: 60 }}
86-
pointSize={6}
87-
pointBorderWidth={1}
88-
pointBorderColor={{
89-
from: "color",
90-
modifiers: [["darker", 0.3]],
91-
}}
86+
margin={{ top: 20, right: 30, bottom: 80, left: 60 }}
87+
pointSize={0}
88+
pointBorderWidth={0}
89+
// pointBorderColor={{
90+
// from: "color",
91+
// modifiers: [["darker", 0.3]],
92+
// }}
9293
useMesh={true}
9394
labelTextColor={{ from: "color", modifiers: [["darker", 1.6]] }}
9495
legends={[
@@ -99,7 +100,7 @@ const SocialFollowingLookupChart = ({ username }) => {
99100
justify: false,
100101
translateY: 65,
101102
itemsSpacing: 15,
102-
itemWidth: 60,
103+
itemWidth: 40,
103104
itemHeight: 20,
104105
itemDirection: "left-to-right",
105106
itemOpacity: 0.85,

‎src/projects/covid19/components/Footer.js

+48-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import React from "react"
2-
import Typography from "@material-ui/core/Typography"
3-
import Link from "@material-ui/core/Link"
42

53
import pkg from "../../../../package.json"
64

@@ -12,15 +10,54 @@ const styles = {
1210
}
1311

1412
const ProjectIntro = () => (
15-
<div style={styles}>
16-
<>
17-
<Typography variant="caption" gutterBottom>
18-
v{pkg["version"]} - Data available via{" "}
19-
<Link href="https://github.com/infotorch/covid19-australia-api">
20-
API
21-
</Link>
22-
</Typography>
23-
</>
13+
<div class="w-100 block py-4">
14+
<div class="container mx-auto px-4">
15+
<div className="flex flex-wrap items-center md:justify-between justify-center">
16+
<div className="w-full md:w-4/12 px-4">
17+
<div className="text-sm text-gray-600 font-semibold py-1">
18+
© {new Date().getFullYear()} v{pkg["version"]} - Data available via{" "}
19+
<a href="https://github.com/infotorch/covid19-australia-api">API</a>
20+
</div>
21+
</div>
22+
23+
<div className="w-full md:w-8/12 px-4">
24+
<ul className="flex flex-wrap list-none md:justify-end justify-center">
25+
<li>
26+
<a
27+
href="mailto:[email protected]"
28+
className="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
29+
>
30+
Email
31+
</a>
32+
</li>
33+
<li>
34+
<a
35+
href="https://github.com/infotorch"
36+
className="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
37+
>
38+
Code
39+
</a>
40+
</li>
41+
<li>
42+
<a
43+
href="http://twitter.com/infotorchorg"
44+
className="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
45+
>
46+
Twitter
47+
</a>
48+
</li>
49+
<li>
50+
<a
51+
href="http://twitter.com/infotorchorg"
52+
className="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
53+
>
54+
Facebook
55+
</a>
56+
</li>
57+
</ul>
58+
</div>
59+
</div>
60+
</div>
2461
</div>
2562
)
2663

‎src/projects/covid19/components/LineChartLog.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const LineChartLog = ({ dataSource }) => {
7979
curve={"basis"}
8080
// enablePointLabel={true}
8181
margin={{ top: 20, right: 0, bottom: 80, left: 60 }}
82-
pointSize={6}
82+
pointSize={0}
8383
pointBorderWidth={1}
8484
pointBorderColor={{
8585
from: "color",
@@ -90,13 +90,14 @@ const LineChartLog = ({ dataSource }) => {
9090
legends={[
9191
{
9292
dataFrom: "indexes",
93-
anchor: "bottom",
94-
direction: "row",
93+
anchor: "top-left",
94+
direction: "column",
9595
justify: false,
96-
translateY: 65,
97-
itemsSpacing: 10,
98-
itemWidth: 90,
99-
itemHeight: 20,
96+
translateY: 20,
97+
translateX: 20,
98+
itemsSpacing: 5,
99+
itemWidth: 60,
100+
itemHeight: 25,
100101
itemDirection: "left-to-right",
101102
itemOpacity: 1,
102103
symbolSize: 15,

‎src/projects/covid20/Chart.js

Whitespace-only changes.

0 commit comments

Comments
 (0)