22 |
25 |
26 | This platform is unsuitable for mobile. Please revisit on a desktop.
27 |
28 |
18 |
{label}
19 |
24 |
10 | {data.map((val) => {
11 | return (
12 |
17 | onSelect(val[onSelectionType])}
21 | styleProps={val.styles}
22 | />
23 |
24 | );
25 | })}
26 |
27 | );
28 | };
29 |
30 | export default PanelTree;
31 |
--------------------------------------------------------------------------------
/src/components/time/atoms/Handles.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const TimelineHandles = ({ dims, onMoveTime }) => {
4 | const transform = "scale(1.5,1.5)";
5 | const size = 45;
6 | const handleOffset = dims.contentHeight / 2;
7 | return (
8 |
9 | onMoveTime("backwards")}
12 | >
13 |
14 |
18 |
19 | onMoveTime("forward")}
24 | >
25 |
26 |
30 |
31 |
32 | );
33 | };
34 |
35 | export default TimelineHandles;
36 |
--------------------------------------------------------------------------------
/src/components/controls/atoms/NarrativeCard.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { connect } from "react-redux";
3 | import { selectActiveNarrative } from "../../../selectors";
4 |
5 | function NarrativeCard({ narrative }) {
6 | // no display if no narrative
7 | const { steps, current } = narrative;
8 |
9 | if (steps[current]) {
10 | return (
11 |
12 |
13 |
14 |
15 | {current + 1}/{steps.length}
16 |
17 |
18 |
19 |
{narrative.label}
20 |
21 |
22 |
23 | {/*
location_on */}
24 | {/* {_renderActions(current, steps)} */}
25 |
26 |
{narrative.description}
27 |
28 |
Error: couldn't load source
;
36 | } else {
37 | return this.props.loader;
38 | }
39 | }
40 | }
41 |
42 | Md.propTypes = {
43 | loader: PropTypes.func,
44 | unloader: PropTypes.func.isRequired,
45 | path: PropTypes.string.isRequired,
46 | };
47 |
48 | export default Md;
49 |
--------------------------------------------------------------------------------
/src/components/atoms/CoeventIcon.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const CoeventIcon = ({ isEnabled, toggleMapViews }) => {
4 | return (
5 |
40 | );
41 | };
42 |
43 | export default CoeventIcon;
44 |
--------------------------------------------------------------------------------
/src/components/space/carto/atoms/Regions.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Portal } from "react-portal";
3 |
4 | function MapRegions({ svg, regions, projectPoint, styles }) {
5 | function renderRegion(region) {
6 | const lineCoords = [];
7 | const points = region.points.map(projectPoint);
8 |
9 | points.forEach((p1, idx) => {
10 | if (idx < region.points.length - 1) {
11 | const p2 = points[idx + 1];
12 | lineCoords.push({
13 | x1: p1.x,
14 | y1: p1.y,
15 | x2: p2.x,
16 | y2: p2.y,
17 | });
18 | }
19 | });
20 |
21 | return lineCoords.map((coords) => {
22 | const regionstyles =
23 | region.name in styles ? styles[region.name] : styles.default;
24 |
25 | return (
26 |
32 | );
33 | });
34 | }
35 |
36 | if (!regions || !regions.length) return null;
37 |
38 | return (
39 |
40 |
41 | {regions.map(renderRegion)}
42 |
43 |
44 | );
45 | }
46 |
47 | export default MapRegions;
48 |
--------------------------------------------------------------------------------
/src/components/space/carto/atoms/SatelliteOverlayToggle.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import copy from "../../../../common/data/copy.json";
3 | import { language } from "../../../../common/utilities";
4 | import mapImg from "../../../../assets/satelliteoverlaytoggle/map.png";
5 | import satImg from "../../../../assets/satelliteoverlaytoggle/sat.png";
6 |
7 | const SatelliteOverlayToggle = ({
8 | switchToSatellite,
9 | reset,
10 | isUsingSatellite,
11 | }) => {
12 | return (
13 |
14 | {isUsingSatellite ? (
15 |
22 | ) : (
23 |
30 | )}
31 |
8 | {title ?
{title}
: null}
9 |
14 |
hoverValue && setShowHover(true)}
16 | onMouseOut={() => hoverValue && setShowHover(false)}
17 | >
18 | {showHover ? (
19 |
25 | {hoverValue}
26 |
27 | ) : (
28 |
36 | {value}
37 |
38 | )}
39 |
40 | {/* {!showHover && value} */}
41 |
42 |
12 | {props.features.USE_SITES ? (
13 |
17 | ) : null}
18 |
19 | {/* ,
20 |
21 |
25 |
26 | , */}
27 |
28 | {props.features.USE_COVER ? (
29 |
30 | ) : null}
31 |
32 |
33 |
34 | );
35 | }
36 |
37 | return {renderToggles()}
;
38 | }
39 |
40 | export default BottomActions;
41 |
--------------------------------------------------------------------------------
/src/components/time/atoms/ZoomControls.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const DEFAULT_ZOOM_LEVELS = [
4 | { label: "20 years", duration: 10512000 },
5 | { label: "2 years", duration: 1051200 },
6 | { label: "3 months", duration: 129600 },
7 | { label: "3 days", duration: 4320 },
8 | { label: "12 hours", duration: 720 },
9 | { label: "1 hour", duration: 60 },
10 | ];
11 |
12 | function zoomIsActive(duration, extent, max) {
13 | if (duration >= max && extent >= max) {
14 | return true;
15 | }
16 | return duration === extent;
17 | }
18 |
19 | const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
20 | function renderZoom(zoom, idx) {
21 | const max = zoomLevels.reduce((acc, vl) =>
22 | acc.duration < vl.duration ? vl : acc
23 | );
24 | const isActive = zoomIsActive(zoom.duration, extent, max.duration);
25 | return (
26 | onApplyZoom(zoom)}
31 | key={idx}
32 | >
33 | {zoom.label}
34 |
35 | );
36 | }
37 |
38 | if (zoomLevels.length === 0) {
39 | zoomLevels = DEFAULT_ZOOM_LEVELS;
40 | }
41 | return (
42 |
43 | {zoomLevels.map((z, idx) => renderZoom(z, idx))}
44 |
45 | );
46 | };
47 |
48 | export default TimelineZoomControls;
49 |
--------------------------------------------------------------------------------
/src/components/controls/FullScreenToggle.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import screenfull from "screenfull";
3 | import { ToolbarButton } from "./atoms/ToolbarButton";
4 | import copy from "../../common/data/copy.json";
5 |
6 | export class FullscreenToggle extends React.Component {
7 | constructor(props) {
8 | super(props);
9 |
10 | this.onFullscreenStateChange = this.onFullscreenStateChange.bind(this);
11 |
12 | this.state = {
13 | isFullscreen: screenfull.isFullscreen,
14 | };
15 | }
16 |
17 | componentDidMount() {
18 | screenfull.on("change", this.onFullscreenStateChange);
19 | }
20 |
21 | componentWillUnmount() {
22 | screenfull.off("change", this.onFullscreenStateChange);
23 | }
24 |
25 | onFullscreenStateChange(evt) {
26 | this.setState({ isFullscreen: screenfull.isFullscreen });
27 | }
28 |
29 | onToggleFullscreen() {
30 | screenfull.toggle().catch(console.warn);
31 | }
32 |
33 | render() {
34 | if (!screenfull.isEnabled) return null;
35 |
36 | const { language } = this.props;
37 | const { isFullscreen } = this.state;
38 |
39 | return (
40 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import { Provider } from "react-redux";
4 | import store from "./store";
5 | import App from "./components/App";
6 |
7 | ReactDOM.render(
8 |
9 |
10 | ,
11 | document.getElementById("explore-app")
12 | );
13 |
14 | // Expressions from https://exceptionshub.com/how-to-detect-safari-chrome-ie-firefox-and-opera-browser.html
15 |
16 | /* eslint-disable */
17 | // Opera 8.0+
18 | const isOpera =
19 | (!!window.opr && !!opr.addons) ||
20 | !!window.opera ||
21 | navigator.userAgent.indexOf(" OPR/") >= 0;
22 | // Firefox 1.0+
23 | const isFirefox = typeof InstallTrigger !== "undefined";
24 | // Safari 3.0+ "[object HTMLElementConstructor]"
25 | const isSafari =
26 | /constructor/i.test(window.HTMLElement) ||
27 | (function (p) {
28 | return p.toString() === "[object SafariRemoteNotification]";
29 | })(
30 | !window["safari"] ||
31 | (typeof safari !== "undefined" && safari.pushNotification)
32 | );
33 | // Internet Explorer 6-11
34 | const isIE = /* @cc_on!@ */ false || !!document.documentMode;
35 | // Edge 20+
36 | const isEdge = !isIE && !!window.StyleMedia;
37 | // Chrome 1+
38 | const isChrome = !!window.chrome && !!window.chrome.webstore;
39 | // Blink engine detection
40 | const isBlink = (isChrome || isOpera) && !!window.CSS;
41 |
42 | if (isEdge || isIE) {
43 | alert(
44 | "Please view this website in Opera for best viewing. It is untested in your browser."
45 | );
46 | }
47 | /* eslint-enable */
48 |
--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // Do this as the first thing so that any code reading it knows the right env.
4 | process.env.BABEL_ENV = 'test';
5 | process.env.NODE_ENV = 'test';
6 | process.env.PUBLIC_URL = '';
7 |
8 | // Makes the script crash on unhandled rejections instead of silently
9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 | throw err;
13 | });
14 |
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 |
18 |
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 |
23 | function isInGitRepository() {
24 | try {
25 | execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 | return true;
27 | } catch (e) {
28 | return false;
29 | }
30 | }
31 |
32 | function isInMercurialRepository() {
33 | try {
34 | execSync('hg --cwd . root', { stdio: 'ignore' });
35 | return true;
36 | } catch (e) {
37 | return false;
38 | }
39 | }
40 |
41 | // Watch unless on CI or explicitly running all tests
42 | if (
43 | !process.env.CI &&
44 | argv.indexOf('--watchAll') === -1 &&
45 | argv.indexOf('--watchAll=false') === -1
46 | ) {
47 | // https://github.com/facebook/create-react-app/issues/5210
48 | const hasSourceControl = isInGitRepository() || isInMercurialRepository();
49 | argv.push(hasSourceControl ? '--watch' : '--watchAll');
50 | }
51 |
52 |
53 | jest.run(argv);
54 |
--------------------------------------------------------------------------------
/docs/mapbox.md:
--------------------------------------------------------------------------------
1 |
2 | # Timemap and custom Mapbox maps
3 |
4 | You can use satellite images and maps from [https://www.mapbox.com/](https://www.mapbox.com/) to customise the map in Timemap.
5 |
6 | Sign up for an account at [https://www.mapbox.com/](https://www.mapbox.com/) and use Mapbox's studio to create a custom map. To use the map you need to configure Timemap with the following:
7 |
8 | ## Token
9 |
10 | To access your Mapbox account Timemap needs an access token that you create under your Mapbox account.
11 |
12 | Sign in to Mapbox and then navigate to:
13 |
14 | Account > Access Tokens
15 |
16 | * Create a Token - add a token and optionally restrict it to the url of your timemap instance.
17 | * Add it to Timemap - copy the token and then add it to Timemap's `config.js` at the top level:
18 |
19 | ```
20 | MAPBOX_TOKEN: 'mapbox_token',
21 | ```
22 |
23 | Timemap can now access your account but you need to associate any maps you want to use with that account using Mapbox Studio. Once you have done that you can then reference the Mapbox Map id.
24 |
25 | ## Mapbox Map Id
26 |
27 | To reference a map you have created in Mapbox Studio you need the map's id which is available under 'share' >
28 |
29 | * Style URL (which looks like this: `mapbox://styles/your-mapbox-account-name/x5678-map-id`)
30 |
31 | Now go back to `config.js` and under the UI settings add (don't copy the 'mapbox://styles/' bit):
32 |
33 | ```
34 | ui: {
35 | tiles: 'your-mapbox-account-name/x5678-map-id',
36 | ```
37 |
38 | If you restart your time map instance you should now see the Mapbox map.
39 |
--------------------------------------------------------------------------------
/test/server_process.js:
--------------------------------------------------------------------------------
1 | import test from 'ava'
2 | const childProcess = require('child_process')
3 | const http = require('http')
4 |
5 | const SERVER_LAUNCH_WAIT_TIME = 10 * 1000
6 |
7 | let serverProc = null
8 | let serverExited = false
9 |
10 | test.before.cb(t => {
11 | console.log('launching server...')
12 | serverProc = childProcess.spawn('yarn', ['dev'], {
13 | cwd: '.',
14 | stdio: 'ignore'
15 | })
16 |
17 | serverProc.on('exit', function (code, signal) {
18 | serverExited = true
19 | })
20 |
21 | setTimeout(t.end, SERVER_LAUNCH_WAIT_TIME)
22 | })
23 |
24 | test.after(function () {
25 | console.log('killing server...')
26 | serverProc.kill('SIGKILL')
27 | })
28 |
29 | test('should launch', t => {
30 | t.false(serverExited)
31 | })
32 |
33 | const urls = [
34 | '/',
35 | 'js/index.bundle.js'
36 | ]
37 |
38 | urls.forEach(function (url) {
39 | test.cb('should respond to request for "' + url + '"', t => {
40 | http.get({
41 | hostname: 'localhost',
42 | port: 8080,
43 | path: '/',
44 | agent: false
45 | }, function (res) {
46 | let resultData = ''
47 |
48 | if (res.statusCode !== 200) {
49 | t.fail('Server response was not 200.')
50 | } else {
51 | res.on('data', function (data) { resultData += data })
52 |
53 | res.on('end', function () {
54 | if (resultData.length > 0) {
55 | t.pass()
56 | } else {
57 | t.fail('Server returned no data.')
58 | }
59 | })
60 | }
61 |
62 | t.end()
63 | })
64 | })
65 | })
66 |
--------------------------------------------------------------------------------
/src/scss/popup.scss:
--------------------------------------------------------------------------------
1 | .popup {
2 | box-sizing: border-box;
3 | margin: 0;
4 | padding: 15px;
5 | border: 0;
6 | opacity: 0;
7 | border-radius: 2px;
8 | transition: 0.2 ease;
9 | background: rgba(0, 0, 0, 0.9);
10 | transition: 0.4s ease;
11 | box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
12 |
13 | &:hover {
14 | transition: 0.4s ease;
15 | box-shadow: 0 29px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
16 | }
17 |
18 | .card-tophalf {
19 | height: 100px;
20 |
21 | .left {
22 | float: left;
23 | width: 120px;
24 | padding-right: 5px;
25 | box-sizing: border-box;
26 | border-right: 1px dotted $midwhite;
27 | }
28 | .right {
29 | float: left;
30 | width: 225px;
31 | padding-left: 5px;
32 | height: 90px;
33 | overflow: hidden;
34 | }
35 | }
36 |
37 | .filter,
38 | p.see-more {
39 | cursor: pointer;
40 |
41 | &:hover {
42 | color: $yellow;
43 | }
44 | }
45 |
46 | p {
47 | margin: 5px 0 0 0;
48 | }
49 |
50 | .timestamp {
51 | text-transform: uppercase;
52 | font-size: $xlarge;
53 | margin-top: 0;
54 | }
55 |
56 | .location {
57 | font-size: $normal;
58 | color: $offwhite;
59 | }
60 |
61 | .estimated-timestamp {
62 | margin-top: 3px;
63 | margin-left: 3px;
64 | font-size: $xsmall;
65 | color: $midwhite;
66 | text-transform: lowercase;
67 | }
68 |
69 | .summary {
70 | max-height: 200px;
71 | text-overflow: ellipsis;
72 | overflow: scroll;
73 | font-weight: 500;
74 | }
75 |
76 | .source {
77 | text-align: right;
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/src/components/atoms/ColoredMarkers.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { getCoordinatesForPercent } from "../../common/utilities";
3 |
4 | function ColoredMarkers({ radius, colorPercentMap, styles, className }) {
5 | let cumulativeAngleSweep = 0;
6 | const colors = Object.keys(colorPercentMap);
7 |
8 | return (
9 | <>
10 | {colors.map((color, idx) => {
11 | const colorPercent = colorPercentMap[color];
12 |
13 | const [startX, startY] = getCoordinatesForPercent(
14 | radius,
15 | cumulativeAngleSweep
16 | );
17 |
18 | cumulativeAngleSweep += colorPercent;
19 |
20 | const [endX, endY] = getCoordinatesForPercent(
21 | radius,
22 | cumulativeAngleSweep
23 | );
24 | // if the slices are less than 2, take the long arc
25 | const largeArcFlag = colors.length === 1 || colorPercent > 0.5 ? 1 : 0;
26 |
27 | // create an array and join it just for code readability
28 | const arc = [
29 | `M ${startX} ${startY}`, // Move
30 | `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
31 | "L 0 0 ", // Line
32 | `L ${startX} ${startY} Z`, // Line
33 | ].join(" ");
34 |
35 | const extraStyles = {
36 | ...styles,
37 | fill: color,
38 | };
39 |
40 | return (
41 |
48 | );
49 | })}
50 |
51 | );
52 | }
53 |
54 | export default ColoredMarkers;
55 |
--------------------------------------------------------------------------------
/src/reducers/validate/eventSchema.js:
--------------------------------------------------------------------------------
1 | import Joi from "joi";
2 |
3 | function joiFromCustom(custom) {
4 | const output = {};
5 | custom.forEach((field) => {
6 | if (field.kind === "text" || field.kind === "link") {
7 | output[field.key] = Joi.string().allow("");
8 | }
9 | if (field.kind === "list") {
10 | output[field.key] = Joi.array().allow("");
11 | }
12 | });
13 | return output;
14 | }
15 |
16 | function createEventSchema(custom) {
17 | return Joi.object()
18 | .keys({
19 | id: Joi.string().allow(""),
20 | civId: Joi.string().allow(""),
21 | description: Joi.string().allow("").required(),
22 | date: Joi.string().allow(""),
23 | time: Joi.string().allow(""),
24 | time_precision: Joi.string().allow(""),
25 |
26 | /* map */
27 | location: Joi.string().allow(""),
28 | latitude: Joi.string().allow(""),
29 | longitude: Joi.string().allow(""),
30 | /* space */
31 | x: Joi.string().allow(""),
32 | y: Joi.string().allow(""),
33 | z: Joi.string().allow(""),
34 |
35 | type: Joi.string().allow(""),
36 | category: Joi.string().allow(""),
37 | category_full: Joi.string().allow(""),
38 | associations: Joi.array().default([]),
39 | sources: Joi.array(),
40 | comments: Joi.string().allow(""),
41 | time_display: Joi.string().allow(""),
42 | // nested
43 | narrative___stepStyles: Joi.array(),
44 | shape: Joi.string().allow(""),
45 | colour: Joi.string().allow(""),
46 | ...joiFromCustom(custom),
47 | })
48 | .and("latitude", "longitude")
49 | .or("date", "latitude");
50 | }
51 |
52 | export default createEventSchema;
53 |
--------------------------------------------------------------------------------
/src/scss/notification.scss:
--------------------------------------------------------------------------------
1 | @import "burger";
2 |
3 | .notification-wrapper {
4 | top: 60px;
5 | right: 60px;
6 | width: 400px;
7 | height: auto;
8 | position: absolute;
9 | display: flex;
10 | flex-direction: column;
11 | }
12 |
13 | .notification {
14 | width: 100%;
15 | min-height: 40px;
16 | box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3),
17 | 10px 15px 12px rgba(0, 0, 0, 0.22);
18 | color: $darkgrey;
19 | background: $offwhite;
20 | border-radius: 5px;
21 | border: 3px solid $offwhite;
22 | padding: 20px;
23 | margin-bottom: 10px;
24 | box-sizing: border-box;
25 | font-size: $large;
26 | transition: opacity 0.5s ease 0.1s, z-index 0.1s ease 0s;
27 | opacity: 1;
28 | z-index: $overheader;
29 | cursor: pointer;
30 |
31 | &:hover {
32 | background: lighten($offwhite, 5%);
33 | transition: background-color 0.4s;
34 | }
35 |
36 | &.hidden {
37 | transition: 0.5s ease;
38 | opacity: 0;
39 | }
40 |
41 | .side-menu-burg {
42 | position: absolute;
43 | right: 8px;
44 | top: 10px;
45 | }
46 |
47 | .message {
48 | display: inline-block;
49 |
50 | &.error {
51 | color: red;
52 | }
53 | &.warning {
54 | color: orange;
55 | }
56 | &.good {
57 | color: green;
58 | }
59 | &.neutral {
60 | color: $darkgrey;
61 | }
62 | }
63 |
64 | .details {
65 | overflow: hidden;
66 | display: flex;
67 | flex-direction: column;
68 | border-radius: 3px;
69 | margin-top: 10px;
70 | padding: 10px;
71 | background: $darkgrey;
72 | color: $offwhite;
73 | font-family: monospace;
74 |
75 | &.true {
76 | height: auto;
77 | transition: height 0.4s, margin 0.4s;
78 | }
79 |
80 | &.false {
81 | height: 0;
82 | padding: 0;
83 | margin: 0;
84 | transition: height 0.4s, margin 0.4s;
85 | }
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/src/components/space/carto/atoms/__tests__/SatelliteOverlayToggle.spec.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { fireEvent, render, screen } from "@testing-library/react";
3 | import SatelliteOverlayToggle from "../SatelliteOverlayToggle";
4 | import "@testing-library/jest-dom";
5 |
6 | describe("", () => {
7 | it("shows the option to switch to satellite by default", () => {
8 | render(
9 |
10 | );
11 | expect(screen.getByRole("button", { name: /sat/i })).toBeTruthy();
12 | });
13 |
14 | it("shows the option to switch to map when satellite selected", () => {
15 | render(
16 |
21 | );
22 | expect(screen.getByRole("button", { name: /map/i })).toBeTruthy();
23 | });
24 |
25 | it("calls the reset function when switching to the default overlay", () => {
26 | const mockReset = jest.fn();
27 | const mockSat = jest.fn();
28 | render(
29 |
34 | );
35 | const btn = screen.getByRole("button", { name: /map/i });
36 | fireEvent.click(btn);
37 | expect(mockReset).toHaveBeenCalledTimes(1);
38 | expect(mockSat).not.toHaveBeenCalled();
39 | });
40 |
41 | it("calls the switchToSatellite function when switching to the satellite overlay", () => {
42 | const mockReset = jest.fn();
43 | const mockSat = jest.fn();
44 | render(
45 |
46 | );
47 | const btn = screen.getByRole("button", { name: /sat/i });
48 | fireEvent.click(btn);
49 | expect(mockSat).toHaveBeenCalledTimes(1);
50 | expect(mockReset).not.toHaveBeenCalled();
51 | });
52 | });
53 |
--------------------------------------------------------------------------------
/src/scss/_variables.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "GT-Zirkon";
3 | src: url(../assets/fonts/timemapfont.woff); // a Lato woff by default
4 | }
5 |
6 | $event_default: red;
7 |
8 | $offwhite: #efefef;
9 | $offwhite-transparent: rgba(239, 239, 239, 0.9);
10 | $lightwhite: #dfdfdf;
11 | $midwhite: #a0a0a0;
12 | $darkwhite: darken($midwhite, 15%);
13 | $yellow: #eb443e; // #ffd800;
14 | $red: rgb(233, 0, 19);
15 | $green: rgb(61, 241, 79);
16 | $midgrey: rgb(44, 44, 44);
17 | $darkgrey: #232323;
18 | $black: #000000;
19 | $black-transparent: rgba(0, 0, 0, 0.7);
20 |
21 | // Category colors
22 | $default: red;
23 | $alpha: #00ff00;
24 | $beta: #ff00ff;
25 | $other: yellow;
26 |
27 | .default {
28 | background: $default;
29 | }
30 | .other {
31 | background: $other;
32 | }
33 | .alpha {
34 | background: $alpha;
35 | }
36 | .beta {
37 | background: $beta;
38 | }
39 |
40 | $mainfont: "GT-Zirkon", "Lato", Helvetica, sans-serif;
41 |
42 | // Font sizes
43 | $xsmall: 10px; //0.7em;
44 | $small: 11px; //0.9em;
45 | $normal: 12px; //1em;
46 | $large: 14px; //1.1em;
47 | $xlarge: 16px; //1.2em;
48 | $xxlarge: 20px; //1.4em;
49 | $xxxlarge: 32px;
50 |
51 | // z-index levels
52 | $final-level: 10000;
53 | $loading-overlay: 500;
54 | $overheader: 100;
55 | $header: 10;
56 | $map-overlay: 2;
57 | $map: 1;
58 | $scene: 1;
59 | $hidden: -1;
60 | $timeline: 13;
61 |
62 | // platform-specific sizes
63 | $infopopup-width: 400px;
64 | $infopopup-left: 122px;
65 | $infopopup-bottom: 180px;
66 | $card-width: 500px;
67 | $card-right: 2px;
68 | $narrative-info-height: 205px;
69 | $narrative-info-desc-height: 153px;
70 | $timeline-height: 250px;
71 | $toolbar-width: 110px;
72 |
73 | $panel-width: 1000px;
74 | $panel-height: 1000px;
75 | $vimeo-width: $panel-width - 100;
76 | $vimeo-height: $panel-height / 2;
77 | $banner-height: 100px;
78 | $padding: 20px;
79 | $header-inset: 10px;
80 |
81 | // CSS variables (for React access)
82 | :root {
83 | --toolbar-width: 110px;
84 | --error-red: #eb443e;
85 | }
86 |
--------------------------------------------------------------------------------
/src/components/controls/atoms/Button.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 |
4 | /**
5 | * Primary UI component for user interaction
6 | */
7 | export const Button = ({
8 | primary,
9 | backgroundColor,
10 | borderRadius,
11 | size,
12 | label,
13 | normalCursor,
14 | ...props
15 | }) => {
16 | const mode = primary ? "button--primary" : "button--secondary";
17 | return (
18 |
31 | );
32 | };
33 |
34 | Button.propTypes = {
35 | /**
36 | * Is this the principal call to action on the page?
37 | */
38 | primary: PropTypes.bool,
39 | /**
40 | * What background color to use
41 | */
42 | backgroundColor: PropTypes.string,
43 | /**
44 | * How much rounded are they?
45 | */
46 | borderRadius: PropTypes.string,
47 | /**
48 | * How large should the button be?
49 | */
50 | size: PropTypes.oneOf(["small", "medium", "large"]),
51 | /**
52 | * Button contents
53 | */
54 | label: PropTypes.string.isRequired,
55 | /**
56 | * Optional click handler
57 | */
58 | onClick: PropTypes.func,
59 | };
60 |
61 | Button.defaultProps = {
62 | backgroundColor: "red",
63 | borderRadius: "0%",
64 | primary: false,
65 | size: "medium",
66 | onClick: undefined,
67 | };
68 |
69 | const CardButton = ({
70 | text,
71 | color = "#000",
72 | onClick = () => {},
73 | normalCursor,
74 | }) => (
75 |
84 | );
85 |
86 | export default CardButton;
87 |
--------------------------------------------------------------------------------
/src/components/Notification.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default class Notification extends React.Component {
4 | constructor(props) {
5 | super();
6 | this.state = {
7 | isExtended: false,
8 | };
9 | }
10 |
11 | toggleDetails() {
12 | this.setState({ isExtended: !this.state.isExtended });
13 | }
14 |
15 | renderItems(items) {
16 | if (!items) return "";
17 | return (
18 |
19 | {items.map((item, idx) => {
20 | if (item.error) {
21 | return
{item.error.message}
;
22 | }
23 | return null;
24 | })}
25 |
34 |
{message}
35 |
36 | {items !== null ? this.renderItems(items) : ""}
37 |
38 |
50 | {this.props.notifications.map((notification, idx) => {
51 | return (
52 |
this.toggleDetails()}
55 | key={idx}
56 | >
57 |
63 | {this.renderNotificationContent(notification)}
64 |
65 | );
66 | })}
67 |
onSearchRowClick([eventObj])}>
38 |
39 |
40 |
event
41 |
{getHighlightedText(date, query)}
42 |
43 |
44 |
location_on
45 |
{getHighlightedText(location, query)}
46 |
47 |
48 |
49 | {getShortDescription(description, query).map((match) => {
50 | return (
51 |
52 | {getHighlightedText(match, query)}...
53 |
54 |
55 | );
56 | })}
57 |
58 |
44 |
47 |
48 | This platform is unsuitable for mobile. Please revisit on a desktop.
49 |
50 |