mirror of
https://github.com/bellingcat/ukraine-timemap.git
synced 2026-06-13 05:48:36 +03:00
template cover with updated example.config.js
This commit is contained in:
Sam Ludford
committed by
Lachlan Kermode
Lachlan Kermode
parent
6e2ae8cd20
commit
db92644624
@@ -6,9 +6,31 @@ export default ({ ui, app, methods }) => {
|
||||
return copy[app.language].legend.default.intro.map(txt => <p>{txt}</p>)
|
||||
}
|
||||
|
||||
function renderHalfWithDot () {
|
||||
const categories = Object.keys(ui.style.categories).filter(label => label !== 'default')
|
||||
let firstFill = 'red'
|
||||
let secondFill = 'yellow'
|
||||
if (categories.length >= 1) {
|
||||
firstFill = 'rgb(163, 22, 33)'
|
||||
}
|
||||
if (categories.length >= 2) {
|
||||
secondFill = '#1c5df9'
|
||||
}
|
||||
return [
|
||||
<style>{`.svg-demo { max-width: 30px } .first { fill: ${firstFill} } .second { fill: ${secondFill} } .demo-text { font-size: 9pt; color: white; font-weight:900 }`}</style>,
|
||||
<svg viewBox='0 0 30 30' className='svg-demo'>
|
||||
<g className='location demo-element' transform='translate(15,15)'>
|
||||
<path className="location-event-marker first" id="arc_0" d="M 10 0 A 10 10 0 0 1 -10 1.2246467991473533e-15 L 0 0 L 10 0 Z" />
|
||||
<path class="location-event-marker second" id="arc_1" d="M -10 1.2246467991473533e-15 A 10 10 0 0 1 10 -2.4492935982947065e-15 L 0 0 L -10 1.2246467991473533e-15 Z" />
|
||||
<text class="location-count demo-text" dx="-4" dy="4">2</text>
|
||||
</g>
|
||||
</svg>
|
||||
]
|
||||
}
|
||||
|
||||
function renderCategoryColors () {
|
||||
const categories = Object.keys(ui.style.categories).filter(label => label !== 'default')
|
||||
|
||||
categories.reverse()
|
||||
return categories.map(category => (
|
||||
<div className='legend-section'>
|
||||
<svg x='0px' y='0px' width='50px' height='20px' viewBox='0 0 100 30' enableBackground='new 0 0 100 30'>
|
||||
@@ -21,7 +43,21 @@ export default ({ ui, app, methods }) => {
|
||||
))
|
||||
}
|
||||
|
||||
function renderArrow (strokeFill) {
|
||||
return (
|
||||
<svg x='-10px' y='0px' width='100px' height='30px' viewBox='0 40 100 30' enableBackground='new 0 0 100 70'>
|
||||
<polyline fill='none' stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' stroke-miterlimit='10' points='
|
||||
8.376,63.723 47.287,63.723 60,46 80,46 ' />
|
||||
{/* <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='33.723' y1='59.663' x2='39.069' y2='63.723' /> */}
|
||||
{/* <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='33.723' y1='67.782' x2='39.069' y2='63.723' /> */}
|
||||
<line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='78.849' y1='41.94' x2='84.195' y2='46' />
|
||||
<line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='78.849' y1='50.06' x2='84.195' y2='46' />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function renderView2DLegend () {
|
||||
const categories = Object.keys(ui.style.categories).filter(label => label !== 'default')
|
||||
return (
|
||||
<div className={`infopopup ${(app.flags.isInfopopup) ? '' : 'hidden'}`}>
|
||||
<div className='legend-header'>
|
||||
@@ -29,11 +65,39 @@ export default ({ ui, app, methods }) => {
|
||||
<h2>{copy[app.language].legend.default.header}</h2>
|
||||
</div>
|
||||
{renderIntro()}
|
||||
<div>
|
||||
{renderCategoryColors()}
|
||||
</div>
|
||||
<br />
|
||||
<div className='legend'>
|
||||
<div className='legend-container'>
|
||||
{renderCategoryColors()}
|
||||
<div className='legend-item one'>
|
||||
{renderHalfWithDot()}
|
||||
</div>
|
||||
<div className='legend-item three'>
|
||||
{copy[app.language].legend.default.notation}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div>
|
||||
<p>In narratives, arrows indicate physical movement between two events.</p>
|
||||
</div>
|
||||
|
||||
{
|
||||
ui.style.arrows ? (
|
||||
|
||||
Object.keys(ui.style.arrows).map( arrowName => (
|
||||
<div className='legend-section'>
|
||||
{renderArrow(ui.style.arrows[arrowName])}
|
||||
<div className='legend-labels'>
|
||||
<div className='label'>{arrowName}</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : null
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -14,7 +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 TemplateCover from './presentational/covers/TemplateCover'
|
||||
|
||||
import { parseDate } from '../js/utilities'
|
||||
|
||||
@@ -108,7 +108,7 @@ class Dashboard extends React.Component {
|
||||
<StaticPage showing={app.flags.isCover}>
|
||||
{/* enable USE_COVER in config.js features, and customise your header */}
|
||||
{/* pass 'actions.toggleCover' as a prop to your custom header */}
|
||||
<DefaultCover showAppHandler={() => {
|
||||
<TemplateCover showAppHandler={() => {
|
||||
/* eslint-disable no-undef */
|
||||
alert('This platform is not suitable for mobile. Please re-visit the site on a device with a larger screen.')
|
||||
/* eslint-enable no-undef */
|
||||
@@ -187,7 +187,7 @@ class Dashboard extends React.Component {
|
||||
<StaticPage showing={app.flags.isCover}>
|
||||
{/* enable USE_COVER in config.js features, and customise your header */}
|
||||
{/* pass 'actions.toggleCover' as a prop to your custom header */}
|
||||
<DefaultCover showAppHandler={actions.toggleCover} />
|
||||
<TemplateCover showing={app.flags.isCover} showAppHandler={actions.toggleCover} />
|
||||
</StaticPage>
|
||||
)}
|
||||
<LoadingOverlay
|
||||
|
||||
@@ -17,6 +17,7 @@ import DefsMarkers from './presentational/Map/DefsMarkers.jsx'
|
||||
|
||||
// NB: important constants for map, TODO: make statics
|
||||
const supportedMapboxMap = ['streets', 'satellite']
|
||||
const defaultToken = 'your_token'
|
||||
|
||||
class Map extends React.Component {
|
||||
constructor () {
|
||||
@@ -69,17 +70,14 @@ class Map extends React.Component {
|
||||
|
||||
let firstLayer
|
||||
|
||||
// if mapbox token and one of the default maps are specified
|
||||
if ((supportedMapboxMap.indexOf(this.props.ui.tiles) !== -1) && process.env.MAPBOX_TOKEN) {
|
||||
if ((supportedMapboxMap.indexOf(this.props.ui.tiles) !== -1) && process.env.MAPBOX_TOKEN && process.env.MAPBOX_TOKEN !== defaultToken) {
|
||||
firstLayer = L.tileLayer(
|
||||
`http://a.tiles.mapbox.com/v4/mapbox.${this.props.ui.tiles}/{z}/{x}/{y}@2x.png?access_token=${process.env.MAPBOX_TOKEN}`
|
||||
)
|
||||
// if mapbox token and custom map
|
||||
} else if (process.env.MAPBOX_TOKEN) {
|
||||
} else if (process.env.MAPBOX_TOKEN && process.env.MAPBOX_TOKEN !== defaultToken) {
|
||||
firstLayer = L.tileLayer(
|
||||
`http://a.tiles.mapbox.com/styles/v1/${this.props.ui.tiles}/tiles/{z}/{x}/{y}?access_token=${process.env.MAPBOX_TOKEN}`
|
||||
)
|
||||
// no mapbox token
|
||||
} else {
|
||||
firstLayer = L.tileLayer(
|
||||
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||||
|
||||
@@ -10,7 +10,7 @@ export default ({ media, viewIdx }) => {
|
||||
const shiftW = el ? el.getBoundingClientRect().width : 0
|
||||
|
||||
function renderMedia (media) {
|
||||
const { path, type } = media
|
||||
const { path, type, poster } = media
|
||||
switch (type) {
|
||||
case 'Image':
|
||||
return (
|
||||
@@ -27,6 +27,7 @@ export default ({ media, viewIdx }) => {
|
||||
return (
|
||||
<div className='media-player'>
|
||||
<Player
|
||||
poster={poster}
|
||||
className='source-video'
|
||||
playsInline
|
||||
src={path}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import Content from './Content'
|
||||
import Controls from './Controls'
|
||||
import { selectTypeFromPath } from '../../js/utilities'
|
||||
import { selectTypeFromPathWithPoster } from '../../js/utilities'
|
||||
|
||||
class SourceOverlay extends React.Component {
|
||||
constructor () {
|
||||
@@ -32,11 +32,11 @@ class SourceOverlay extends React.Component {
|
||||
if (typeof (this.props.source) !== 'object') {
|
||||
return this.renderError()
|
||||
}
|
||||
const { url, title, paths, date, type } = this.props.source
|
||||
const { url, title, paths, date, type, desc, poster } = this.props.source
|
||||
const shortenedTitle = title.substring(0, 100)
|
||||
|
||||
return (
|
||||
<div className='mo-overlay'>
|
||||
<div className={`mo-overlay ${this.props.opaque ? 'opaque' : ''}`}>
|
||||
<div className='mo-banner'>
|
||||
<div className='mo-banner-close' onClick={this.props.onCancel}>
|
||||
<i className='material-icons'>close</i>
|
||||
@@ -49,7 +49,7 @@ class SourceOverlay extends React.Component {
|
||||
|
||||
<div className='mo-container' onClick={e => e.stopPropagation()}>
|
||||
<div className='mo-media-container'>
|
||||
<Content media={paths.map(selectTypeFromPath)} viewIdx={this.state.idx} />
|
||||
<Content media={paths.map(p => selectTypeFromPathWithPoster(p, poster))} viewIdx={this.state.idx} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -58,25 +58,24 @@ class SourceOverlay extends React.Component {
|
||||
<Controls paths={paths} viewIdx={this.state.idx} onShiftHandler={this.onShiftGallery} />
|
||||
|
||||
<div className='mo-meta-container'>
|
||||
{/* <div className='mo-box-title'> */}
|
||||
{/* {title ? <p><b>{title}</b></p> : null} */}
|
||||
{/* <div>{desc}</div> */}
|
||||
{/* </div> */}
|
||||
<div className='mo-box-title'>
|
||||
<div>{desc}</div>
|
||||
</div>
|
||||
|
||||
<div className='mo-box'>
|
||||
{(type || date || url) ? <div className='mo-box'>
|
||||
<div>
|
||||
{type ? <h4>Media type</h4> : null}
|
||||
{type ? <p><i className='material-icons left'>perm_media</i>{type}</p> : null}
|
||||
</div>
|
||||
<div>
|
||||
{date ? <h4>Date</h4> : null}
|
||||
{date ? <h4>Date Published</h4> : null}
|
||||
{date ? <p><i className='material-icons left'>today</i>{date}</p> : null}
|
||||
</div>
|
||||
<div>
|
||||
{url ? <h4>Link</h4> : null}
|
||||
{url ? <span><i className='material-icons left'>link</i><a href={url} target='_blank'>Link to original URL</a></span> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
import copy from '../../../js/data/copy.json'
|
||||
import { isNotNullNorUndefined } from '../../../js/utilities'
|
||||
|
||||
const CardLocation = ({ language, location, isPrecise }) => {
|
||||
if (isNotNullNorUndefined(location)) {
|
||||
if (location !== '') {
|
||||
return (
|
||||
<div className='card-cell location'>
|
||||
<p>
|
||||
|
||||
@@ -96,9 +96,9 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
|
||||
|
||||
return (
|
||||
<g
|
||||
className='location'
|
||||
className={`location ${narrative ? 'no-hover' : ''}`}
|
||||
transform={`translate(${x}, ${y})`}
|
||||
onClick={() => onSelect(location.events)}
|
||||
onClick={(!narrative) ? () => onSelect(location.events) : null}
|
||||
>
|
||||
{renderLocationSlicesByCategory(location)}
|
||||
{extraRender ? extraRender() : null}
|
||||
|
||||
115
src/components/presentational/covers/TemplateCover.js
Normal file
115
src/components/presentational/covers/TemplateCover.js
Normal file
@@ -0,0 +1,115 @@
|
||||
import React from 'react'
|
||||
import { connect } from "react-redux"
|
||||
import MediaOverlay from '../../Overlay/Media'
|
||||
|
||||
const ReactMarkdown = require('react-markdown')
|
||||
|
||||
const MEDIA_HIDDEN = -2
|
||||
const MEDIA_HOWTO = -1
|
||||
|
||||
class TemplateCover extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
video: MEDIA_HIDDEN
|
||||
}
|
||||
}
|
||||
|
||||
getVideo(index) {
|
||||
if(index == MEDIA_HOWTO) {
|
||||
return this.props.cover.howToVideo
|
||||
} else if(index >= 0) {
|
||||
return this.props.cover.videos[index]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
var video = this.getVideo(this.state.video)
|
||||
return (
|
||||
<div className='default-cover-container'>
|
||||
<div className="cover-content">
|
||||
{
|
||||
this.props.cover.bgVideo ? (
|
||||
<div className={`fullscreen-bg ${!this.props.showing ? 'hidden' : ''}`}>
|
||||
<video
|
||||
loop
|
||||
muted
|
||||
autoPlay
|
||||
preload='auto'
|
||||
className='fullscreen-bg__video'
|
||||
>
|
||||
<source src={this.props.cover.bgVideo} type='video/mp4' />
|
||||
</video>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
<h1 style={{ 'margin-bottom': '-20px', 'text-align': 'center' }}>{this.props.cover.title}</h1>
|
||||
<h3 style={{ 'text-align': 'center' }}>{this.props.cover.subtitle}</h3>
|
||||
{
|
||||
this.props.cover.subsubtitle ? (
|
||||
<h5 style={{ 'text-align': 'center', 'margin-top': '-10px' }}>{this.props.cover.subsubtitle}</h5>
|
||||
) : null
|
||||
}
|
||||
<hr />
|
||||
<div className='hero thin'>
|
||||
{
|
||||
this.props.cover.howToVideo ? (
|
||||
<div className='row'>
|
||||
<div className='cell plain' onClick={() => this.setState({ video: -1 })}>
|
||||
How to Use the Platform
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
<div className='row'>
|
||||
<div className='cell yellow' onClick={this.props.showAppHandler}>
|
||||
EXPLORE
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ReactMarkdown source={this.props.cover.description} />
|
||||
|
||||
{
|
||||
this.props.cover.videos ? (
|
||||
<div className='hero'>
|
||||
<div className='row'>
|
||||
{ this.props.cover.videos.slice(0,4).map( (media, index) => (
|
||||
<div className='cell small' onClick={() => this.setState({ video: index })} >
|
||||
{media.buttonTitle}<br />{media.buttonSubtitle}
|
||||
</div>
|
||||
)) }
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
|
||||
{
|
||||
this.state.video != MEDIA_HIDDEN ? (
|
||||
<MediaOverlay
|
||||
opaque
|
||||
source={
|
||||
{
|
||||
title: video.title,
|
||||
desc: video.desc,
|
||||
paths: [video.file],
|
||||
poster: video.poster
|
||||
}}
|
||||
onCancel={() => this.setState({ video: MEDIA_HIDDEN })}
|
||||
/>
|
||||
) : null }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state) {
|
||||
return {
|
||||
cover : state.app.cover
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps) (TemplateCover);
|
||||
@@ -97,7 +97,9 @@
|
||||
"Each event represents an occurence that is distinct in either time, space, or both. An event is represented by a coloured circle on both the map and the timeline.",
|
||||
"Select an event to reveal its content and sources. You can filter events by category or other specified filters in the top left toolbar.",
|
||||
"Narratives compose events to reveal logical threads that emerge from them. Transition to narrative mode by selecting a narrative from the top left dashboard icon."
|
||||
]
|
||||
],
|
||||
"notation": "Combinations of colours indicate multiple events in a single location.",
|
||||
"arrows": "Arrows indicate physical movement between events."
|
||||
}
|
||||
},
|
||||
"toolbar": {
|
||||
@@ -117,14 +119,14 @@
|
||||
}
|
||||
},
|
||||
"narratives_label": "Narratives",
|
||||
"narrative_summary": "Here you can follow some curated stories we have found in the data.",
|
||||
"narrative_summary": "Follow a path through the data, from one key event to the next.",
|
||||
"categories": "Categories",
|
||||
"tags": "Filters",
|
||||
"tags_label": "Filters",
|
||||
"explore_by_tag__title": "Explore by filter",
|
||||
"explore_by_tag__description": "Selecting a filter will show you only those events that are annotated with the filter. If you select nothing, as well as everything, all data will be displayed.",
|
||||
"explore_by_category__title": "Explore by category",
|
||||
"explore_by_category__description": "Selecting a category will show you only the events in that category. If you select a filter on top, it will filter events only in the selected categories."
|
||||
"explore_by_category__title": "Explore events by category",
|
||||
"explore_by_category__description": ""
|
||||
|
||||
},
|
||||
"timeline": {
|
||||
|
||||
@@ -151,3 +151,18 @@ export function selectTypeFromPath (path) {
|
||||
}
|
||||
return { type, path }
|
||||
}
|
||||
|
||||
export function selectTypeFromPathWithPoster (path, poster) {
|
||||
let type
|
||||
switch (true) {
|
||||
case /\.(png|jpg)$/.test(path):
|
||||
type = 'Image'; break
|
||||
case /\.(mp4)$/.test(path):
|
||||
type = 'Video'; break
|
||||
case /\.(md)$/.test(path):
|
||||
type = 'Text'; break
|
||||
default:
|
||||
type = 'Unknown'; break
|
||||
}
|
||||
return { type, path, poster }
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ const eventSchema = Joi.object().keys({
|
||||
longitude: Joi.string().allow(''),
|
||||
type: Joi.string().allow(''),
|
||||
category: Joi.string().required(),
|
||||
category_full: Joi.string().allow(''),
|
||||
narratives: Joi.array(),
|
||||
sources: Joi.array(),
|
||||
tags: Joi.array().allow(''),
|
||||
|
||||
@@ -5,6 +5,7 @@ $lightwhite: #dfdfdf;
|
||||
$midwhite: #a0a0a0;
|
||||
$darkwhite: darken($midwhite, 15%);
|
||||
$yellow: #ffd800;
|
||||
// $yellow: rgb(240, 255, 0);
|
||||
$red: rgb(233, 0, 19);
|
||||
$green: rgb(61, 241, 79);
|
||||
$midgrey: rgb(44, 44, 44);
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
background-color: black;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.95;
|
||||
opacity: 1;
|
||||
transition: top 0.4s ease;
|
||||
z-index: $overheader + 1;
|
||||
|
||||
overflow-y: auto;
|
||||
color: $offwhite;
|
||||
|
||||
&.showing {
|
||||
@@ -17,10 +17,212 @@
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen-bg {
|
||||
&.hidden {
|
||||
top: -100%;
|
||||
}
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: -100;
|
||||
background: #000000; }
|
||||
|
||||
.fullscreen-bg__video {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-filter: contrast(70%) brightness(70%) grayscale(100%);
|
||||
/* Webkit */
|
||||
/* filter: gray; /* IE6-9 */
|
||||
filter: contrast(70%) brightness(70%) grayscale(100%);
|
||||
/* W3C */ }
|
||||
|
||||
.default-cover-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
font-size: 12pt;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100%;
|
||||
|
||||
hr, br {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: space-around;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
background-color: $offwhite;
|
||||
margin-top: 60px;
|
||||
min-height: calc(100% - 280px);
|
||||
max-height: calc(100% - 280px);
|
||||
min-width: 19%;
|
||||
max-width: 19%;
|
||||
color: black;
|
||||
.il-video-pill {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
background-color: transparent;
|
||||
border-bottom: 5px solid black;
|
||||
transition: all 0.4s ease;
|
||||
&.explore {
|
||||
background-color: $yellow;
|
||||
}
|
||||
&.videos {
|
||||
background-color: blue;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $darkwhite;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 100px;
|
||||
&.thin {
|
||||
min-width: 250px;
|
||||
max-width: 400px;
|
||||
}
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
.row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
@media only screen and (max-width: 1200px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
justify-content: space-around;
|
||||
.cell {
|
||||
border: 1px solid white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
background-color: $darkgrey;
|
||||
padding: 10px 0;
|
||||
transition: all 0.4s ease;
|
||||
letter-spacing: 2px;
|
||||
min-height: 40px;
|
||||
&.small {
|
||||
letter-spacing: inherit;
|
||||
font-size: 10pt;
|
||||
}
|
||||
&.plain {
|
||||
min-height: 10px;
|
||||
background-color: black;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
&.yellow {
|
||||
color: black;
|
||||
background-color: $yellow;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $darkwhite;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// min-width: 100%;
|
||||
padding: 20px 40px 0px 40px;
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
padding: 20px 30% 0px 30%;
|
||||
}
|
||||
|
||||
.verify-tabs {
|
||||
background-color: $yellow;
|
||||
color: black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.v-tab {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex: 1;
|
||||
// border-right: 4px solid black;
|
||||
// padding: 0 10px;
|
||||
// min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.il-cover-verification-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.il-cover-verification {
|
||||
.il-video {
|
||||
border-radius: 1em;
|
||||
background-color: rgba(240,240,240,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.cover-footer {
|
||||
&.disabled {
|
||||
display: none;
|
||||
}
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
min-height: 150px;
|
||||
min-width: 100%;
|
||||
padding: 10px;
|
||||
background-color: black;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.il-cover-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 300px;
|
||||
max-height: 80px;
|
||||
margin-top: 30px;
|
||||
background-color: $offwhite;
|
||||
color: black;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: darken($offwhite, 30%);
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
|
||||
.infopopup {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
// height: 400px;
|
||||
box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3), 10px 15px 12px rgba(0, 0, 0, 0.22);
|
||||
color: $darkgrey;
|
||||
position: absolute;
|
||||
background: $offwhite;
|
||||
border-radius: 5px;
|
||||
bottom: 20px;
|
||||
left: 100px;
|
||||
bottom: 180px;
|
||||
left: 120px;
|
||||
border: 3px solid $offwhite;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
@@ -48,11 +48,22 @@
|
||||
.legend-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.one {
|
||||
flex: 1;
|
||||
}
|
||||
&.three {
|
||||
flex: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.legend-section {
|
||||
width: 300px;
|
||||
height: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -67,7 +78,7 @@
|
||||
display: flex;
|
||||
|
||||
.label {
|
||||
font-size: $xsmall;
|
||||
// font-size: $xsmall;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -39,10 +39,6 @@
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.narrative {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link {
|
||||
stroke: $midgrey;
|
||||
fill: none;
|
||||
@@ -173,6 +169,10 @@
|
||||
pointer-events: all !important;
|
||||
fill: $event_default;
|
||||
stroke-width: 0;
|
||||
|
||||
&.blue {
|
||||
fill: blue;
|
||||
}
|
||||
}
|
||||
|
||||
.narrative-step-arrow {
|
||||
@@ -190,5 +190,6 @@
|
||||
fill: #d0d0d0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.no-hover {
|
||||
cursor: grab !important;
|
||||
}
|
||||
|
||||
@@ -13,12 +13,15 @@ $banner-height: 100px;
|
||||
flex-direction: column;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0,0,0, 0.85);
|
||||
&.opaque {
|
||||
background-color: black;
|
||||
}
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
@@ -28,13 +31,12 @@ $banner-height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: calc(100vh - 350px);
|
||||
max-height: calc(100vh - 350px);
|
||||
// height: calc(100vh - 350px);
|
||||
// max-height: calc(100vh - 350px);
|
||||
width: $panel-width;
|
||||
max-width: 90vw;
|
||||
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
$overlay-bg: rgba(239,239,239,0.9);
|
||||
@@ -155,7 +157,7 @@ $overlay-bg: rgba(239,239,239,0.9);
|
||||
|
||||
.mo-footer {
|
||||
position: fixed;
|
||||
height: 250px;
|
||||
// height: 250px;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
opacity: 0.9;
|
||||
@@ -166,6 +168,8 @@ $overlay-bg: rgba(239,239,239,0.9);
|
||||
|
||||
.mo-meta-container {
|
||||
color: $overlay-bg;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
border-radius: 2em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -177,13 +181,15 @@ $overlay-bg: rgba(239,239,239,0.9);
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
max-width: $panel-width;
|
||||
}
|
||||
|
||||
.mo-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
width: $panel-width;
|
||||
min-width: 800px;
|
||||
max-width: $panel-width;
|
||||
padding: $padding 0;
|
||||
border-top: 1px solid rgb(189,189,189);
|
||||
font-family: "Lato", Helvetica, sans-serif;
|
||||
@@ -283,6 +289,7 @@ $overlay-bg: rgba(239,239,239,0.9);
|
||||
}
|
||||
|
||||
.media-player {
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
@@ -299,6 +306,7 @@ $overlay-bg: rgba(239,239,239,0.9);
|
||||
margin: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@@ -314,3 +322,18 @@ $overlay-bg: rgba(239,239,239,0.9);
|
||||
.video-react .video-react-control {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
// full-screen overloads
|
||||
.mo-overlay.full-screen {
|
||||
background-color: black;
|
||||
.mo-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
.mo-media-container {
|
||||
border-top: 1px solid $offwhite;
|
||||
border-bottom: 1px solid $offwhite;
|
||||
}
|
||||
.mo-box {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,13 +72,9 @@ const initial = {
|
||||
new Date(2016, 2, 23, 12)
|
||||
],
|
||||
zoomLevels: [
|
||||
{ label: '3 years', duration: 1576800 },
|
||||
{ label: '3 months', duration: 129600 },
|
||||
{ label: '3 days', duration: 4320 },
|
||||
{ label: '12 hours', duration: 720 },
|
||||
{ label: '2 hours', duration: 120 },
|
||||
{ label: '30 min', duration: 30 },
|
||||
{ label: '10 min', duration: 10 }
|
||||
{ label: '12 hours', duration: 720 }
|
||||
]
|
||||
},
|
||||
flags: {
|
||||
|
||||
Reference in New Issue
Block a user