diff --git a/example.config.js b/example.config.js index 176e5e2..27ae9e4 100644 --- a/example.config.js +++ b/example.config.js @@ -11,7 +11,7 @@ module.exports = { INCOMING_DATETIME_FORMAT: '%m/%d/%YT%H:%M', MAPBOX_TOKEN: 'pk.EXAMPLE_MAPBOX_TOKEN', features: { - USE_COVER: true, + USE_COVER: false, USE_TAGS: false, USE_SEARCH: false, USE_SITES: true, diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 778d1a4..3f971f8 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -14,6 +14,7 @@ import InfoPopUp from './InfoPopup.jsx' import Timeline from './Timeline.jsx' import Notification from './Notification.jsx' import StaticPage from './StaticPage' +import DefaultCover from './presentational/covers/Default' import { parseDate } from '../js/utilities' @@ -160,8 +161,9 @@ class Dashboard extends React.Component { ) : null} {process.env.features.USE_COVER && ( - {/* enable USE_COVER in config.js features, and put content here if you want a header */} + {/* enable USE_COVER in config.js features, and customise your header */} {/* pass 'actions.toggleCover' as a prop to your custom header */} + )} ( +
+

Here's an example cover.

+

Replace it with a more descriptive one:

+ +

+
+ +
+
+) diff --git a/src/js/utilities.js b/src/js/utilities.js index b739bae..8d04788 100644 --- a/src/js/utilities.js +++ b/src/js/utilities.js @@ -132,7 +132,7 @@ export function toggleFlagAC (flag) { ...appState, flags: { ...appState.flags, - isCover: !appState.flags[flag] + [flag]: !appState.flags[flag] } }) } diff --git a/src/scss/cover.scss b/src/scss/cover.scss index ab1d94a..a033eb7 100644 --- a/src/scss/cover.scss +++ b/src/scss/cover.scss @@ -15,4 +15,12 @@ top: 0; left: 0; } +} + +.default-cover-container { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + height: 100%; } \ No newline at end of file